iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 29
0

https://ithelp.ithome.com.tw/upload/images/20180117/20107329Ieis3FfS2T.png


LoadingAnimation Walk

Walk
最左邊的點從上方拋擲最右邊,然後整體向左移動,循環動畫。


Loading View

將點平均分布在一個水平面上。

for i in 0 ..< dotCount {
    let dotLayer = CAShapeLayer()
    dotLayer.bounds = CGRect(x: 0, y: 0, width: lineWidth, height: lineWidth)
    dotLayer.path = UIBezierPath(ovalIn: dotLayer.bounds).cgPath
    dotLayer.position = CGPoint(x: CGFloat(i) * bounds.width / CGFloat(dotCount - 1), y: bounds.height / 2.0)
    dotLayer.fillColor = UIColor.white.cgColor
    dotLayer.strokeColor = UIColor.white.cgColor
    
    layer.addSublayer(dotLayer)
    dotGroup.append(dotLayer)
}

動畫分析

Walk1 Walk2

最左側的點負責做從上方拋擲最右邊的動畫,其他的點負責向左平移的動畫,所有的點同時並重複做動畫。
視覺上看起來水平面上有個傳送帶在移動這些點,每次輪到最左邊以後就拋到最右邊。

// Animation - move dot1 to right
let dotLayer1 = dotGroup[0]
let pathAnimation = CAKeyframeAnimation(keyPath: "position")
pathAnimation.path = UIBezierPath(arcCenter: CGPoint(x: bounds.width / 2.0, y: bounds.height / 2.0), radius: bounds.width / 2.0, startAngle: CGFloat(Double.pi), endAngle: 0, clockwise: true).cgPath
pathAnimation.calculationMode = kCAAnimationPaced
pathAnimation.duration        = animationDuration
pathAnimation.repeatCount     = Float.infinity
dotLayer1.add(pathAnimation, forKey: "pathAnimation")

// Animation - move other dots to left
for i in 1 ..< dotCount {
    let dotLayer = dotGroup[i]
    let positionAnimation = CABasicAnimation(keyPath: "position.x")
    positionAnimation.toValue     = dotLayer.position.x - bounds.width / CGFloat(dotCount - 1)
    positionAnimation.duration    = animationDuration
    positionAnimation.repeatCount = Float.infinity
    dotLayer.add(positionAnimation, forKey: "positionAnimation")
}

Reference


上一篇
LoadingAnimation - Switch
下一篇
iOS Swift x Layout x Animation x Transition (Finished)
系列文
iOS Swift x Layout x Animation x Transition30

尚未有邦友留言

立即登入留言