網上有一段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)
 }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。