一個小小的動畫,太陽公公上山又下山。先上效果圖。

用 lipecap 錄的gif效果有點卡頓。好吧,說下如何實作的。
首先在一個大圓内先計算出内切九邊形各個頂點的位置,接着連接配接相應的頂點變成一個九角星太陽的九條光芒,然後在九角星的中心畫一個圈形的Layer,這樣就大緻畫好了大陽的形狀。
建立一個叫SunView的檔案繼承自UIView,然後在init方法内添加一個addSunLayer()的方法。并在裡面添加以下方内容
class SunView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
addSunLayer()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
在addSunLayer()方法内添加繪制九角星的代碼:
self.layer.addSublayer(ninePolyganLayer)
在ViewContoller檔案内添加以下代碼:
let sunView = SunView(frame: CGRect(x: 100, y: 100, width: 100, height: 100))
self.view.addSubview(sunView)
此時九角星就做好了,運作的效果如下:
接着要在九角星的中星心位置添加一個圓,做為太陽中心。添加一個計算屬性,一個钜形的内切圓路徑。
接着在addSunLayer方法内添加以下内容:
let animation:CABasicAnimation = CABasicAnimation(keyPath: "transform.rotation")
animation.fromValue = 0.0
animation.toValue = 2 * M_PI
animation.duration = 5
animation.repeatCount = HUGE
layer.addAnimation(animation, forKey: nil)
并将上面ninePolyganLayer添加到圖層的代碼做如下修改。
self.layer.insertSublayer(ninePolyganLayer, below: sunLayer)
//self.layer.addSublayer(ninePolyganLayer)
此時運作效果如下:
最後就是讓sunView按着指定的路徑運作就可以了。回到ViewController檔案内,添加以下計算路徑屬性,畫出一條弧形路徑,然後讓太陽按着這個路徑移動。
添加以下動畫代碼
這樣就完成了。以上僅供參考,還請大家多提意見。