iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 25
1
Software Development

iOS Swift x Layout x Animation x Transition系列 第 25

Loading Animation - 模仿知乎加載畫面

https://ithelp.ithome.com.tw/upload/images/20180114/201073291Fd5WiYNLf.png
繼續通過練習來提高做動畫的能力。


Loading Animation - 模仿知乎 Loading 畫面

LoadingView
在 iOS 版的「知乎」應用裡面,讀取畫面的時候會跳出類似上面的載入動畫。
線條在圓形的邊上繞圈,每次的出發點都不一樣,並且線條在拉伸出去以後接著就跟著回收線條的動畫。

LoadingView

動畫的三個點,線條拉伸、線條回收、每次的出發點不同。

建立 LoadingView 放上 cycleLayer 設定填充色、筆頭、線條等。

fileprivate let cycleLayer: CAShapeLayer = CAShapeLayer()
fileprivate func setupView() {

    cycleLayer.lineWidth = 4
    cycleLayer.fillColor = UIColor.clear.cgColor
    cycleLayer.strokeColor = UIColor.white.cgColor
    
    cycleLayer.lineCap = kCALineCapRound
    cycleLayer.lineJoin = kCALineJoinRound
    
    cycleLayer.frame = bounds
    cycleLayer.path = UIBezierPath(ovalIn: bounds).cgPath
    layer.addSublayer(cycleLayer)
}

線條回收

LoadingAnimation

let strokeStartAnimation = CABasicAnimation(keyPath: "strokeStart")
strokeStartAnimation.fromValue = -1
strokeStartAnimation.toValue = 1.0
strokeStartAnimation.repeatCount = Float.infinity
cycleLayer.add(strokeStartAnimation, forKey: "strokeStartAnimation")

線條拉伸

LoadingAnimation

let strokeEndAnimation = CABasicAnimation(keyPath: "strokeEnd")
strokeEndAnimation.fromValue = 0
strokeEndAnimation.toValue = 1.0
strokeEndAnimation.repeatCount = Float.infinity
cycleLayer.add(strokeEndAnimation, forKey: "strokeStartAnimation")

線條回收 + 線條拉伸

LoadingAnimation
通過 CAAnimationGroup 我們可以把上面兩個動畫結合起來。

let animationGroup = CAAnimationGroup()
animationGroup.repeatCount = Float.infinity
animationGroup.animations = [strokeStartAnimation, strokeEndAnimation]
animationGroup.duration = 3.0
cycleLayer.add(animationGroup, forKey: "animationGroup")

線條回收 + 線條拉伸 + 繞圈

LoadingAnimation
每一次開始做動畫的位置不同,可以通過將整個圓圈進行旋轉來讓視覺上看起來每次線條的出發點不同。

let rotateAnimation = CABasicAnimation(keyPath: "transform.rotation")
rotateAnimation.fromValue = 0
rotateAnimation.toValue = Double.pi * 2
rotateAnimation.repeatCount = Float.infinity
rotateAnimation.duration = 3.0 * 4
cycleLayer.add(rotateAnimation, forKey: "rotateAnimation")

Reference


上一篇
StartPageMovie - 啟動頁影片
下一篇
LoadingAnimation - 彈跳的三個點
系列文
iOS Swift x Layout x Animation x Transition30

1 則留言

0
陳董粉絲
iT邦新手 5 級 ‧ 2018-01-15 09:51:40

太神了吧 利用 -1~1 製造時間差 還有這種操作的

忠實粉絲!

我要留言

立即登入留言