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

我想要做的是在沿着路径移动时为图像设置动画。我可以使用这样的b本身为图像设置动画：

    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)链接。

如何进一步为bezier路径上的图像设置动画效果

2 个答案: