25
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

[iOS9]CASpringAnimationについて

Posted at

概要

iOS9へのアップデートに伴い、QuartzCoreのCAAnimationに新しくCASpringAnimationが追加されます。
名前の通りばねの動きを再現することができ、今まで三角関数とか使って計算してアニメーションしてた部分を自然な感じに吸収してくれるすごいやつ…かも知れません。

実装例

CASpringAnimationの初期化例です。

設定例
CASpringAnimation *springAnimation = [CASpringAnimation animationWithKeyPath:@"position"];
springAnimation.mass = 20.0f;               // 質量
springAnimation.initialVelocity = -5.0f;    // 初速度
springAnimation.damping = 50.0f;            // 振動の減衰
springAnimation.stiffness = 500.0f;         // ばねの弾性力

// アニメーションが終わるまでの時間を取得してセット
springAnimation.duration = springAnimation.settlingDuration;

各設定については後述します。

例として、positionの設定を行います。

いつもの設定
springAnimation.fromValue =
     [NSValue valueWithCGPoint:CGPointMake(beforeX, beforeY)]; // 始点
springAnimation.toValue =
     [NSValue valueWithCGPoint:CGPointMake(afterX, afterY)]; // 終点
springAnimation.removedOnCompletion = NO;
springAnimation.fillMode = kCAFillModeForwards;
springAnimation.delegate = self;

[self.hogeView.layer addAnimation:springAnimation forKey:@"move-layer"];

この場合、
fromValueがばねを伸ばした状態での物体の座標
toValueがばねの基点座標
となります。最終的にはボヨンボヨン跳ねたあとばねの基点座標で停止します。
つまりこのアニメーションは、ばねに繋がった物体(View)を引っ張り、手を離した際の動きを再現します。

アニメーションの設定

CASpringAnimationに設定可能な各プロパティです。

CASpringAnimation.mass
対象の質量を表します。
大きいほど重い物体であるということなので、ばねは強く引っ張られます。

CASpringAnimation.initialVelocity
初速度を表します。
勢いをつけてばねを手放すイメージ。負の値にすると逆方向に力を加えます。

CASpringAnimation.damping
減衰率を表します。
大きいほどばねの勢いが弱まる速度が上がります。0だと減衰しないので、ずっとバウンドし続けます。

CASpringAnimation.stiffness
ばねの硬さを表します。
大きいほどばねの持つ跳ね返す力が強くなります。なので跳ね返りが鋭くなり、跳ね返るまでの時間が短くなります。

CASpringAnimation.settlingDuration(readonly)
ばねが止まるまでの時間を表します。
各プロパティを設定すると、CASpringAnimationはこのばねが止まるまでの時間を中で計算してくれます。
このプロパティをanimation.durationに設定することで、ばねが止まるまでの時間ぴったりのアニメーションを作ることができます。

各プロパティをいじることで、より現実に近いばねの動きを再現できます。

おわりに

完全に思い通りの跳ね方をさせるには物理的な計算が必要かとは思いますが、
お手軽に跳ねる動きが作れそうです。px単位での調整を行わない場合は使ってみるのもアリかも。
UIViewのanimateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:との比較もそのうちしてみようかなと思います。

25
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?