动画(一)

详细分析frame、bounds、center、position、anchorPoint
iOS开发系列--让你的应用“动”起来
老司机带你走进Core Animation 之CAAnimation
iOS CoreAnimation 隐式动画

class ViewController: UIViewController {
    var cv: CusView!
    var bgLayer: CALayer!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        let btn = UIButton(frame: CGRect(x: 50, y: 100, width: 200, height: 50 ))
        cv = CusView(frame: CGRect(x: 50  , y: btn.frame.maxY+20, width: 200, height: 200))
        cv.backgroundColor = .green
        self.view.addSubview(cv)
        bgLayer = CALayer()
        bgLayer.frame = cv.bounds
        cv.layer.addSublayer(bgLayer)
        
        
        btn.setTitle("changeColor", for: .normal)
        btn.backgroundColor = UIColor.gray
       
        view.addSubview(btn)
        btn.addTarget(self, action: #selector(clicked), for: .touchUpInside)

    }

    @objc func clicked(sender: UIButton) {

       case3()
    }
    func case1() {
        //CATransaction 只对layer生效,view无效
        CATransaction.begin()
        //        CATransaction.setDisableActions(true)
        CATransaction.setAnimationDuration(10)
        cv.layer.backgroundColor = UIColor.red.cgColor
        
        CATransaction.commit()
        CATransaction.setCompletionBlock {
            DispatchQueue.main.asyncAfter(deadline: DispatchTime.now()+3) {
                self.cv.layer.backgroundColor = UIColor.green.cgColor
            }
        }
    }
    func case2() {
        //CATransaction 只对layer生效,view无效
        CATransaction.begin()
        //        CATransaction.setDisableActions(true)
        CATransaction.setAnimationDuration(10)
        bgLayer.backgroundColor = UIColor.red.cgColor
        
        CATransaction.commit()
        CATransaction.setCompletionBlock {
            DispatchQueue.main.asyncAfter(deadline: DispatchTime.now()+3) {
                self.bgLayer.backgroundColor = UIColor.green.cgColor
            }
        }
    }
    func case3() {
        let ani = CABasicAnimation(keyPath: "backgroundColor")
        ani.duration = 3
        ani.toValue = UIColor.red.cgColor
        ani.timeOffset = 3
        ani.isRemovedOnCompletion = false
        ani.fillMode = CAMediaTimingFillMode.forwards
        cv.layer.add(ani, forKey: "colorAnimate")
      
    }
}

class CusView: UIView,CAAction {
    func run(forKey event: String, object anObject: Any, arguments dict: [AnyHashable : Any]?) {
        print("event:\(event)  object:\(anObject)  dict:\(dict)")

        let temp: CALayer? = anObject as? CALayer
        guard let layer = temp else { return }
        if event == "position" && layer.position == CGPoint(x: 150,y: 270) {
            let ca = CABasicAnimation(keyPath: "position")
            ca.duration = 3
            ca.toValue = CGPoint(x: self.superview?.bounds.width ?? 0/2, y: self.superview?.bounds.height ?? 0/2)
            ca.fillMode = CAMediaTimingFillMode.forwards
            ca.isRemovedOnCompletion = false
            self.layer.add(ca, forKey: "move")
        }
    }
    

    /*
    // Only override draw() if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func draw(_ rect: CGRect) {
        // Drawing code
    }
    */
    override func action(for layer: CALayer, forKey event: String) -> CAAction? {
        let action = super.action(for: layer, forKey: event)
//        print("key:\(event)")
        
        return action
    }

}

case1通过CATransaction 显示调用提交动画并没有生效(把v.layer.backgroundColor换成cv.backgroundColor)和case2却生效了,why???
通过customview override func action(for layer: CALayer, forKey event: String) -> CAAction? 断点,可以发现无论是修改view本身还是view持有的layer 都会走这个方法,并且返回了一个action为nil,so,并不会产生动画特效,UIview本身禁用了隐式动画的原因也是这个。UIView动画可以通过open class func animate(withDuration duration: TimeInterval, animations: @escaping () -> Void, completion: ((Bool) -> Void)? = nil)类似系统api去实现。也可以在这个接口的动画block里面和外面调用 action(for layer:CALayer ,forKey:String)看看得到的CAAction是否为nil。
而case2 是一个自定义的layer添加到view的layer上,这个自定义layer并没有把自己的CALayerDelegate交给任何对象,so,这个layer执行可以动画的属性时候不会走override func action(for layer: CALayer, forKey event: String) -> CAAction? 这个代理方法,而是去CALayer的Actions或者style字典搜索,然后去调用open class func defaultAction(forKey event: String) -> CAAction?,上面是一层层递进的如果返回结果为NSNull或者nil就会到下一步,如果最后一步仍返回nil,则无动画效果。
前面两个case,虽然我们通过代码去介入了,但具体动画怎么执行的还是有系统完成的,这种动画叫隐式动画,而case3是通过代码的方式添加具体动画行为,这种方式叫显示动画

150628403626215.png

如图中CAAnimation通过其子类添加动画的方式都是显示动画,这个图还差了一个CAAction协议,具体百度吧
前面提到了UIView是禁止隐式动画的,但是某些系统接口本身就带有动画特效,比如UITableView 的 reloadDate或者open func reloadRows(at indexPaths: [IndexPath], with animation: UITableView.RowAnimation),如果想取消动画效果怎么办?可通过另外一个接口解决问题UIView.performWithoutAnimation { }
另外在CusView中遵循了CAAction代理并实现了其代理方法,这个是为了测试给UIView被禁用的隐式动画属性添加动画行为,也就是实现CAAction去添加动画,再把这个CAAction实例交给CALayerDelegate 的这个接口*/
override func action(for layer: CALayer, forKey event: String) -> CAAction?具体我怎么搞,我也没搞好,哈哈,一般不用搞这么麻烦,直接操作layer就行了,这里只是为了了解这个动画执行的过程
再补充一点:CATransaction这个提交动画的事务会在runloop中自动创建,在runloop即将休眠前(kCFRunLoopBeforeWaiting)调用,是通过栈的形式管理。所以也会导致代码或者说属性已经改变了,但动画还没有执行这种时间差。

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

推荐阅读更多精彩内容