前回に引き続き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では左下角がx軸、y軸の原点（0, 0）になるので座標を指定する際には注意が必要です。（iPhoneでは、左上角が原点の座標（UIView等）に親しんでいたので、少しとまどいました。）
Core Imageプログラミングガイドでは、inputScaleが負の値は外向き（凸状）のバンプを生み出し・・・と記載されていますが、実際にやってみると、正の値は外向き（凸状）のバンプ、負の値は内向き（凹状）のバンプになりました。逆ですね。
今回の場合は、画像の吹き出し部分のあたりをぽこっと膨らませたいので、正の値（0.5）を設定しています。このinputScaleがアニメーション対象になります。
フィルタに名前（bump）をつけて、レイヤーのfiltersプロパティ（NSArray）にフィルタを設定します。
アニメーションの設定
27行目からアニメーションの設定をしています。
CABasicAnimationのkeyPathにアニメーション対象のキーパスを設定します。
フィルタのinputScaleがアニメーション対象なので、”filters.bump.inputScale”を設定しています。これは、
を表しています。
inputScaleのアニメーション開始時の値をfromValue、アニメーション終了時の値をtoValueに設定することによって、fromValueからtoValueまでの値の変化がアニメーション化されます。durationには、アニメーションの実行時間（秒）を設定します。
まとめると、
ということになります。
CABasicAnimationをレイヤに追加するとアニメーションが実行されます。
アニメーション実行
実行すると、こんな感じです。
[hana-flv-player video=”https://blog.bitmeister.jp/wp-content/uploads/2011/05/MapBump.flv”
width=”320″
height=”240″
description=”MapBump”
player=”3″
autoload=”true” autoplay=”false”
loop=”false” autorewind=”true”
/]
フィルタとアニメーションで遊ぶ
Core Imageには、今回使用したフィルタ（CIBumpDistortion）以外にも様々なフィルタが用意されています。レイヤーには複数のフィルタとアニメーションを設定することができるので、いろんなフィルタとアニメーションを組み合わせて遊ぶことができます。
例えばこんな感じに・・・
[hana-flv-player video=”https://blog.bitmeister.jp/wp-content/uploads/2011/05/AnimationSample.flv”
width=”320″
height=”240″
description=”AnimationSample”
player=”3″
autoload=”true” autoplay=”false”
loop=”false” autorewind=”true”
/]
（Wikimedia Commonsの画像を使用しています。）
みなさんも遊んでみてください。
CIFilterのアニメーションについては、Core Animationプログラミングガイドの「サンプル：Core Animation Menuアプリケーション」が参考になりました。