3

多分誰かが私を正しい方向に向けることができます。Googleを試しましたが、検索可能な用語で質問を定義する方法がわかりません。

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

いわば、この2つをどのように組み合わせることができますか？

さらに、次のようにパス自体を画面に描画する方法を知っています。

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

しかし、パスに沿ってアニメーション化されている画像の後ろにのみ線を引くにはどうすればよいですか？

4

2 に答える 2

3

a を使用しCAShapeLayerてパスを表示できます。シェイプ レイヤーは、 と の間の値を持つ と の 2 つのプロパティを提供し、表示strokeStartされるパスの割合を決定します。アニメーション化することで、パスが画面に「描かれている」ような印象を与えることができます。線を描くペンをアニメーション化する例については、http://oleb.net/blog/2010/12/animating-drawing-of-cgpath-with-cashapelayerを参照してください。strokeEnd01strokeEnd

ミツバチの画像を変更するには、ミツバチのレイヤーの内容を変更するアニメーションを追加するだけです。たとえば、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、2 つの画像間を補間せずに、一方を他方に置き換えます。

于 2012-09-04T07:20:56.763 に答える
0

画像をアニメーション化する正確なパスを取得できる限り、Core Animation と CAKeyframeAnimation を使用してそれを行うことができます。

How -to-animate-one-image-over-the-unusual-curve-path-in-my-ipad-application)リンクを参照してください。

于 2012-09-04T05:08:19.770 に答える