キー フレーム アニメーションの別のテストでは、UIImageView (と呼ばれるtheImage) をベジエ パスに沿って移動し、移動に合わせて拡大することを組み合わせて、パスの最後に 2 倍の大きな画像を生成します。これを行うための最初のコードには、アニメーションを開始するための次の要素が含まれています。
UIImageView* theImage = ....
float scaleFactor = 2.0;
....
theImage.center = destination;
theImage.transform = CGAffineTransformMakeScale(1.0,1.0);
CABasicAnimation *resizeAnimation = [CABasicAnimation animationWithKeyPath:@"bounds.size"];
[resizeAnimation setToValue:[NSValue valueWithCGSize:CGSizeMake(theImage.image.size.height*scaleFactor, theImage.image.size.width*scaleFactor)]];
resizeAnimation.fillMode = kCAFillModeBackwards;
resizeAnimation.removedOnCompletion = NO;
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = [jdPath path].CGPath;
pathAnimation.fillMode = kCAFillModeBackwards;
pathAnimation.removedOnCompletion = NO;
CAAnimationGroup* group = [CAAnimationGroup animation];
group.animations = [NSArray arrayWithObjects:pathAnimation, resizeAnimation, nil];
group.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
group.removedOnCompletion = NO;
group.duration = duration;
group.delegate = self;
[theImage.layer addAnimation:group forKey:@"animateImage"];
次に、アニメーションが完了したら、画像をより大きなサイズで保持したいので、次を実装します。
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
{
theImage.transform = CGAffineTransformMakeScale(scaleFactor,scaleFactor);
}
これはすべて機能します。問題は、アニメーションの最後にtheImage一瞬ちらつくことです。これは見栄えが悪くなります。これは、変換を新しいサイズに設定したアニメーションの最後のトランジションであると推測しています。
これを実験する際に、上記とは少し異なる形式を試しましたが、それでも同じちらつきが発生しました。
CAKeyframeAnimation *resizeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
NSValue* startSizeKey = [NSValue valueWithCATransform3D:CATransform3DScale (theImage.layer.transform, 1.0, 1.0, 1.0)];
NSValue* endSizeKey = [NSValue valueWithCATransform3D:CATransform3DScale (theImage.layer.transform, scaleFactor, scaleFactor, 1.0)];
NSArray* sizeKeys = [NSArray arrayWithObjects:startSizeKey, endSizeKey, nil];
[resizeAnimation setValues:sizeKeys];
....
theImage.transform = CGAffineTransformMakeScale(scaleFactor,scaleFactor);
しかし、オリジナルと同じサイズでアニメーションを終了すると、ちらつきはありませんでした:
CAKeyframeAnimation *resizeAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform"];
NSValue* startSizeKey = [NSValue valueWithCATransform3D:CATransform3DScale (theImage.layer.transform, 1.0, 1.0, 1.0)];
NSValue* middleSizeKey = [NSValue valueWithCATransform3D:CATransform3DScale (theImage.layer.transform, scaleFactor, scaleFactor, 1.0)];
NSValue* endSizeKey = [NSValue valueWithCATransform3D:CATransform3DScale (theImage.layer.transform, 1.0, 1.0, 1.0)];
NSArray* sizeKeys = [NSArray arrayWithObjects:startSizeKey, middleSizeKey, endSizeKey, nil];
[resizeAnimation setValues:sizeKeys];
....
theImage.transform = CGAffineTransformMakeScale(1.0,1.0);
だから私の大きな問題は、ちらつきなしでこの画像をアニメーション化し、アニメーションの最後に別のサイズで終わるにはどうすればよいですか?
3月2日編集
私の最初のテストは、画像を拡大することでした。私はちょうどそれを縮小しようとしました (IE scaleFactor = 0.4)、そしてちらつきはもっと目に見えて、私が見ているものに関してもっと明白でした. これは一連のイベントでした：
- 元のサイズの画像が画面の開始位置に描画されます。
- 画像がパスに沿って移動すると、画像は滑らかに縮小します。
- 完全に縮小されたイメージは、パスの最後に到達します。
- その後、画像は元のサイズでペイントされます。
- イメージは最終的に縮小されたサイズでペイントされます。
したがって、私が見ているちらつきはステップ 4 のようです。
3月22日編集
ベジェ パスに沿ったオブジェクトの移動を示すデモ プロジェクトを GitHub にアップロードしました。コードはPathMoveにあります。
iOS でオブジェクトをベジエ パスに沿って移動するというブログにも書いています。