如何摆脱不需要的 SwiftUI 动画？

Posted 2023-03-13

【中文标题】如何摆脱不需要的 SwiftUI 动画？

【英文标题】：How can I get rid of unwanted SwiftUI animation?

【发布时间】：2021-09-19 13:57:30

【问题描述】：

我有一个黑色圆圈，当应用程序启动时，我希望它的 X 偏移量从 0 变为 100 并带有动画。换句话说，我希望圆圈随着动画向右移动，直到它接触到灰色框的右边缘。我还希望圆圈的颜色在它接触到灰色框的右边缘时突然从黑色变为蓝色而没有动画。

正如您在下面看到的，即使我的代码没有指定它应该随着动画改变颜色，圆圈也会随着动画逐渐从黑色变为蓝色。

我怎样才能摆脱这个不需要的动画，并在圆圈接触到灰色框的边缘时突然改变颜色？

import SwiftUI

struct ContentView: View 
    @State var circleOffset:CGFloat = 0
    var body: some View 
        HStack 
            Circle()
                .frame(width: 100)
                .offset(x: circleOffset)
                .foregroundColor(circleOffset == 100 ? .blue : .black)
        
        .frame(width: 300, height: 150)
        .background(Color.gray)
        .onAppear
            withAnimation(.linear(duration: 2)) 
                circleOffset = 100
            
        
    

【参考方案1】：

您在同一状态上加入颜色更改，您已将其设置为动画，因此如果您需要立即更改颜色，您必须使用不同的、不可动画的状态更新它，例如

struct ContentView: View 
    @State var circleOffset:CGFloat = 0
    @State var toggleColor = false
    var body: some View 
        HStack 
            Circle()
                .frame(width: 100)
                .foregroundColor(toggleColor ? .blue : .black)
                .offset(x: circleOffset)
        
        .frame(width: 300, height: 150)
        .background(Color.gray)
        .onAppear
            withAnimation(.linear(duration: 2)) 
                circleOffset = 100
            
            DispatchQueue.main.asyncAfter(deadline: .now() + 2) 
                toggleColor.toggle()
            
        
    

使用 Xcode 13 / ios 15 测试

【讨论】：

您也可以为动画使用布尔值，因为值本身不是动画的，只是视图：.offset(x: isOffset ? 100 : 0)