快捷導(dǎo)航

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

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

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

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

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

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

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

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

知道了原因,解決就很簡單了,我只要在第一次動(dòng)畫前將云朵的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
 //提前存儲(chǔ)云朵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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: