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

Question

我有两个独立的图像。

1. CurvedPath 图片(附在下方)
2. 人像

如您所见，这条路径没有完美的单角度弧度。

我有另一个 PersonImage，我想在这个具有放大效果的弧形图像的中心线上方设置动画。

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

如何实现这种动画效果？

我读过有关 QuartzCore 和 BeizerPath 动画的资料，但由于我对它们的了解较少，所以我很难快速实现这一目标。

Answer 1

沿着路径移动

只要您可以获得想要动画图像对齐的确切路径，您就可以使用 Core Animation 和 CAKeyframeAnimation 来完成。

为位置属性创建一个关键帧动画并设置它沿着你的路径做动画

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

如果您不知道什么是贝塞尔曲线路径，请查看 the Wikipedia site.一旦你知道了你的控制点，你就可以像这样创建一个简单的贝塞尔曲线路径(其中所有的点都是普通的 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"];

同时进行

要让两个动画同时运行，您可以将它们添加到一个动画组中，然后将其添加到人物 ImageView 中。如果您这样做，那么您可以配置动画组(使用持续时间等而不是单个动画)。

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