[iOS] Core AnimationのCAMediaTimingFunctionでRobert Pennerのイージングを近似

2012/12/27

こんにちは。きんくまです。

Core AnimationのCABasicAnimationのイージングはAppleが用意したデフォルトの値がいくつかあります。
kCAMediaTimingFunctionLinearとかkCAMediaTimingFunctionEaseInとか。

それでその5つで指定するのも良いんですが、この間リファレンスを見ていたところ、
オリジナルのベジェカーブでもOKだということを見つけました。
– initWithControlPoints::::のところ。

>> CAMediaTimingFunction Class Reference

そうかそうかと。以前にもCSS3のTransitionのライブラリを作ったときにすでにベジェをトレースして4点とったものがあったので、こいつを使えば簡単そうということでやってみました。

ソースコードとサンプルコードはgithubにアップしてみました。

>> KinkumaDesign/CustomMediaTimingFunction · GitHub

デモの動画です。

使い方は
1. KKCustomMediaTimingFunction.hとKKCustomMediaTimingFunction.mをプロジェクトに加える
2. #import “KKCustomMediaTimingFunction.h” とヘッダファイルを加える
3. timingFunctionにこんな感じで指定すればOKです。

    [CATransaction begin];
    CABasicAnimation *basicAnimation = [CABasicAnimation animation];
    basicAnimation.duration = 1.0;

    //こんな感じ
    basicAnimation.timingFunction = [[KKCustomMediaTimingFunction alloc] initWithEasingCurve:KKCMTFEasingCurveEaseInOutExpo];
    
    basicAnimation.keyPath = @"position";
    basicAnimation.removedOnCompletion = NO;
    basicAnimation.fillMode = kCAFillModeForwards;
    basicAnimation.fromValue = [NSValue valueWithCGPoint:_sampleLayer.position];
    basicAnimation.byValue = [NSValue valueWithCGPoint:CGPointMake(320 - 50, 0)];
    [_sampleLayer addAnimation:basicAnimation forKey:nil];
    [CATransaction commit];

指定できるカーブは以下のものです。
カーブの曲線のイメージはActionScript3のライブラリTweenerのカーブを見るのがわかりやすいです。
>> Tweener Transition Types

typedef enum : NSUInteger{
    KKCMTFEasingCurveLenear =            1 << 0,
    
    KKCMTFEasingCurveEaseInSine =        1 << 1,
    KKCMTFEasingCurveEaseOutSine =       1 << 2,
    KKCMTFEasingCurveEaseInOutSine =     1 << 3,
    KKCMTFEasingCurveEaseOutInSine =     1 << 4,
        
    KKCMTFEasingCurveEaseInQuad =        1 << 5,
    KKCMTFEasingCurveEaseOutQuad =       1 << 6,
    KKCMTFEasingCurveEaseInOutQuad =     1 << 7,
    KKCMTFEasingCurveEaseOutInQuad =     1 << 8,
        
    KKCMTFEasingCurveEaseInCubic =       1 << 9,
    KKCMTFEasingCurveEaseOutCubic =      1 << 10,
    KKCMTFEasingCurveEaseInOutCubic =    1 << 11,
    KKCMTFEasingCurveEaseOutInCubic =    1 << 12,
        
    KKCMTFEasingCurveEaseInQuart =       1 << 13,
    KKCMTFEasingCurveEaseOutQuart =      1 << 14,
    KKCMTFEasingCurveEaseInOutQuart =    1 << 15,
    KKCMTFEasingCurveEaseOutInQuart=     1 << 16,
        
    KKCMTFEasingCurveEaseInQuint =       1 << 17,
    KKCMTFEasingCurveEaseOutQuint =      1 << 18,
    KKCMTFEasingCurveEaseInOutQuint =    1 << 19,
    KKCMTFEasingCurveEaseOutInQuint =    1 << 20,
        
    KKCMTFEasingCurveEaseInExpo =        1 << 21,
    KKCMTFEasingCurveEaseOutExpo =       1 << 22,
    KKCMTFEasingCurveEaseInOutExpo =     1 << 23,
    KKCMTFEasingCurveEaseOutInExpo =     1 << 24,
        
    KKCMTFEasingCurveEaseInCirc =        1 << 25,
    KKCMTFEasingCurveEaseOutCirc =       1 << 26,
    KKCMTFEasingCurveEaseInOutCirc =     1 << 27,
    KKCMTFEasingCurveEaseOutInCirc =     1 << 28
    
}KKCMTFEasingCurve;

オリジナルのイージングの式はRobert Pennerさんの式です。
>> Robert Penner’s Easing Equations

CAMediaTimingFunctionのカスタマイズは3次ベジェ曲線を使ってやるので、はずんで跳ね返ったりするバウンスの動きなどは今回は残念ながら表せないのでできないのでした。

ただ調べてみたところ、方法はちゃんとありまして。

>> How to create custom easing function with Core Animation?

Jesse Crossenさんの回答を見ると見事に解決していました。
KeyframeAnimationってパスに沿わせるアニメーションだけかと思ったら、値を配列で与えれば更新のタイミングでそれを逐次読み込んでくれることもできるみたいです。ぬっはー、すげえっすね。知らんかった。