如何进一步为贝塞尔路径上的图像设置动画

Question

也许有人可以为我指明正确的方向。我试过谷歌，但真的不知道如何用可搜索的术语来定义我的问题。

我正在像这样沿 UIBezierPath 为图像设置动画：

UIBezierPath *trackPath = [UIBezierPath bezierPath];
[trackPath moveToPoint:P(8, 250)];
[trackPath addCurveToPoint:P(318, 250)
             controlPoint1:P(156, 86)
             controlPoint2:P(166, 412)];
[trackPath addCurveToPoint:P(652, 254)
             controlPoint1:P(488, 86)
             controlPoint2:P(512, 412)];
[trackPath addCurveToPoint:P(992, 254)
             controlPoint1:P(818, 96)
             controlPoint2:P(872, 412)];


CALayer *bee = [CALayer layer];
bee.bounds = CGRectMake(0, 0, 69, 71);
bee.position = P(160, 25);
bee.contents = (id)([UIImage imageNamed:@"bee3.png"].CGImage);
[self.view.layer addSublayer:bee];

我想做的是在图像沿路径移动时为图像本身设置动画。我可以像这样对图像本身进行动画处理：

    NSArray *blueArray = [NSArray array];
    blueArray = [[NSArray alloc] initWithObjects:
                 [UIImage imageNamed:@"blue1.png"],
                 [UIImage imageNamed:@"blue2.png"], nil];

    blueFly.animationImages = blueArray;
    blueFly.animationDuration = 0.20;
    blueFly.animationRepeatCount = -1;
    [blueFly startAnimating];

可以这么说，我怎样才能将两者结合起来？

另外，我知道如何将路径本身绘制到屏幕上，如下所示：

CAShapeLayer *beeline = [CAShapeLayer layer];
beeline.path = trackPath.CGPath;
beeline.strokeColor = [UIColor whiteColor].CGColor;
beeline.fillColor = [UIColor clearColor].CGColor;
beeline.lineWidth = 2.0;
beeline.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:6],   [NSNumber numberWithInt:2], nil];
[self.view.layer addSublayer:beeline];

但是当图像沿着路径动画时，我怎样才能只在图像后面画线呢？

Answer 1

您可以使用CAShapeLayer 来显示路径。形状层提供两个属性strokeStart 和strokeEnd，其值介于0 和1 之间，并确定可见路径的比例。通过为strokeEnd 设置动画，您可以创建路径在屏幕上“绘制”的印象。请参阅 http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayer 以获取动画笔画线的示例。

为了改变蜜蜂的图像，您可以简单地添加一个动画来改变蜜蜂层的内容。比如要在上面的CAShapeLayer项目中改变笔的图像，我们可以在startAnimation方法中加入如下代码。

CAKeyframeAnimation *imageAnimation = [CAKeyframeAnimation animationWithKeyPath:@"contents"];
imageAnimation.duration = 1.0;
imageAnimation.repeatCount = HUGE_VALF;
imageAnimation.calculationMode = kCAAnimationDiscrete;
imageAnimation.values = [NSArray arrayWithObjects:
  (id)[UIImage imageNamed:@"noun_project_347_1.png"].CGImage,
  (id)[UIImage imageNamed:@"noun_project_347_2.png"].CGImage,
  nil];
[self.penLayer addAnimation:imageAnimation forKey:@"contents"];

这只是向显示笔的图层的contents 属性添加一个关键动画。请注意，图像"noun_project_347_1.png" 不是项目的一部分，因此您必须添加图像才能看到效果。我只是水平翻转了项目附带的图像。通过将calculationMode 设置为kCAAnimationDiscrete，动画不会在两张图片之间插入一张一张。

Answer 2

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

参考how-to-animate-one-image-over-the-unusual-curve-path-in-my-ipad-application)链接。