IOS CoreAnimation中layer動畫閃爍的解決方案_IOS

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

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援雲棲社區。