如何进行抛物线转换？

Question

我正在开发一个带有一些简单动画的 iPhone 应用程序。

我有一个观点想要翻译，但不是沿着一条线。我想用抛物线的方式翻译它。想象一下，我正在制作一辆沿着弯曲道路行驶的汽车的动画。

我知道我可以将变换正确设置为 CGAffineTransform 的实例

问题是，我不知道如何创建变换。我知道如何缩放、平移等，但如何进行抛物线平移？有可能吗？

Answer 1

要沿着平滑曲线制作动画，您需要使用 CAKeyframeAnimation。在 这个答案我提供了组合动画的代码，该动画沿着曲线移动图像视图，同时调整其大小并使其淡出。该代码的相关部分如下：

// Set up path movement
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.calculationMode = kCAAnimationPaced;
pathAnimation.fillMode = kCAFillModeForwards;
pathAnimation.removedOnCompletion = NO;

CGPoint endPoint = CGPointMake(480.0f - 30.0f, 40.0f);
CGMutablePathRef curvedPath = CGPathCreateMutable();
CGPathMoveToPoint(curvedPath, NULL, viewOrigin.x, viewOrigin.y);
CGPathAddCurveToPoint(curvedPath, NULL, endPoint.x, viewOrigin.y, endPoint.x, viewOrigin.y, endPoint.x, endPoint.y);
pathAnimation.path = curvedPath;
CGPathRelease(curvedPath);

这将创建一条具有两个控制点的曲线，一个位于视图的原点，另一个位于显示屏的右上角（在横向模式下）。有关构建路径的更多信息，请参阅 Quartz 2D编程指南或动画类型和时序编程指南。

要使用此动画，您需要使用类似以下内容将其添加到视图的图层中：

[imageViewForAnimation.layer addAnimation:pathAnimation forKey:@"curveAnimation"];

Answer 2

沿着曲线制作动画的一种美观的方式是使用样条线。这些在数学上简单且计算高效。求解抛物线拱的最小阶样条是二次样条。

Answer 3

要包括图像沿路径的旋转，只需添加以下内容

pathAnimation.rotationMode = @"auto";

您还可以添加计时函数来创建缓入/缓出效果

pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

Answer 4

听起来您需要定期将变换属性设置为使用沿抛物线选择的 x,y 参数创建的 CGAffineTransformTranslate（按照 Russell 建议从 y 获取 x 或反之亦然）。

如果您还希望汽车沿着抛物线弯曲时旋转（看起来更真实），您将需要 CGAffineTransormRotate。根据当前绘制点处的抛物线斜率确定角度。您需要一个 atan() 函数来计算与斜坡的角度。听起来很痛苦，希望有更简单的方法。

我真的不知道我在说什么，我刚刚读了这篇博客文章： 揭秘 CGAffineTransform。

Answer 5

我认为 TokenMacGuy 使用样条线的建议是一个很好的建议。再说一次，我不知道我在说什么，但也许这会给你一些想法。

它必须是精确的抛物线还是近似值有效？你想做的事情听起来很像 渲染沿曲线的文本（请参阅屏幕截图 也）。这一系列的帖子似乎是一个非常好的指南——解释了角度计算和其他东西。每个“字符”对应于您汽车的一个位置。对弧长进行参数化可确保速度恒定。

至于如何在 iPhone 上做到这一点……不知道。