沿着图层的特定路径快速制作动画

Posted 2023-03-13

【中文标题】沿着图层的特定路径快速制作动画

【英文标题】：animate along certain path of a layer in swift

【发布时间】：2015-08-29 03:59:48

【问题描述】：

我是 ios 的新手，我遇到了一个关于 CAKeyframeAnimation 的小问题，我想将一个视图动画到另一个视图层的某个路径。它已经成功制作动画。但是，动画的位置不是我所期望的。

正如您在我的代码中看到的那样。我创建了一个带有圆形边界的 UIView(myView)。我想要另一个视图（正方形）跟随 myView 边界的轨道。我已经将 myView 的中心设置在屏幕中间。然后我尝试获取 myView 的 CGPath 并将其设置为 CAKeyframeAnimation 的路径。但是，正方形在其他地方旋转，而不是在 myView 的边界上。谁能帮助我？谢谢

override func viewDidAppear(animated: Bool) 
    super.viewDidAppear(animated)    
    let square = UIView()
    square.frame = CGRect(x: 0, y: 0, width: 20, height: 20)
    square.backgroundColor = UIColor.redColor()
    self.view.addSubview(square)
    let bounds = CGRect(x: 0, y: 0, width: 200, height: 200)
    let myView = UIView(frame: bounds)
    myView.center = self.view.center
    myView.layer.cornerRadius = bounds.width/2
    myView.layer.borderWidth = 10
    myView.layer.borderColor = UIColor.brownColor().CGColor
    self.view.addSubview(myView)       
    var orbit = CAKeyframeAnimation(keyPath: "position")
    orbit.path = CGPathCreateWithEllipseInRect(myView.layer.bounds, nil)
    orbit.rotationMode = kCAAnimationRotateAuto
    orbit.repeatCount = Float.infinity
    orbit.duration = 5.0
    square.layer.addAnimation(orbit, forKey: "orbit")

【参考方案1】：

frame“描述视图在其父视图坐标系中的位置和大小”，而bounds“描述视图在其自身坐标系中的位置和大小。”

因此，如果您从bounds 构建路径，那么square 必须是myView 的子视图。如果您使用myView 的frame 构建路径，那么square 可能是view 的子视图。

【参考方案2】：

所以，我找到了另一个解决方案，而不是基于已经存在的某些视图创建 CGPath，我使用了

let myPath = UIBezierPath(arcCenter: myView.center, radius: bounds.width/2, startAngle: CGFloat(-(CGFloat(M_PI_2))), endAngle: CGFloat((2.0 * M_PI - M_PI_2)), clockwise: true).CGPath

这样，我可以指定UIBezierPath的中心点。

【讨论】：

您显然可以将startAngle 和endAngle 简化为startAngle: 0, endAngle: CGFloat(2 * M_PI)。将其轮换为 M_PI_2 没有任何好处。