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图片的合成
未完待续...

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,830评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,992评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,875评论 0 331
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,837评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,734评论 5 360
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,091评论 1 277
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,550评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,217评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,368评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,298评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,350评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,027评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,623评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,706评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,940评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,349评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,936评论 2 341

推荐阅读更多精彩内容