浅谈swift动画（一）

动画效果

Untitled.gif

在viewDidLoad创建初始化位置，在viewwillAppear中执行，可以使动画效果更流畅

class ViewController: UIViewController {

    var loginButton:UIButton?
    override func viewDidLoad() {
        super.viewDidLoad()

        loginButton = UIButton(frame: CGRect(x:-394,y:230, width:self.view.frame.width-20*2,height:50))
        loginButton!.backgroundColor = UIColor(red: 50/255.0, green: 185/255.0, blue: 170/255.0, alpha: 1.0)
        loginButton!.setTitle("登陆", for: UIControlState.normal)
        self.view.addSubview(loginButton!)
    }
     
    override func viewWillAppear(_ animated: Bool) {
        //方式1：
        UIView.animate(withDuration: 1, animations: {
            self.loginButton!.frame = CGRect(x:20,y:self.loginButton!.frame.origin.y,width:self.loginButton!.frame.width,height:self.loginButton!.frame.height)
        })
        
        //方式2：
//        UIView.beginAnimations(nil, context: nil)//动画开始
//        UIView.setAnimationDuration(1)//动画周期设置
//        loginButton!.frame = CGRect(x:20,y:loginButton!.frame.origin.y,width:loginButton!.frame.width,height:loginButton!.frame.height)//动画位置设置
//        UIView.commitAnimations()//动画提交
    }
}

动画的回调函数

import UIKit

class ViewController: UIViewController {
    var loginButton:UIButton?
    var index:Int = 1;
    override func viewDidLoad() {
        super.viewDidLoad()
        loginButton = UIButton(frame: CGRect(x: 20, y: 230, width: self.view.frame.width-20*2,height: 50))
        loginButton!.backgroundColor = UIColor(red: 50/255.0, green: 185/255.0, blue: 170/255.0, alpha: 1.0)
        loginButton!.setTitle("登陆", for: UIControlState())
        loginButton!.addTarget(self, action: #selector(ViewController.loginAction), for: UIControlEvents.touchUpInside)
        self.view.addSubview(loginButton!)
    }
    override func viewWillAppear(_ animated: Bool) {
        //      CGAffineTransform:缩放
        UIView.beginAnimations(nil, context: nil)//动画开始
        UIView.setAnimationDelegate(self)//设置回调对象
        UIView.setAnimationDuration(0.3)//动画周期设置
        UIView.setAnimationDelay(2)
        //easeInOut:开始和结束都呈现减速效果
        //easeIn: 开始减速
        //easeOut：结束减速
        //linear：匀速
        UIView.setAnimationCurve(.easeInOut)
        //动画是否有折返效果，不在结束后设置想要的效果，动画很难看
        UIView.setAnimationRepeatAutoreverses(true)
        UIView.setAnimationRepeatCount(3)
        loginButton!.transform = CGAffineTransform(scaleX: 0.7, y: 1.2)
        //不设置代理不会调用下面两个函数
        UIView.setAnimationWillStart(#selector(ViewController.AnimationBegin))
        UIView.setAnimationDidStop(#selector(ViewController.animationEnd))
        UIView.commitAnimations()//动画提交
}
    func AnimationBegin(){
        print("AnimationBegin!")
    }
    func animationEnd(){
        print("AnimationEnd!")
        loginButton!.transform = CGAffineTransform(scaleX: 1, y: 1)
    }
    func loginAction() {
        UIView.beginAnimations(nil, context: nil)//动画开始
        UIView.setAnimationDuration(2)//动画周期设置
        let angle:CGFloat = CGFloat(Float.pi);
        loginButton!.transform = CGAffineTransform(rotationAngle: angle)
        loginButton!.frame = CGRect(x: 400,y: 0,width: loginButton!.frame.width*0.1,height: loginButton!.frame.height*0.1)
        loginButton!.alpha = 0;
        UIView.commitAnimations()//动画提交
    }
}

关键帧动画

不添加关键帧实现简单的路径动画：

1.png

2.png

3.png


class ViewController: UIViewController {

    var imageViewAirport:UIImageView?
    var imageViewPlane:UIImageView?
    override func viewDidLoad() {
        super.viewDidLoad()
        imageViewAirport = UIImageView()
        imageViewAirport?.frame = UIScreen.main.bounds
        imageViewAirport?.image = UIImage(named: "Airport.png")
        imageViewAirport?.contentMode = UIViewContentMode.scaleAspectFit
        self.view.addSubview(imageViewAirport!)
        
        imageViewPlane = UIImageView()
        imageViewPlane?.frame = CGRect(x: 100, y: 100, width: 50, height: 50)
        imageViewPlane?.image = UIImage(named: "Plane.png")
        imageViewPlane?.contentMode = UIViewContentMode.scaleAspectFit
        imageViewAirport!.addSubview(imageViewPlane!)

    }
    override func viewWillAppear(_ animated: Bool) {
        UIView.animateKeyframes(withDuration: 2, delay: 1, options: .calculationModeCubic, animations: {
             self.imageViewPlane?.frame = CGRect(x: 300, y: 300, width: 50, height: 50)
        }) { (finished) in
            
        }
    }
}

image.png

使用关键帧实现复杂路径的动画

1.png

2.png

3.png

    override func viewWillAppear(_ animated: Bool) {
        UIView.animateKeyframes(withDuration: 3, delay: 2, options: .calculationModeCubic, animations: {
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1/2, animations: {
                self.imageViewPlane?.frame = CGRect(x: 300, y: 100, width: 30, height: 30)
            })
            UIView.addKeyframe(withRelativeStartTime: 1/2, relativeDuration: 1/2, animations: {
                self.imageViewPlane?.frame = CGRect(x: 300, y: 300, width: 100, height: 100)
            })
        }) { (_) in
             print("done")
        }
    }

注意：此处动画共持续3秒，withRelativeStartTime为开始时间，relativeDuration表示关键帧相对持续时间，这个持续时间是指1/2 * 3秒，1/2代表的是比例，而不是秒数。