search
LoginSignup
92

More than 5 years have passed since last update.

posted at

updated at

Organization

【iOS7】ばねっぽいアニメーションを実現するUIViewの新メソッド

iOS7から追加された、 ばね風のタイミングカーブでアニメーションさせることのできるUIViewのメソッド animateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion: (101文字)を使ってみました。

メソッドの定義はこんな感じです。

+ (void)animateWithDuration:(NSTimeInterval)duration
                      delay:(NSTimeInterval)delay
     usingSpringWithDamping:(CGFloat)dampingRatio
      initialSpringVelocity:(CGFloat)velocity
                    options:(UIViewAnimationOptions)options
                 animations:(void (^)(void))animations
                 completion:(void (^)(BOOL finished))completion;

引数が多いですが、ほとんどは従来のアニメーションメソッドと同じなので、ポイントは dampingRatiovelocity の2つだけ。

dampingRatio

UIView.h の UIViewAnimationWithBlocks カテゴリとして定義されている部分を読むと、

When dampingRatio is 1, the animation will smoothly decelerate to its final model values without oscillating. Damping ratios less than 1 will oscillate more and more before coming to a complete stop.

とあります。

  • 1のときは振動することなく最終値に向かって滑らかに減速する
  • 1以下でより小さいほど完全に停止するまでの振動が大きくなる

とのこと。

velocity

同じく UIView.h の UIViewAnimationWithBlocks カテゴリとして定義されている部分を読むと、

You can use the initial spring velocity to specify how fast the object at the end of the simulated spring was moving before it was attached. It's a unit coordinate system, where 1 is defined as travelling the total animation distance in a second. So if you're changing an object's position by 200pt in this animation, and you want the animation to behave as if the object was moving at 100pt/s before the animation started, you'd pass 0.5. You'll typically want to pass 0 for the velocity.

とあります。

ばねの初速を意味し、

  • この値の "1" は "アニメーションで移動する距離全体を1秒で移動する" ことを意味する
  • たとえばアニメーション全体で200ポイント移動する場合に、初速を100ポイント/sにしたかったら、0.5を指定する
  • とりあえず0を指定しとけ

とのことです。

サンプル

iOS7 Samplerにサンプルコードを追加しました。

スライダーで dampingRatiovelocity を調整しつつ挙動を確認できます。

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
What you can do with signing up
92