Question

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

我有一个想要翻译的视图，但不是一条线。我想抛物面翻译它。想象一下，我正在制作一辆沿弯道行驶的汽车。

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

问题是，我不知道如何创建转换。我知道如何缩放，翻译等，但我如何翻译？它甚至可能吗？

Answer 1

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

// 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"];

Answer 2

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

Answer 3

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

pathAnimation.rotationMode = @"auto";

你还可以添加一个计时功能来创建画眉/画效

pathAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

Answer 4

听起来你需要定期将transform属性设置为使用抛物线选择的x，y参数创建的CGAffineTransformTranslate（做Russell建议从y得到x，反之亦然）。

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

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

Answer 5

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

它必须完全是抛物线还是近似值？你想做的事听起来非常像rendering text along a curve（也见screenshot）。这一系列帖子似乎是一个非常好的方法 - 解释角度计算和东西。每个“角色”对应一个汽车的位置。参数化弧长可确保您的速度恒定。

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

我如何抛物线翻译？

5 个答案: