如何沿圆形路径为 UIView 设置动画？

Question

在 Swift 代码中，如何启动 UIView 并设置动画，使其沿圆形路径移动，然后优雅地结束？是否可以使用 CGAffineTransform 动画实现此目的？

我在下面准备了一张 GIF，展示了我想要实现的动画类型。

Answer 1

更新：将代码更新为 Swift 4. 使用 #keyPath 而不是 keyPath.

的字符串文字

使用UIBezierPath和CAKeyFrameAnimation。

代码如下：

let circlePath = UIBezierPath(arcCenter: view.center, radius: 20, startAngle: 0, endAngle: .pi*2, clockwise: true)

let animation = CAKeyframeAnimation(keyPath: #keyPath(CALayer.position))
animation.duration = 1
animation.repeatCount = MAXFLOAT
animation.path = circlePath.cgPath

let squareView = UIView()
// whatever the value of origin for squareView will not affect the animation
squareView.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
squareView.backgroundColor = .lightGray
view.addSubview(squareView)
// You can also pass any unique string value for key
squareView.layer.add(animation, forKey: nil)

// circleLayer is only used to locate the circle animation path
let circleLayer = CAShapeLayer()
circleLayer.path = circlePath.cgPath
circleLayer.strokeColor = UIColor.black.cgColor
circleLayer.fillColor = UIColor.clear.cgColor
view.layer.addSublayer(circleLayer)

这是捕获：

此外，您可以设置 squareView.layer 的 anchorPoint 属性以使视图不动画锚定在其中心。 anchorPoint的默认值为(0.5, 0.5)，表示中心点。

如何沿圆形路径为 UIView 设置动画？

How do I animate a UIView along a circular path?

animation

uiview

cgaffinetransform

ios

swift