Core Animationを理解する -KeyframeAnimation-
基本アニメーションに似ていますが、対象値の配列を指定することができます。
たとえば。。。
・ボールが地面に落ちてからバウンドしていくさま
・ゆったりしてから徐々に加速するページ遷移
つまり、指定する座標までははやかったり、遅くしたりするといった挙動が可能になる
ここではViewClassとViewControllerクラスを使ってボールが上から下にジグザグに
落ちていくアニメーションを作成する
手順としては
・viewClassを作成 ・init時にキーフレームの値を設定 ・viewControllerにて呼び出す
viewClassを作成
インスタンス変数としてPathを設定
KeyframeAnimationView.h
#import <QuartzCore/QuartzCore.h> #import "BasicAnimationLayer.h" @interface KeyframeAnimationView : UIView { BasicAnimationLayer *spot; CGMutablePathRef path; } @end
init時にキーフレームの値を設定
KeyframeAnimationView.m
- (void)_init { self.backgroundColor = [UIColor whiteColor]; path = CGPathCreateMutable(); // アイコンの初回位置 CGPathMoveToPoint(path, NULL, 74.0, 74.0); // 一回目の移動で座標(x,y)=(320.0, 500.0)まで弧を描いて移動する CGPathAddCurveToPoint(path, NULL, 74.0, 500.0, 320.0, 500.0, 320.0, 500.0); // 二回目の移動で座標(x,y)=(566.0, 74.0)まで弧を描いて移動する CGPathAddCurveToPoint(path, NULL, 320.0, 500.0, 566.0, 500.0, 566.0, 74.0); // 動き回るアイコンの設定 spot = [[BasicAnimationLayer alloc] init]; spot.bounds = CGRectMake(0.0, 0.0, 100.0, 100.0); [self.layer addSublayer:spot]; // positionプロパティをキーパスに指定して、アニメーションのオブジェクトを作成する CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; // 再生時間を5.0秒に設定 animation.duration = 5.0; animation.path = path; animation.repeatCount = NSUIntegerMax; animation.autoreverses = YES; animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]; [spot addAnimation:animation forKey:@"move"]; }
viewControllerにて呼び出す
KeyframeAnimationViewController.m
-(void)loadView { KeyframeAnimationView *pathView = [[KeyframeAnimationView alloc] initWithFrame:[UIScreen mainScreen].bounds]; pathView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight; self.view = [pathView autorelease]; }