iOSのアニメーションライブラリCanvasで自作アニメーション型を追加してみる

以前紹介した、Xcodeでストーリーボードを編集するだけでアニメーションを可能にするライブラリのCanvasで、時計周りにくるっと周りながら、中心にちょっとずつ近づいていくアニメーション型spiralInを追加してみました。

なお、この記事では、アニメーションを追加する手順だけ述べます。仕組み自体については以前の記事「アニメーションライブラリCanvasの仕組みを調べてみた」を参照してください。

アニメーションの追加

まず、アニメーション型のための文字列をCSAnimation.hに追加します。

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に追加します。

@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秒にするとカクカクに動いているのがわかります。

アニメーション自体は簡単にできますが、アニメーションを綺麗に見せようとするにはなかなか手間がかかりそうです。

関連リンク

• Safx: Xcodeでストーリーボードを編集するだけでアニメーションを可能にするライブラリCanvasを試す
• Safx: アニメーションライブラリCanvasの仕組みを調べてみた
• Canvas - Simplify iOS Development