Strech Button

UIDynamicsフレームワークのUISnapBehaviorを使って伸び縮みするボタンのようなものを作りました。

(↓ぐにょ〜っとした物体)


UISnapBehaviorとは

UISnapBehaviorは、Viewに設定するだけで、バネのような動きをリアルに再現してくれます

(↓1つのViewにUISnapBehaviorを適用した例)


作り方(概要)

UISnapBehaviorを適用したViewを円状に配置します。

Viewをドラッグさせる必要があるため、それぞれのViewにUIPanGestureRecognizerを追加します。

ドラッグ中、UIPanGestureRecognizerのセレクター内で、それぞれのViewの座標を設定します。座標の設定には加速度を利用します、加速度はドラッグされているViewに近いものほど大きく、遠いものほど小さくなるような計算式を使います。

(↓こんな感じに)

ドラッグ中のViewの座標の計算は必要ですが、UISnapBehaviorを利用することにより、ドラッグが終わった後、Viewがバネのような動きを伴って元の位置に戻るアニメーションを実装をしなくていいという点が、一番のメリットです。
このバネのような動きがリアルにできていてすごいです!


Viewの座標をもとにパスを描画します

(↓こんな感じに)


最後に、Viewを消して、パスを塗りつぶせば完成です!


所感

UIDynamicsを利用すれば色々と面白い動きをしたものが手軽に出来そうだと、あらためて思いました。また何か思いついたら作ってみます。