缓冲动画

作者: 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