快捷導(dǎo)航

IOS CoreAnimation中l(wèi)ayer動畫閃爍的解決方法

更新時(shí)間：2016年06月01日 11:40:19 作者：大熊貓侯佩

這篇文章主要為大家詳細(xì)介紹了IOS CoreAnimation中l(wèi)ayer動畫閃爍的原因，分享了layer動畫閃爍的解決方法，感興趣的小伙伴們可以參考一下

網(wǎng)上有一段Core Animation層動畫的例子,是將view中的云朵從左向右移動,直到移出屏幕,這時(shí)再將云朵移到最左端然后重復(fù)移動動畫.

所有動畫在layer上完成,不過有個(gè)小問題,就是第一次每朵云動畫完成時(shí),會在其原位置處有一個(gè)閃爍,然后才會移動到屏幕最右端,而隨后的運(yùn)動動畫都沒有這個(gè)問題了:

由于錄制gif文件時(shí)使用的幀率比較低,所以上圖較難展示這個(gè)問題.不過實(shí)際App運(yùn)行的時(shí)候每朵云在第一次移出屏幕的時(shí)候都會在初始位置閃爍一下再運(yùn)行隨后的動畫.這是為什么呢?

因?yàn)閘ayer動畫不同于view層面上的動畫,它實(shí)際不會修改原始view的任何屬性.就拿云朵移動的動畫來說,你雖然看上去改變了云朵的x坐標(biāo)使其向右移動,可實(shí)際上原來的云朵ImageView根本還在原地,只不過CA用其外觀創(chuàng)建了一個(gè)臨時(shí)繪制進(jìn)行移動,原來的云朵被暫時(shí)隱藏起來;一旦移動動畫完成,該臨時(shí)對象被刪除,原來的云朵會在初始位置出現(xiàn).

那么為什么只有動畫第一次會出現(xiàn)閃爍呢?因?yàn)樵诘谝淮蝿赢嫿Y(jié)束后,我在代碼中修改了云朵view的x坐標(biāo),所以后面云朵的x坐標(biāo)都和layer動畫的fromValue相同,這將保證后續(xù)動畫不會發(fā)生”閃爍”。

知道了原因,解決就很簡單了,我只要在第一次動畫前將云朵的x坐標(biāo)修改為指定的位置,同時(shí)調(diào)整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
 //設(shè)置云朵的最終位置
 layer.position.x = -layer.bounds.width/2

 let cloudMove = CABasicAnimation(keyPath: "position.x")
 cloudMove.fillMode = kCAFillModeForwards
 //cloudMove.removedOnCompletion = false
 cloudMove.duration = duration
 //設(shè)置云朵的初始位置
 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)
 }

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: