CoreAnimation中layer动画闪烁的原因及解决

原创 2016年06月01日 10:21:17

大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处.
如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;)


网上有一段Core Animation层动画的例子,是将view中的云朵从左向右移动,直到移出屏幕,这时再将云朵移到最左端然后重复移动动画.

所有动画在layer上完成,不过有个小问题,就是第一次每朵云动画完成时,会在其原位置处有一个闪烁,然后才会移动到屏幕最右端,而随后的运动动画都没有这个问题了:

这里写图片描述

由于录制gif文件时使用的帧率比较低,所以上图较难展示这个问题.不过实际App运行的时候每朵云在第一次移出屏幕的时候都会在初始位置闪烁一下再运行随后的动画.这是为什么呢?

因为layer动画不同于view层面上的动画,它实际不会修改原始view的任何属性.就拿云朵移动的动画来说,你虽然看上去改变了云朵的x坐标使其向右移动,可实际上原来的云朵ImageView根本还在原地,只不过CA用其外观创建了一个临时绘制进行移动,原来的云朵被暂时隐藏起来;一旦移动动画完成,该临时对象被删除,原来的云朵会在初始位置出现.

那么为什么只有动画第一次会出现闪烁呢?因为在第一次动画结束后,我在代码中修改了云朵view的x坐标,所以后面云朵的x坐标都和layer动画的fromValue相同,这将保证后续动画不会发生”闪烁”

知道了原因,解决就很简单了,我只要在第一次动画前将云朵的x坐标修改为指定的位置,同时调整fromValue的值为初始位置即可:

func animateCloud(layer:CALayer){
        let cloudSpeed = 15.0/Double(view.layer.frame.size.width)
        let duration:NSTimeInterval = Double(view.layer.frame.size.width - layer.frame.origin.x) * cloudSpeed
        //提前存储云朵layer的初始位置        
        let fromValue = layer.position
        //设置云朵的最终位置
        layer.position.x = -layer.bounds.width/2

        let cloudMove = CABasicAnimation(keyPath: "position.x")
        cloudMove.fillMode = kCAFillModeForwards
        //cloudMove.removedOnCompletion = false
        cloudMove.duration = duration
        //设置云朵的初始位置
        cloudMove.fromValue = fromValue.x
        cloudMove.toValue = self.view.bounds.size.width + layer.bounds.width/2
        cloudMove.delegate = self
        cloudMove.setValue("cloud", forKey: "name")
        cloudMove.setValue(layer, forKey: "layer")
        layer.addAnimation(cloudMove, forKey: nil)
    }
版权声明:大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处.谢谢! hopy ;)

相关文章推荐

Layer动画的停止和恢复

-(void)pauseLayer:(CALayer*)layer {     CFTimeInterval pausedTime = [layer convertTime:CACurrentM...

iOS CoreAnimation专题——技巧篇(二)CAShapeLayer with Bezier Path - Layer世界的神奇画笔

CALayer是CoreAnimation框架中的核心类,动画是基于绘图的,连图都绘不了还动个毛的画!而CALayer就是来解决绘图问题的。

iOS CoreAnimation (六) layer属性:阴影相关,边框、圆角,masksToBounds

嗯,圆和椭圆还不错,但如果是带圆角的矩形呢?我们现在能做到那样了么? -------Steve Jobs

iOS CoreAnimation专题——技巧篇(三)Layer Masking - 图层蒙版

如果你使用过Photoshop,你一定听说过蒙版的概念。 而在CoreAnimation中,框架同样为我们提供了这样的功能,CALayer拥有一个属性叫做mask,作为这个CALayer对象的蒙版,m...

iOS-CoreAnimation动画集

  • 2016-10-13 17:03
  • 13.24MB
  • 下载

CoreAnimation动画集

  • 2016-10-12 09:59
  • 13.23MB
  • 下载

iOS核心动画之CoreAnimation

本文目录 一、Core Animation简介二、Core Animation的使用步骤三、CAAnimation四、CAPropertyAnimation 回到顶部 ...

iOS学习笔记09-核心动画CoreAnimation

一、CALayerCALayer包含在QuartzCore框架中,具有跨平台性,在iOS中使用Core Animation开发动画的本质是 将CALayer内容转化为位图从而供硬件操作 。常用属性: ...

CoreAnimation 核心动画 简称CA

-、动画块fram bounds center alpha Transition 过渡 transform我们之前使用过的UIView动画 其实本质上也是 CoreAnimation实现的 只...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)