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弹窗的一些样式问题

layer算现在比较火的前端框架了。由于本人审美太差,所以做前台基本都是凑(can)合(bu)凑(ren)合(du),于是就有了这篇博。昨天在改一个页面的弹窗样式的时候搞得我不要不要的,页面上有一个用...
  • ZTZY520
  • ZTZY520
  • 2017年01月12日 10:30
  • 4749

layer.js的弹出层点击确认跳转页面

代码如下: layer.open({ content: '感谢您参与本次活动!', btn: ['确认...

layer弹出层显示在top顶层

因为项目框架用了iframe,所以在用layer时,默认layer.open弹出的窗口只能在iframe子窗口区域显示。现在想让layer在父窗口或者说框架的最顶层显示,想到用top.layer.op...

JQuery animate 动画效果出现抖动的解决办法

起因:在做购物车按钮弹出动画效果时,出现了动画闪烁的问题,后来发现是animate重复执行了。 解决办法:在animate方法前面加入stop()清空 防止重复执行。 例子: $(" btn1")...
  • yglt77
  • yglt77
  • 2016年05月28日 11:26
  • 3467

keytool+tomcat配置HTTPS双向证书认证

在用到有关服务端与客户端双向证书认证访问的时候可能会遇到各种各样的问题。本文参照了网上的一些资料,并根据自己的实际配置情况总结如下...

nodemcu 读写实时时钟DS1307 用lua

用nodemcu的i2c模块,读写I2C设备中某个具体字节的内容
  • silno
  • silno
  • 2017年06月08日 21:18
  • 801

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中layer动画闪烁的原因及解决
举报原因:
原因补充:

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