时间戳

首页 > 解决方案 > SwiftUI 动画 onLongPressGesture(minimumDuration: 0.5) 自动启动

swift - SwiftUI 动画 onLongPressGesture(minimumDuration: 0.5) 自动启动

问题描述

我创建了一个圆形按钮，我指定它在 .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 秒后

动画应该是这样的，应该在长按后触发

标签： swiftswiftuiswiftui-animationswiftui-button

解决方案

使动画激活显式的每个值更改，例如

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 !!

推荐阅读