动画曲线在SwiftUI中的使用

动画是用来创建在视图之间或视图内部的过渡效果，使用户界面更加生动和吸引人

下面主要介绍曲线动画，首先看看效果。

上述代码为不同动画参数的最后效果。下面是代码

struct AnimationCurvesSample: View {
    @State var isAnimating: Bool = false
    
    var body: some View {
        VStack {
            Button("Button") {
                isAnimating.toggle()
            }
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 80)
                .animation(Animation.timingCurve(0.6, 0.52, 0.99, -0.02), value: isAnimating)
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 80)
                .animation(Animation.default, value: isAnimating)
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 80)
                .animation(Animation.easeInOut, value: isAnimating)
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 80)
                .animation(Animation.linear, value: isAnimating)
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 80)
                .animation(Animation.easeIn, value: isAnimating)
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 80)
                .animation(Animation.easeOut, value: isAnimating)
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 80)
                .animation(.spring(), value: isAnimating)
            
            RoundedRectangle(cornerRadius: 20)
                .frame(width: isAnimating ? 350 : 50, height: 80)
                .animation(.spring(
                    response: 0.3,
                    dampingFraction: 0.7,
                    blendDuration: 0.3
                ), value: isAnimating)
        }
    }
}

总共有八个圆角矩形，每个效果对应一个动画参数，分别是：

1. 自定义参数值：timingCurve
2. Animation.default
3. Animation.easeInOut
4. Animation.linear
5. Animation.easeIn
6. Animation.easeOut
   7. .spring()
   8. .spring(response: 0.3, dampingFraction: 0.7, blendDuration: 0.3)

Animation.default属性返回的值是Animation.easeInOut(duration: 0.3) ,

所以当你使用Default时，就相当于在使用easeInOut。

其实它们都有默认的曲线值，但都是被封装过的。

自定义动画曲线值

如果系统内置的效果无法满足你的需求，你可以使用Animation.timingCurve方法来自定义曲线值，一般这个值都会由负责交互的设计师给出对应的值，以下是示例代码

Animation.timingCurve(0.6, 0.52, 0.99, -0.02)

下面有一个网站，大家可以参考/调试曲线值

cubic-bezier.com
Edit descriptioncubic-bezier.com

自定义动画时间

另外系统的方法可以自定义动画时间，方法如下图

方法都会自带一个Duration参数，可以设置动画时长。

阻尼动画

这个动画应该经常见到，使用此动画方法，会让被做动画的视图有一个弹簧效果。

具体方法为以下方法，方法都有默认值，你也可以自定义值。

public static func spring(response: Double = 0.55, dampingFraction: Double = 0.825, blendDuration: Double = 0) -> Animation

以下是方法参数说明

• response值小意味着初始速度慢,动画会先缓慢然后加速。
• dampingFraction较小意味着震荡次数多,有较多的回弹效果。
• 设置blendDuration可以让动画结束后淡出。

通常此方法的参数response设置为0.3，dampingFraction为0.7是一个相对较好的效果

好了，以上就是Curves的介绍，喜欢就点个赞吧。如果有疑问，请评论区留言！