天天看點

太陽升起并下落的小動畫-SWIFT

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

太陽升起并下落的小動畫-SWIFT

用 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)

此時九角星就做好了,運作的效果如下:

太陽升起并下落的小動畫-SWIFT

接着要在九角星的中星心位置添加一個圓,做為太陽中心。添加一個計算屬性,一個钜形的内切圓路徑。

 接着在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)

此時運作效果如下:

太陽升起并下落的小動畫-SWIFT

最後就是讓sunView按着指定的路徑運作就可以了。回到ViewController檔案内,添加以下計算路徑屬性,畫出一條弧形路徑,然後讓太陽按着這個路徑移動。

 添加以下動畫代碼

 這樣就完成了。以上僅供參考,還請大家多提意見。

繼續閱讀