缓冲动画

作者: o戳戳 | 来源:发表于2017-06-05 12:58 被阅读72次

10.1 动画速度

CAAnimation 的 timingFunction 属性是 CAMediaTimingFunction 类的一个对象,可以通过 CATransaction 的 setAnimationTimingFunction 方法进行改变。

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    CATransaction.begin()
    CATransaction.setAnimationDuration(1)
    CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut))
    self.colorLayer.position = (touches.first?.location(in: self.view))!
    CATransaction.commit()
}

CAMediaTimingFunction 的构造方法参数

// 立即加速并且保持匀速到达终点(默认)
kCAMediaTimingFunctionLinear 
// 慢慢加速然后突然停止
kCAMediaTimingFunctionEaseIn 
// 全速开始,然后慢慢减速停止
kCAMediaTimingFunctionEaseOut 
// 慢慢加速然后再慢慢减速
kCAMediaTimingFunctionEaseInEaseOut
// 和 kCAMediaTimingFunctionEaseInEaseOut 很类似,加速和减速的过程都稍微有些慢
kCAMediaTimingFunctionDefault

UIKit 动画缓冲

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {        
    UIView.animate(withDuration: 1, delay: 0, options: .curveEaseInOut, animations: {
        self.colorView.center = (touches.first?.location(in: self.view))!
    })
}

缓冲和关键帧动画

CAKeyframeAnimation 有一个数组类型的 timingFunctions 属性,可以对每次动画的步骤指定不同的缓冲。但数组的个数一定要等于 keyframes 数组的元素个数减一,因为它是描述每一帧之间动画。

let animation = CAKeyframeAnimation()
animation.keyPath = "backgroundColor"
animation.duration = 4
animation.values = [UIColor.blue.cgColor, UIColor.brown.cgColor, UIColor.cyan.cgColor]
let fn = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
animation.timingFunctions = [fn, fn]
self.colorLayer.add(animation, forKey: nil)

自定义缓冲函数

CAMediaTimingFunction 有另一个构造函数,可以创建一个自定义的缓冲函数。通过三次贝塞尔曲线的四个点定义,曲线的斜率代表来速度,斜率的改变代表了加速度。

CAMediaTimingFunction(controlPoints: 1, 0, 0.75, 1)

相关文章

网友评论

    本文标题:缓冲动画

    本文链接:https://www.haomeiwen.com/subject/egyifxtx.html