主页 / coding / 问题 / 76932991
Accepted
MoshiMoshi
Asked: 2023-08-19 07:22:55 +0800 CST

如何让 SwiftUI 的动画变慢

  • 772

我实现了一个带有旋转动画的图像以及三个用于调整旋转速度的按钮。通过修改动画持续时间来控制速度。但是，我面临一个问题，尝试放慢动画速度会导致动画不断加速。

这是我的代码片段：

import SwiftUI

struct ContentView: View {
    
    @State private var rotationAngle: Angle = .degrees(0)
    @State var imageSpeed  : Double = 1.5
    var body: some View {
        VStack {
            Image("j")
                .resizable()
                .frame(width: 100, height: 100)
                .rotationEffect(rotationAngle, anchor: .center)
                .onChange(of: imageSpeed){ _ in
                    rotationAngle = .degrees(0)
                    let animation = Animation.linear(duration: imageSpeed).repeatForever(autoreverses: false)
                    withAnimation(animation) {
                        
                        rotationAngle = .degrees(360)
                        
                    }
                    print(imageSpeed)
                }
            HStack {
                Button(action: {
                    
                    imageSpeed = 4
                }) {
                    Text("Slow")
                    
                }
                
                Button(action: {
                    imageSpeed = 1
                }) {
                    Text("Fast")
                }
                
                Button(action: {
                    imageSpeed = 0.0
                }) {
                    Text("Stop")
                }
            }
            .padding(.top, 20)
        }
    }
}


struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

我尝试了上面的代码，但没有产生预期的结果。我真的很感激任何有关这个问题的帮助。

swiftui

1 个回答

  1. Best Answer

    开始新动画时需要停止上一个动画。执行此操作的一种简单方法是从Image. 通过向映像添加.id()，您可以通过更改id.

    下面，我介绍了一个@State private var imageid跟踪当前id. 当imageSpeed更改时，增加imageid，它将使用当前的 new 启动一个新实例imageSpeed：

    struct ContentView: View {
    
    @State private var rotationAngle: Angle = .degrees(0)
    @State var imageSpeed  : Double = 1.5
    @State private var imageid = 0
    var body: some View {
        VStack {
            Image("j")
                .resizable()
                .frame(width: 100, height: 100)
                .rotationEffect(rotationAngle, anchor: .center)
                .id(imageid)
                .onChange(of: imageSpeed){ _ in
                    imageid += 1
                    rotationAngle = .degrees(0)
                    let animation = Animation.linear(duration: imageSpeed).repeatForever(autoreverses: false)
                    withAnimation(animation) {
                        
                        rotationAngle = .degrees(360)
                        
                    }
                    print(imageSpeed)
                }
            HStack {
                Button(action: {
                    
                    imageSpeed = 4
                }) {
                    Text("Slow")
                    
                }
                
                Button(action: {
                    imageSpeed = 1
                }) {
                    Text("Fast")
                }
                
                Button(action: {
                    imageSpeed = 0.0
                }) {
                    Text("Stop")
                }
            }
            .padding(.top, 20)
        }
    }
}

    替代解决方案

    从那时起，变化就会imageSpeed触发对新图像动画的需求，我们可以简单地添加：

    .id(imageSpeed)

    消除了Image引入另一个变量的需要@State。

    • 1

相关问题