以前紹介した、Xcodeでストーリーボードを編集するだけでアニメーションを可能にするライブラリのCanvasで、時計周りにくるっと周りながら、中心にちょっとずつ近づいていくアニメーション型spiralInを追加してみました。
なお、この記事では、アニメーションを追加する手順だけ述べます。仕組み自体については以前の記事「アニメーションライブラリCanvasの仕組みを調べてみた」を参照してください。
アニメーションの追加
まず、アニメーション型のための文字列をCSAnimation.hに追加します。
1 2 3 4 5 6 7 | static CSAnimationType CSAnimationTypeSlideRight = @"slideRight";static CSAnimationType CSAnimationTypeSlideDown = @"slideDown";static CSAnimationType CSAnimationTypeSlideUp = @"slideUp";static CSAnimationType CSAnimationTypeSpiralIn = @"spiralIn";static CSAnimationType CSAnimationTypePop = @"pop";static CSAnimationType CSAnimationTypeMorph = @"morph";static CSAnimationType CSAnimationTypeFlash = @"flash"; |
そして、追加した文字列のためのアニメーションクラスCSSpiralInをCSAnimation.mに追加します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | @interface CSSpiralIn : CSAnimation@end@implementation CSSpiralIn+ (void)load { [self registerClass:self forAnimationType:CSAnimationTypeSpiralIn];}+ (void)performAnimationOnView:(UIView *)view duration:(NSTimeInterval)duration delay:(NSTimeInterval)delay { // Start view.alpha = 0; view.transform = CGAffineTransformMakeTranslation(0, -40); [UIView animateKeyframesWithDuration:duration/8 delay:delay options:0 animations:^{ // End view.alpha = 1 / 8.0; view.transform = CGAffineTransformMakeTranslation(35*0.7071, -35*0.7071); } completion:^(BOOL finished) { [UIView animateKeyframesWithDuration:duration/8 delay:0 options:0 animations:^{ // End view.alpha = 2 / 8.0; view.transform = CGAffineTransformMakeTranslation(30, 0); } completion:^(BOOL finished) { [UIView animateKeyframesWithDuration:duration/8 delay:0 options:0 animations:^{ // End view.alpha = 3 / 8.0; view.transform = CGAffineTransformMakeTranslation(25*0.7071, 25*0.7071); } completion:^(BOOL finished) { [UIView animateKeyframesWithDuration:duration/8 delay:0 options:0 animations:^{ // End view.alpha = 4 / 8.0; view.transform = CGAffineTransformMakeTranslation(0, 20); } completion:^(BOOL finished) { [UIView animateKeyframesWithDuration:duration/8 delay:0 options:0 animations:^{ // End view.alpha = 5 / 8.0; view.transform = CGAffineTransformMakeTranslation(-15*0.7071, 15*0.7071); } completion:^(BOOL finished) { [UIView animateKeyframesWithDuration:duration/8 delay:0 options:0 animations:^{ // End view.alpha = 6 / 8.0; view.transform = CGAffineTransformMakeTranslation(-10, 0); } completion:^(BOOL finished) { [UIView animateKeyframesWithDuration:duration/8 delay:0 options:0 animations:^{ // End view.alpha = 7 / 8.0; view.transform = CGAffineTransformMakeTranslation(-5*0.7071, -5*0.7071); } completion:^(BOOL finished) { [UIView animateKeyframesWithDuration:duration/8 delay:0 options:0 animations:^{ // End view.alpha = 8 / 8.0; view.transform = CGAffineTransformMakeTranslation(0, 0); } completion:^(BOOL finished) { // End }]; }]; }]; }]; }]; }]; }]; }];}@end |
あとは、ストーリーボードのTableViewCellをひとつ追加してアニメーションのtypeをspiralInに変更するだけです。
gifアニメでは、そこそこ綺麗に動いているように見えますが、durationを2秒にするとカクカクに動いているのがわかります。
アニメーション自体は簡単にできますが、アニメーションを綺麗に見せようとするにはなかなか手間がかかりそうです。
0 件のコメント:
コメントを投稿
注: コメントを投稿できるのは、このブログのメンバーだけです。