CIFilterでアニメーション

前回に引き続きMac OS Xの話です。

Mac OS X v10.4で導入された画像処理テクノロジー「Core Image」を使うと、画像に様々なエフェクトを簡単にかけることができます。
前回話に出たアプリケーションでは、「歪みエフェクトフィルタ(Distortion Effect Filter)」の「バンプ(凹凸)歪み」フィルタを使って画像にエフェクトをかけています。
このフィルタの実行をCore Animationを使って、次のようにアニメーション化しています。

- (IBAction)done:(id)sender {

    // レイヤーを取得する
    CALayer*    layer;
    layer = [[[imageView layer] sublayers] objectAtIndex:0];

    // フィルタを作成する
    CIFilter *filter;
    filter = [CIFilter filterWithName:@"CIBumpDistortion"];

    // 入力パラメータをデフォルト値にする
    [filter setDefaults];

    // パラメータを設定する
    [filter setValue:
      [CIVector vectorWithX:215 Y:150] forKey:@"inputCenter"];
    [filter setValue:
      [NSNumber numberWithFloat:50] forKey:@"inputRadius"];
    [filter setValue:
      [NSNumber numberWithFloat:0.5] forKey:@"inputScale"];
    [filter setName:@"bump"];

    // レイヤーにフィルタをセットする
    [layer setFilters:[NSArray arrayWithObject:filter]];

    // アニメーションの設定
    CABasicAnimation *bumpAnimation = [CABasicAnimation animation];
    bumpAnimation.keyPath = @"filters.bump.inputScale";
    bumpAnimation.fromValue = [NSNumber numberWithFloat:0.0];
    bumpAnimation.toValue = [NSNumber numberWithFloat:0.5];
    bumpAnimation.duration = 1.5;

    // レイヤーにアニメーションを追加
    [layer addAnimation:bumpAnimation forKey:@"bumpAnimation"];

}

フィルタの設定


8行目から「バンプ(凹凸)歪み」フィルタのパラメータを設定しています。
フィルタの各パラメータで設定される内容は次のとおりです。

inputCenter
フィルタ処理する領域の中心を x および y 座標で指定する CIVector オブジェクト。

inputRadius
フィルタ処理対象の中心からの距離を指定する値(NSNumber)。

inputScale
エフェクトの方向と量を指定するスカラー値(NSNumber)。
デフォルト値は -0.5 です。範囲は -10.0 ~ 10.0 です。値 0 は「エフェクトなし」を指定し、負の値は外向き(凸状)のバンプを生み出し、正の値は内向き(凹状)のバンプになります。

Core Imageプログラミングガイドより

Core Imageでは左下角がx軸、y軸の原点(0, 0)になるので座標を指定する際には注意が必要です。(iPhoneでは、左上角が原点の座標(UIView等)に親しんでいたので、少しとまどいました。)
Core Imageプログラミングガイドでは、inputScaleが負の値は外向き(凸状)のバンプを生み出し・・・と記載されていますが、実際にやってみると、正の値は外向き(凸状)のバンプ、負の値は内向き(凹状)のバンプになりました。逆ですね。
今回の場合は、画像の吹き出し部分のあたりをぽこっと膨らませたいので、正の値(0.5)を設定しています。このinputScaleがアニメーション対象になります。
フィルタに名前(bump)をつけて、レイヤーのfiltersプロパティ(NSArray)にフィルタを設定します。

アニメーションの設定


27行目からアニメーションの設定をしています。
CABasicAnimationのkeyPathにアニメーション対象のキーパスを設定します。
フィルタのinputScaleがアニメーション対象なので、”filters.bump.inputScale”を設定しています。これは、

レイヤーのフィルタ配列の”bump”という名前のフィルタの”inputScale”

を表しています。
inputScaleのアニメーション開始時の値をfromValue、アニメーション終了時の値をtoValueに設定することによって、fromValueからtoValueまでの値の変化がアニメーション化されます。durationには、アニメーションの実行時間(秒)を設定します。
まとめると、

レイヤーのフィルタ配列の”bump”という名前のフィルタの”inputScale”が、0から0.5に1.5秒間で変化するアニメーション

ということになります。
CABasicAnimationをレイヤに追加するとアニメーションが実行されます。

アニメーション実行


実行すると、こんな感じです。


フィルタとアニメーションで遊ぶ


Core Imageには、今回使用したフィルタ(CIBumpDistortion)以外にも様々なフィルタが用意されています。レイヤーには複数のフィルタとアニメーションを設定することができるので、いろんなフィルタとアニメーションを組み合わせて遊ぶことができます。
例えばこんな感じに・・・


Wikimedia Commonsの画像を使用しています。)

みなさんも遊んでみてください。
CIFilterのアニメーションについては、Core Animationプログラミングガイドの「サンプル:Core Animation Menuアプリケーション」が参考になりました。

Share on FacebookTweet about this on TwitterShare on Google+Share on TumblrEmail this to someonePrint this page

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*