Gradient Animation – 漸層動畫

通過 CAGradientLayer 可以很容易實現漸變色效果,而且這個漸變色的效果可以拿來做動畫。


Gradient Animation

一開始的背景圖就是用了漸變效果,而當點下按鈕以後,配合 CABasicAnimation 做漸變色切換的動畫。


CAGradientLayer

給 CAGradientLayer 設定參數,startPoint / endPoint 決定了漸變的方向,左上角座標為 {0,0} 右下角座標為 {1,1},色彩組 colors


CABasicAnimation

先建立色彩組,用來切換色彩。

動畫 keyPath 設定 colors 就可以做色彩改變的動畫,toValue 為下一組色彩。

動畫播完的時候自增長 currentGradient 來改變下一個要使用的色彩組


Reference

  • 在 Github 上可以看到本文相關的 Source Code

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料