CAAnimation の Easing Function 拡張ライブラリ

CAAnimation のアニメーションの種類を増やすライブラリ。

bryanoltman/CAAnimation-EasingEquations · GitHub

アニメーションを実際に確認できるサイトあり。これはちょっと面白い。

Easing Function 早見表

現実の物体は急に動き出して一定のスピードで動くことなんて有り得ません。 例えば、引き出しを開けるときは、最初は少し加速をつけて、そしてゆっくりにしていきます。 何かが落ちるときを考えてみると、最初はだんだん速くなって落ちていき、地面にあたったときに跳ね返ってきます

デモプログラムで実際の動きが確認できる。


以下、ヘッダファイル。

typedef NS_ENUM(NSInteger, CAAnimationEasingFunction) {
    CAAnimationEasingFunctionEaseInQuad,
    CAAnimationEasingFunctionEaseOutQuad,
    CAAnimationEasingFunctionEaseInOutQuad,
    
    CAAnimationEasingFunctionEaseInCubic,
    CAAnimationEasingFunctionEaseOutCubic,
    CAAnimationEasingFunctionEaseInOutCubic,
    
    CAAnimationEasingFunctionEaseInQuartic,
    CAAnimationEasingFunctionEaseOutQuartic,
    CAAnimationEasingFunctionEaseInOutQuartic,
       :
       :

こんな感じで大量の種類のアニメーションが用意されている。

APIは少なく簡単に扱える。

+ (CAKeyframeAnimation*)animationWithKeyPath:(NSString *)keyPath
                                    duration:(CGFloat)duration
                                        from:(CGFloat)startValue
                                          to:(CGFloat)endValue
                              easingFunction:(CAAnimationEasingFunction)easingFunction;

+ (void)addAnimationToLayer:(CALayer *)layer
                withKeyPath:(NSString *)keyPath
                   duration:(CGFloat)duration
                         to:(CGFloat)endValue
             easingFunction:(CAAnimationEasingFunction)easingFunction;

+ (void)addAnimationToLayer:(CALayer *)layer
                withKeyPath:(NSString *)keyPath
                   duration:(CGFloat)duration
                       from:(CGFloat)startValue
                         to:(CGFloat)endValue
             easingFunction:(CAAnimationEasingFunction)easingFunction;

デモプログラムの主要コードはこんな感じ。animatedViewがオレンジ色の四角。

- (void)playButtonClicked:(id)sender
{
    // Resettin' thangs
    CGRect frame = self.animatedView.frame;
    frame.origin.x = 20;
    self.animatedView.frame = frame;
    
    CAAnimationEasingFunction selectedEasingFunction = (CAAnimationEasingFunction)[self.pickerView selectedRowInComponent:0];
    
    [CAAnimation addAnimationToLayer:self.animatedView.layer
                         withKeyPath:@"position.x"
                            duration:1
                                  to:250
                      easingFunction:selectedEasingFunction];
}

初期位置(x=20)を指定した後、addAnimationToLayer:でレイヤーを渡し、withKeyPath: でアニメーション対象の "possiion.x"を指し、時間間隔(duration:)と最終値(to:)、そしてアニメーションタイプを渡すだけ。


種類が用意されている上に、APIがシンプルで使いやすい。これは結構いいかも。