如何解决SwiftUI动画onLongPressGestureminimumDuration:0.5自动启动
我创建了一个圆形按钮,指定将其显示为.onLongPressGesture上的比例动画(最小持续时间:0.5) 代码如下:
struct PlayerTouch: View {
@State private var animationAmount: CGFloat = 1
@State var animationEffect = false
var outerColor: Color
var innerColor: Color
let touchpulse = Animation.linear.repeatForever(autoreverses: true)
private var outerBorderCirle: some View {
let side: CGFloat = Device.model == device.Six_6S_7_8_SE ? 108.6 : 146
return Circle()
.stroke(outerColor,linewidth: 6)
.frame(width: side,height: side)
.shadow(color: Color.black.opacity(0.3),radius: 8,x: 0,y: 0)
}
private var innerBorderCirle: some View {
let side: CGFloat = Device.model == device.Six_6S_7_8_SE ? 80.3 : 108
return Circle()
.stroke(innerColor,linewidth: 20)
.frame(width: side,height: side)
.scaleEffect(animationEffect ? 0.9 : 1)
.opacity(animationEffect ? 0.7 : 1)
.animation(touchpulse)
}
private var touchCirle: some View {
let side: CGFloat = Device.model == device.Six_6S_7_8_SE ? 71.7 : 96
return Circle()
.foregroundColor(colors.darkCream.value)
.shadow(color: colors.touchCream.value,radius: 18,y: 6)
.frame(width: side,height: side)
.onLongPressGesture(minimumDuration: 0.5) {
self.animationEffect = true
}
}
}
var body: some View {
ZStack{
outerBorderCirle
innerBorderCirle
touchCirle
}
}}
我已经在下面的主视图中(例如波纹管)从该视图创建了4个实例:
struct GameScene: View {
@Binding var numberOfPeople: Int
@State var offset = 0
private var touch1: some View {
PlayerTouch(outerColor: outerColors[0],innerColor: innerColors[0])
}
private var touch2: some View {
PlayerTouch(outerColor: outerColors[1],innerColor: innerColors[1])
}
private var touch3: some View {
PlayerTouch(outerColor: outerColors[2],innerColor: innerColors[2])
}
private var touch4: some View {
PlayerTouch(outerColor: outerColors[3],innerColor: innerColors[3])
}
var body: some View {
vstack(spacing: Device.model! == .X_Xs_11Pro ? 20 : 40){
HStack{
Spacer()
touch1
touch2
.offset(y: Device.model! == .Six_6S_7_8_SE &&
numberOfPeople > 2 ? -40 : -50)
Spacer()
}
HStack{
if numberOfPeople > 2{
Spacer()
touch3
.offset(x: numberOfPeople == 3 ? -40 : 0,y: numberOfPeople == 3 ? -40 : 0)
}
if numberOfPeople > 3 {
touch4
.offset(y:-50)
Spacer()
}
}
}.frame(height: height)
.padding(.leading,10)
.padding(.trailing,10)
}}
,我有一个添加人数的按钮,该按钮导致在该视图上显示实例。 我的问题是动画添加到人数后会自动触发 这是显示问题的GIF:
Animation should be like this and should be triggered after long tap
解决方法
使动画主动进行明确的按值更改,例如
return Circle()
.stroke(innerColor,lineWidth: 20)
.frame(width: side,height: side)
.scaleEffect(animationEffect ? 0.9 : 1)
.opacity(animationEffect ? 0.7 : 1)
.animation(touchpulse,value: animationEffect) // << here !!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。