SwiftUI 中事件触发的动画

Question

SwiftUI 动画通常由状态驱动，这很好，但有时您确实希望触发临时（通常是可逆的）动画以响应某些事件。例如，我想在点击按钮时临时增加按钮的大小（释放按钮时大小的增加和减少都应该作为单个动画发生），但我无法弄清楚这一点.

我认为它可以与转换一起被破解，但不是很好。另外，如果我制作一个使用自动反转的动画，它会增加大小，减小它然后跳回到增加的状态。

Answer 1

您可以使用绑定到 longPressAction() 的 @State 变量：

为 Beta 5 更新代码：

struct ContentView: View {
    var body: some View {
        HStack {
            Spacer()
            MyButton(label: "Button 1")
            Spacer()
            MyButton(label: "Button 2")
            Spacer()
            MyButton(label: "Button 3")
            Spacer()
        }
    }
}

struct MyButton: View {
    let label: String
    @State private var pressed = false


    var body: some View {

        return Text(label)
            .font(.title)
            .foregroundColor(.white)
            .padding(10)
            .background(RoundedRectangle(cornerRadius: 10).foregroundColor(.green))
            .scaleEffect(self.pressed ? 1.2 : 1.0)
            .onLongPressGesture(minimumDuration: .infinity, maximumDistance: .infinity, pressing: { pressing in
                withAnimation(.easeInOut(duration: 0.2)) {
                    self.pressed = pressing
                }
            }, perform: { })
    }
}

Answer 2

这也是我一直从事的事情。

到目前为止，我的解决方案依赖于应用 GeometryEffect 修饰符并滥用其方法 effectValue 在某些动画期间连续调用的事实。所以想要的效果实际上是插值从 0..1 开始的变换，在 0.5 有主要效果，在 0 或 1 没有效果

效果很好，它适用于所有视图，而不仅仅是按钮，无需依赖触摸事件或按钮样式，但在我看来仍然是一种 hack。

随机旋转和缩放效果示例：

代码示例：

struct ButtonEffect: GeometryEffect {

    var offset: Double // 0...1

    var animatableData: Double {
        get { offset }
        set { offset = newValue }
    }

    func effectValue(size: CGSize) -> ProjectionTransform {

        let effectValue = abs(sin(offset*Double.pi))
        let scaleFactor = 1+0.2*effectValue

        let affineTransform = CGAffineTransform(rotationAngle: CGFloat(effectValue)).translatedBy(x: -size.width/2, y: -size.height/2).scaledBy(x: CGFloat(scaleFactor), y: CGFloat(scaleFactor))

        return ProjectionTransform(affineTransform)
    }
}

struct ButtonActionView: View {
    @State var animOffset: Double = 0
    var body: some View {
        Button(action:{
            withAnimation(.spring()) {
                self.animOffset += 1
            }
        })
        {
            Text("Press ME")
                .padding()
        }
        .background(Color.yellow)
        .modifier(ButtonEffect(offset: animOffset))
    }
}

Answer 3

我相信这就是您所追求的。 （这就是我解决这个问题的方法）

基于 dfd 的链接，我想出了这个，它不依赖于任何 @State 变量。您只需实现自己的按钮样式。 不需要 Timers、@Binding、@State 或其他复杂的解决方法。

import SwiftUI

struct MyCustomPressButton: ButtonStyle {  
    func makeBody(configuration: Self.Configuration) -> some View {
        configuration.label
            .padding(10)
            .cornerRadius(10)
            .scaleEffect(configuration.isPressed ? 0.8 : 1.0)
    }
}

struct Play: View {
    var body: some View {
            Button("Tap") {
         }.buttonStyle(MyCustomPressButton())
            .animation(.easeIn(duration: 0.2))
    }
}

struct Play_Previews: PreviewProvider {
    static var previews: some View {
        Play()
    }
}

Answer 4

在 SwiftUI 中无法绕过通过状态更新的需要。你需要有一些属性只在短时间内为真，然后切换回来。

以下动画从小到大再回来。

struct ViewPlayground: View {

    @State var enlargeIt = false
    var body: some View {
        Button("Event!") {
            withAnimation {
                self.enlargeIt = true
            }
        }
        .background(Momentary(doIt: self.$enlargeIt))
        .scaleEffect(self.enlargeIt ? 2.0 : 1.0)
    }
}

struct Momentary: View {
    @Binding var doIt: Bool
    var delay: TimeInterval = 0.35
    var body: some View {
        Group {
            if self.doIt {
                ZStack { Spacer() }
                    .onAppear {
                        DispatchQueue.main.asyncAfter(deadline: .now() + self.delay) {
                            withAnimation {
                                self.doIt = false
                            }
                        }
                }
            }
        }
    }
}

不幸的是，delay 是设置 self.enlargeIt = true 时产生动画所必需的。没有它，它只会动画回退。不确定这是否是 Beta 4 中的错误。