iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 26
0
Software Development

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

LoadingAnimation - 彈跳的三個點

https://ithelp.ithome.com.tw/upload/images/20180115/20107329kRjSyMFLnS.png


LoadingAnimation - 彈跳的三個點

Dots
動畫為三個點依次落下然後回到原來的位置上。


LoadingView

單個點的上下動畫通過 UIView Animation 很容易可以做到,但如果要呈現上面的動畫效果呢?

Dot

通過 UIBezierPath(ovalIn) 來畫一個圓,用白色來填充。

fileprivate let dotLayer: CAShapeLayer = CAShapeLayer()
dotLayer.frame       = CGRect(x: lineWidth / 2.0, y: (bounds.height - lineWidth) / 2.0, width: lineWidth, height: lineWidth)
dotLayer.path        = UIBezierPath(ovalIn: dotLayer.bounds).cgPath
dotLayer.fillColor   = UIColor.white.cgColor
dotLayer.strokeColor = UIColor.white.cgColor
dotLayer.lineCap     = kCALineCapRound
dotLayer.lineJoin    = kCALineJoinRound
dotLayer.lineWidth   = lineWidth

CAReplicatorLayer

這是一個繼承於 CALayer 的容器,我們將 dotLayer 加入到 subLayer 以後,通過CATransform3DMakeTranslation 設定邊距。

fileprivate let dotReplicatorLayer: CAReplicatorLayer = CAReplicatorLayer()
dotReplicatorLayer.addSublayer(dotLayer)
dotReplicatorLayer.instanceCount     = dotCount
dotReplicatorLayer.instanceDelay     = animationDuration / Double(dotCount)
dotReplicatorLayer.instanceTransform = CATransform3DMakeTranslation(bounds.width / CGFloat(dotCount), 0, 0)
layer.addSublayer(dotReplicatorLayer)

Animation

通過 CAKeyframeAnimation 對 position.y 做動畫。

let downY = bounds.midY + 10.0

let positionAnimation         = CAKeyframeAnimation(keyPath: "position.y")
positionAnimation.duration    = animationDuration
positionAnimation.beginTime   = CACurrentMediaTime() + 0.5
positionAnimation.repeatCount = Float.infinity
positionAnimation.values      = [bounds.midY, downY, bounds.midY, bounds.midY]
positionAnimation.keyTimes    = [0.0, 0.33, 0.66, 1.0]
dotLayer.add(positionAnimation, forKey: "positionAnimation")

Reference


上一篇
Loading Animation - 模仿知乎加載畫面
下一篇
LoadingAnimation - Triangle
系列文
iOS Swift x Layout x Animation x Transition30

尚未有邦友留言

立即登入留言