SwiftUI Animation 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 вот гифка, показывающая проблему:

Показанная проблема с анимацией

правильный способ показать анимацию - после того, как я прикоснусь к ней в течение 0,5 секунды

Анимация должна быть такой и запускаться после долгого нажатия


person Azhman Adam    schedule 24.08.2020    source источник


Ответы (1)


Сделайте анимацию активной явным изменением значения, например

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 !!
person Asperi    schedule 24.08.2020