六虎

动画曲线在SwiftUI中的使用

动画曲线在SwiftUI中的使用

作者：

四次元口袋

在

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

下面主要介绍曲线动画，首要看看作用。

动画曲线在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

自定义动画时刻

另外体系的办法能够自定义动画时刻，办法如下图

动画曲线在SwiftUI中的使用

办法都会自带一个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的介绍，喜爱就点个赞吧。假如有疑问，请评论区留言！

更多文章