0

私は2つの別々の画像を持っています。

  1. CurvedPath 画像 (下に添付)
  2. 人物画像

ここに画像の説明を入力

ご覧のとおり、このパスは単一の角度に対して完全な円弧を持っていません。

ズームイン効果を使用して、この円弧イメージの中心線の真上にアニメーション化する別の PersonImage があります。

このアニメーションは、左下のポイントから右上のポイントまで開始する必要があります。

この種のアニメーションを実現するにはどうすればよいですか?

QuartzCore と BeizerPath アニメーションについて読んだことがありますが、それらについての知識が少ないため、これをすばやく達成するのは難しいでしょう。

4

1 に答える 1

4

パスに沿って移動する

画像をアニメーション化する正確なパスを取得できる限り、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 の作成

ベジェ パスとは何かがわからない場合は、ウィキペディアのサイトを参照してください。コントロール ポイントがわかったら、次のような単純なベジエ パスを作成できます (すべてのポイントは通常の 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"];
于 2012-05-22T16:32:06.173 に答える