我创建了一个圆形按钮,我指定它在 .onLongPressGesture(minimumDuration: 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, x: 0, 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)
}}
我有一个按钮来添加人数,这会导致在视图上显示实例。我的问题是添加到 numberofpeople 后动画会自动触发这里是显示问题的 gif:
显示动画的正确方法是在我触摸它 0.5 秒后