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

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

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

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

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

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

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

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

知道了原因,解決就很簡單了,我只要在第一次動畫前將云朵的x坐標修改為指定的位置,同時調(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: