ios - 如何在我的 iPad 应用程序中的不寻常曲线路径上为一张图像设置动画？

Question

我有两个单独的图像。

1. CurvedPath 图像（附在下面）
2. 人物形象

正如您所看到的，这条路径对于单个角度来说没有完美的弧度。

我有另一个 PersonImage，我想在此弧形图像的中心线上方进行动画处理，并具有放大效果。

这个动画应该从左下角开始到右上角。

如何实现这种动画？

我已经阅读了有关 QuartzCore 和 BeizerPath 动画的内容，但由于我对这些了解较少，因此我很难快速实现这一点。

Answer 1

沿着路径移动

只要你能得到你想要动画图像对齐的确切路径，你就可以使用 Core Animation 和 CAKeyframeAnimation 来做到这一点。

为 position 属性创建一个关键帧动画，并将其设置为沿您的路径进行动画处理

CAKeyframeAnimation *moveAlongPath = [CAKeyframeAnimation animationWithKeyPath:@"position"];
[moveAlongPath setPath:myPath]; // As a CGPath

如果您将路径创建为 UIBezierPath，那么您可以通过调用贝塞尔路径轻松获取 CGPath CGPath。

接下来，您使用持续时间等配置动画。

[moveAlongPath setDuration:5.0]; // 5 seconds
// some other configurations here maybe...

现在，您将动画添加到 imageView 的图层，它将沿路径进行动画处理。

[[myPersonImageView layer] addAnimation:moveAlongPath forKey:@"movePersonAlongPath"];

---

如果您以前从未使用过 Core Animation，则需要将 QuartzCore.framework 添加到您的项目中，并#import <QuartzCore/QuartzCore.h>在您的实现顶部添加。

创建 UIBezierPath

如果您不知道什么是贝塞尔路径，请查看Wikipedia 站点。一旦你知道你的控制点，你可以创建一个简单的贝塞尔路径，像这样（所有的点都是正常的 CGPoints）：

UIBezierPath *arcingPath = [UIBezierPath bezierPath];
[arcingPath moveToPoint:startPoint];
[arcingPath addCurveToPoint:endPoint 
              controlPoint1:controlPoint1 
              controlPoint2:controlPoint2];
CGPathRef animationPath = [arcingPath CGPath]; // The path you animate along

放大

要实现缩放效果，您可以使用 CABasicAnimation 应用类似的动画来转换图层。只需从 0 比例的变换（无限小）到 1 比例的变换（正常大小）进行动画处理。

CABasicAnimation *zoom = [CABasicAnimation animationWithKeyPath:@"transform"];
[zoom setFromValue:[NSValue valueWithCATransform3D:CATransform3DMakeScale(0.0, 0.0, 1.0);];
[zoom setToValue:[NSValue valueWithCATransform3D:CATransform3DIdentity];
[zoom setDuration:5.0]; // 5 seconds
// some other configurations here maybe...
[[myPersonImageView layer] addAnimation:zoom forKey:@"zoomPersonToNormalSize"];

两者同时

要让两个动画同时运行，请将它们添加到动画组中，然后将其添加到人物图像视图中。如果你这样做，那么你配置动画组（使用持续时间等而不是单个动画）。

CAAnimationGroup *zoomAndMove = [CAAnimationGroup animation];
[zoomAndMove setDuration:5.0]; // 5 seconds
// some other configurations here maybe...
[zoomAndMove setAnimations:[NSArray arrayWithObjects:zoom, moveAlongPath, nil]];
[[myPersonImageView layer] addAnimation:zoomAndMove forKey:@"bothZoomAndMove"];