iOS动画之显示层动画

一、简单的动画
1、闭包

F17F7C69-7EC8-4C94-9489-6C42F58ED811.png
2、commit方法形式
5D2BAEEC-791E-4268-B91E-4A4F2C243604.png
二、重要属性及方法介绍
1、transform
继承自CGAffineTransform属性，是核心动画框架与UIView之间的桥梁，借助这个属性可实现缩放、旋转、位移.
缩放动画 btn!.transform = CGAffineTransform(scaleX: 0.7, y: 1.2)
上述方法表明宽高变成原来的额0.7和1.2倍
旋转动画 btn!.transform = CGAffineTransform(rotationAngle: CGFloat(M_PI_4))
位移动画 btn!.transform = CGAffineTransform(translationX: 0, y: 40)（是相对于原来的位置移动多少）
2.动画常用属性

 open class func beginAnimations(_ animationID: String?, context: UnsafeMutableRawPointer?)
    open class func commitAnimations()
    open class func setAnimationDelegate(_ delegate: Any?)
    open class func setAnimationWillStart(_ selector: Selector?)
    open class func setAnimationDidStop(_ selector: Selector?)
    open class func setAnimationDuration(_ duration: TimeInterval)
    open class func setAnimationDelay(_ delay: TimeInterval)
    open class func setAnimationStart(_ startDate: Date)
    open class func setAnimationCurve(_ curve: UIView.AnimationCurve)
    open class func setAnimationRepeatCount(_ repeatCount: Float)
    open class func setAnimationRepeatAutoreverses(_ repeatAutoreverses: Bool)
    open class func setAnimationBeginsFromCurrentState(_ fromCurrentState: Bool)
    open class func setAnimationTransition(_ transition: UIView.AnimationTransition, for view: UIView, cache: Bool)
    open class func setAnimationsEnabled(_ enabled: Bool)
    open class var areAnimationsEnabled: Bool { get }

如 UIView.setAnimationDuration(2)设置动画执行时间
其他的属性都好懂，具体介绍下setAnimationCurve，该方法用于动画加速、减速，对应的是一个枚举值
public enum AnimationCurve : Int {
case easeInOut //表示动画在开始和结束都呈减速
case easeIn //开始时呈减速
case easeOut // 结束时呈加速
case linear //速度一直一样
}
setAnimationRepeatAutoreverses //表示是否具有返回效果

3、动画结束的额回调方法
1)设置代理方法：暂时没有找到，不知道是不是废弃了
2）自定义回调方法

override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        UIView.beginAnimations(nil, context: nil)
        UIView.setAnimationDuration(2)
         //此处实现代理
       UIView.setAnimationDelegate(self)
        //此处设置回调方法
        UIView.setAnimationDidStop(#selector(ViewController.AnimationDidStop(btn:)))
        
        btn!.transform = CGAffineTransform(scaleX: 0.7, y: 1.2)
        btn!.transform = CGAffineTransform(translationX: 100, y: 100)
        UIView.commitAnimations()
    }
    @objc func AnimationDidStop(btn:UIButton){
        print("动画结束了")
    }

三、关键帧动画

 1、关键帧动画的核心方法如下

  open class func animateKeyframes(withDuration duration: TimeInterval, delay: TimeInterval, options: UIView.KeyframeAnimationOptions = [], animations: @escaping () -> Void, completion: ((Bool) -> Void)? = ni

663146CB-7354-4D0F-A15B-62028B579759.png

2、第二个方法，添加中间帧数
open class func addKeyframe(withRelativeStartTime frameStartTime: Double, relativeDuration frameDuration: Double, animations: @escaping () -> Void)

frameStartTime ： 表示整个动画的哪个点开始
relativeDuration ： 占整个动画的时间比
animations ： 动画实现的内容
实现代码

 @objc func btnClick(){
        UIView.animateKeyframes(withDuration: 2, delay: 1, options: UIView.KeyframeAnimationOptions.calculationModeCubic, animations: {()in
            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 1/2, animations: {
                self.btn!.frame = CGRect(x: 300, y: 200, width: 60, height: 60)
            })
            UIView.addKeyframe(withRelativeStartTime: 1/2, relativeDuration: 1/2, animations: {
                            self.btn!.frame = CGRect(x: 300, y: 600, width: 80, height: 80)
            })
            
        }) { (finish) in
            
        }
    }

四、显示层逐帧动画（动画效果就是将图片一帧帧逐帧渲染）
1、利用Timer和displayLink，重复个ImageView服不同的值
2、利用view的draw方法，不停的调用setNeedDisplay,来调用draw方法进行重绘

     class MyView1: UIView {
    var blackHelloReadis:Float = 0
    func blackHelloIncrease(_ readis:Float){
        blackHelloReadis = readis
        self.setNeedsDisplay()
    }
    
    override func draw(_ rect: CGRect) {
        let ctx:CGContext = UIGraphicsGetCurrentContext()!
        ctx.addArc(center: self.center, radius:CGFloat(blackHelloReadis), startAngle: 0, endAngle: CGFloat(Double.pi*2), clockwise: false)
        ctx.fillPath()
    }
}

class MyController1: UIViewController {
    var index:CGFloat = 0.0
    var time:Timer?
    var backV:MyView1?
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = UIColor.white
        let myCv = MyView1()
        myCv.frame = self.view.bounds
        myCv.center = view.center
        myCv.backgroundColor = UIColor.cyan
        view.addSubview(myCv)
        backV = myCv
        time = Timer.scheduledTimer(timeInterval: 0.1, target:self, selector: #selector(add), userInfo: nil, repeats: true)
    }
    
    @objc func add(){
        backV?.blackHelloIncrease(Float(index))
        index  = index + 0.1
    }
}

以上时利用draw方法绘制一个逐渐变大的圆

五、gif图片的处理
核心框架---ImageIO
1、gif的分解，具体过程如下

94CC9258-A67F-4C78-9B85-D8CE94800F7C.png

将gif图分解成一张张图片的过程代码如下：

 func getGifImage() {
        //获取gif路径
        let gifPath:NSString = Bundle.main.path(forResource: "timg", ofType: "gif")! as NSString
        
        //获取二进制数据
        let gifData:Data = try! Data(contentsOf: URL(fileURLWithPath: gifPath as String))
        
        let gifDataSource:CGImageSource = CGImageSourceCreateWithData(gifData as CFData, nil)!
        
        let gifImageCount:Int = CGImageSourceGetCount(gifDataSource)
        
        for i in 0...gifImageCount-1 {
            let imageref:CGImage? = CGImageSourceCreateImageAtIndex(gifDataSource, i, nil)
            let im:UIImage = UIImage(cgImage: imageref!, scale: UIScreen.main.scale, orientation: UIImage.Orientation.up)
            let imageData:NSData = im.pngData()! as NSData
            var docs = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true)
            let doucmentDic = docs[0] as String
            let imagePath = doucmentDic + "/\(i)" + ".png"
            try?imageData.write(to:URL(fileURLWithPath: imagePath), options: .atomic)
            
        }
    }

2、gif图片的合成
未完待续...