統計情報(30日間)


最新情報をツイート

人気の投稿

バウンスアニメーションライブラリ

このエントリーをはてなブックマークに追加

CAKeyframeAnimation のサブクラスとして提供されていて簡単にバウンス効果を与えることができる。


デモを立ち上げると色々な利用パターンが見られる。

オーソドックスな一方向のパターン。青い矩形が上から下へ移動し、終点付近でバウンスする。

下は静止画でわかりにくいが、小さな矩形がアニメーションしながら一定の大きさに拡大される。その最後の大きさに達した前後でバウンス効果(小刻みに拡大縮小)が起きる。なるほど確かにバウンスは移動だけでなく拡大・縮小したの利用も効果的。


アニメーション追加はこんな感じ。
NSString *keyPath = @"position.y";
id finalValue = [NSNumber numberWithFloat:300];
[view.layer setValue:finalValue forKeyPath:keyPath];

SKBounceAnimation *bounceAnimation = [SKBounceAnimation animationWithKeyPath:keyPath];
bounceAnimation.fromValue = [NSNumber numberWithFloat:view.center.x];
bounceAnimation.toValue = finalValue;
bounceAnimation.duration = 0.5f;
bounceAnimation.numberOfBounces = 2;

[view.layer addAnimation:bounceAnimation forKey:@"someKey"];

デモのアニメーションは少しおとなしいので、durationとnumberOfBouncesを増やすと見た目はわかりやすい(それぞれ 2.0, 14にすると一方向のパターンはやや大げさだがはっきりとバウンスがわかるレベル)。

面白いプロパティとしては shouldOvershoot や shake がある。前者は終点を行きすぎてバウンスするかどうかの制御。デフォルトではYESとなっている。これをONにすると壁にぶつかった感じに変わる。

- - -
バウンスアニメーションは iOSの基本ともいえる動きだが、意外にも専用のアニメーションAPIが用意されていない。これは重宝しそう。

Leave a Reply