Ios Swift在非线性路径中为视图设置动画

Question

我试图通过非线性路径动画UIView(我不是试图绘制路径本身),如下所示:

视图的初始位置是使用尾部和底部约束(viewBottomConstraint.constant == 100&viewTrailingConstraint.constant == 300)确定的,我使用UIView.animatedWithDuration如下:

viewTrailingConstraint.constant = 20
viewBottomConstraint.constant = 450
UIView.animateWithDuration(1.5,animation:{
    self.view.layoutIfNeeded()
},completition:nil)

但它以直线路径为视图制作动画.

Answer 1

您可以将keyFrame动画与路径一起使用

    let keyFrameAnimation = CAKeyframeAnimation(keyPath:"position")
    let mutablePath = CGPathCreateMutable()
    CGPathMoveToPoint(mutablePath, nil,50,200)
    CGPathAddQuadCurveToPoint(mutablePath, nil,150,100, 250, 200)
    keyFrameAnimation.path = mutablePath
    keyFrameAnimation.duration = 2.0
    keyFrameAnimation.fillMode = kCAFillModeForwards
    keyFrameAnimation.removedOnCompletion = false
    self.label.layer.addAnimation(keyFrameAnimation, forKey: "animation")

GIF

关于这个功能

void CGContextAddQuadCurveToPoint (
   CGContextRef _Nullable c,
   CGFloat cpx,
   CGFloat cpy,
   CGFloat x,
   CGFloat y
);

(cpx,cpy)是控制点,(x,y)是终点

Answer 2

Leo对使用Core Animation的回答CAKeyframeAnimation虽然很好，但是它在视图的“表示层”上运行，并且只会产生将视图移动到新位置的外观。您需要添加额外的代码，以在动画完成后将视图实际移动到最终位置。另外，核心动画非常复杂且令人困惑。

我建议使用UIView方法 animateKeyframesWithDuration:delay:options:animations:completion:。您可能希望使用option值UIViewKeyframeAnimationOptionCalculationModeCubic，该值使对象沿着通过所有点的弯曲路径移动。

可以在视图上调用它，然后在动画块中进行多次调用，以addKeyframeWithRelativeStartTime:relativeDuration:animations:将视图移动到沿曲线的点。

我在github上有一个示例项目，展示了此技术和其他技术。它称为KeyframeViewAnimations（链接）