【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;

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

##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にサンプルコードを追加しました。

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