Swift之动画总结

Posted 2020-08-30 brave-sailor

UIView动画个人笔记，代码简单，不过多赘述。
1.定义三个View

@IBOutlet weak var mFirstView: UIView!
@IBOutlet weak var mSecondView: UIView!

//var mOriginFrame: CGRect! //记录view的初始位置
var mFirstSubView: UIView!

2.初始化相关信息

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    self.mOriginFrame = self.mFirstView.frame

    self.mFirstSubView = UIView(frame: CGRect(x: 5, y: 5, width: 50, height: 50))
    self.mFirstSubView.backgroundColor = UIColor.blackColor()
    self.mFirstView.addSubview(self.mFirstSubView)
}

3.实现相关动画

//简单Y轴平移动画
func basicAnimate() {
    UIView.animateWithDuration(1) { () -> Void in
        self.mFirstView.frame.origin.y += 100
    }
}

//可配置option信息动画
func optionAnimate() {
    UIView.animateWithDuration(3, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
        self.mFirstView.frame.origin.x += 100

        //Nest重写父层option属性
        UIView.animateWithDuration(3, delay: 0, options: [UIViewAnimationOptions.OverrideInheritedOptions, UIViewAnimationOptions.OverrideInheritedCurve, UIViewAnimationOptions.CurveEaseOut], animations: { () -> Void in
            self.mSecondView.frame.origin.x += 100
            }, completion: { (finished:Bool) -> Void in

        })
        }) { (finished: Bool) -> Void in

    }
}

//试图动画操作子视图
func operateSubview() {
    UIView.transitionWithView(self.mFirstView, duration: 1, options: [UIViewAnimationOptions.TransitionCrossDissolve, UIViewAnimationOptions.AllowAnimatedContent], animations: { () -> Void in
        self.mFirstSubView.frame.origin.x += 150
        }) { (finished: Bool) -> Void in

    }
}

//替换视图动画
func replaceView() {
    let view = UIView(frame: CGRect(x: 21, y: 150, width: 240, height: 60))
    view.backgroundColor = UIColor.magentaColor()
    UIView.transitionFromView(self.mFirstView, toView: view, duration: 1, options: UIViewAnimationOptions.TransitionCurlUp) { (finished:Bool) -> Void in
    }
}

//----------------------核心动画----------------------
/**
 *显式动画
 */
func newBasicAnimate() {
    //创建一个imageview视图
    let imgView = UIImageView(image: UIImage(named: "img"))
    imgView.frame = CGRect(x: 150, y: 200, width: 100, height: 100)
    self.view.addSubview(imgView)

    //1.选定角色
    let layer = imgView.layer
    layer.cornerRadius = 5.0

    //2.写剧本
    let scaleAnimate = CABasicAnimation(keyPath: "transform.scale")
    scaleAnimate.fromValue = 1.0
    scaleAnimate.toValue = 1.5
    scaleAnimate.autoreverses = true
    scaleAnimate.repeatCount = MAXFLOAT
    scaleAnimate.duration = 1.0

    //第二个剧本
    let opaqueAnimate = CABasicAnimation(keyPath: "opacity")
    opaqueAnimate.fromValue = 0.1
    opaqueAnimate.toValue = 1
    opaqueAnimate.autoreverses = true
    opaqueAnimate.repeatCount = MAXFLOAT
    opaqueAnimate.duration = 1.0

    //把剧本交给演员开始动画
    layer.addAnimation(scaleAnimate, forKey: "scaleAnimate")
    layer.addAnimation(opaqueAnimate, forKey: "opacityAnimate")
}

/**
*关键帧动画
*/
func newKeyFrameAniamte() {
    //创建一个imageview视图
    let imgView = UIImageView(image: UIImage(named: "img"))
    imgView.frame = CGRect(x: 200, y: 200, width: 40, height: 40)
    self.view.addSubview(imgView)

    //1.选定角色
    let layer = imgView.layer
    layer.cornerRadius = 5.0

    //2.写剧本
    let keyAnimate = CAKeyframeAnimation(keyPath: "position")
    //3.设定关键帧
    let value0 = NSValue(CGPoint: layer.position)
    let value1 = NSValue(CGPoint: CGPointMake(layer.position.x, layer.position.y + 200))
    let value2 = NSValue(CGPoint: CGPointMake(layer.position.x - 150, layer.position.y + 200))
    let value3 = NSValue(CGPoint: CGPointMake(layer.position.x - 150, layer.position.y))
    let value4 = NSValue(CGPoint: layer.position)
    //速度曲线
    //let tf0 = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseInEaseOut)
    //let tf1 = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear)
    //let tf2 = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
    //let tf3 = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
    //keyAnimate.timingFunctions = [tf0, tf1, tf2, tf3]
    //每段执行的时间
    //keyAnimate.keyTimes = [0.0, 0.5, 0.6, 0.7, 1]

    keyAnimate.values = [value0, value1, value2, value3, value4]
    keyAnimate.autoreverses = false
    keyAnimate.repeatCount = MAXFLOAT
    keyAnimate.duration = 6.0

    layer.addAnimation(keyAnimate, forKey: "keyAnimate")
}

附：CABasicAnimation的KeyPath
透明度为：opacity
其余如下：