6

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

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

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

问题是，我不知道如何创建转换。我知道如何缩放、翻译等，但如何进行抛物线翻译？甚至可能吗？

4

5 回答 5

25

要沿平滑曲线制作动画，您需要使用 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 Programming Guide或Animation Types and Timing Programming Guide。

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

[imageViewForAnimation.layer addAnimation:pathAnimation forKey:@"curveAnimation"];
于 2009-12-11T13:30:07.933 回答
3

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

于 2009-12-11T06:40:12.483 回答
1

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

pathAnimation.rotationMode = @"auto";

您还可以添加定时功能来创建缓入/缓出效果

pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
于 2012-08-30T16:00:02.003 回答
0

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

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

我真的不知道我在说什么，我只是读了这篇博文：Demystifying CGAffineTransform。

于 2009-12-11T06:37:44.753 回答
0

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

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

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

于 2009-12-11T07:44:25.173 回答