LoginSignup
69

More than 5 years have passed since last update.

アニメーション付きのボタンを実装するためのテクニック

Last updated at Posted at 2017-05-26

林です。

個人的な話ですが10日ほど入院していまして、
入院というのは、人生で初めて経験しましたが、死ぬほど暇なんですね。

暇な時間を使って、dribbbleにありそうなアニメーション付きのボタンを実装してみました。
無事インターネットのある世界に戻ってきたので、公開します。

LoadingButtoonTop.gif

ベースはUIControl

基本的なところから。
自前のボタンを実装する時はUIButtonではなく、UIControlを継承します。
UIButtonではないですよ。UIControlです。

自前のUIコンポーネントを実装する時に、機能豊富なクラスを継承すると、不要な機能を殺すために苦労する羽目になりがちです。
必要最小限のクラスを使うのが結局のところ近道になります。

押下時の表示変更はisHighlightedをトリガーに

GestureRecognizerとか、setAction:とか使わない
毎回、isSelectedをトリガーにしようとして、「変わらない...」となりますが、正しくはisHighlightedです

この辺り、手を抜くとアプリのクオリティが低く見えるので、面倒でもやったほうが良い。

LoadingButtoonTap.gif

ローディング的なアニメーションにはCAReplicatorLayer

一つのCALayerを元にLayerを量産してくれるCAReplicatorLayer

replicatorLayer.instanceCount = 3

だと
Indicator3.gif

こうで

replicatorLayer.instanceCount = 10

だと
Indicator10.gif

こういうことです。

元のLayer追加したアニメーションは、同時に、あるいは指定の時間分ずれてすべての要素に追加されます

同時

replicatorLayer.instanceDelay = 0

Indicator10sync.gif

タイミングをずらす

replicatorLayer.instanceDelay = 0.1

Indicator10async.gif

便利ですね。

表示、非表示の時にも少しアニメーションを入れる

ローディングが始まる時

// アニメーション前
circleLayer.transform = CATransform3DMakeTranslation(0, 6, 0)
circleLayer.opacity = 0.5
// アニメーション
circleLayer.transform = CATransform3DIdentity
circleLayer.opacity = 0.5

loadingButtonStart.gif

終わる時

loadingButtonStop.gif

[画像]
ドットを表示のタイミングで縦に数ピクセルずらしていますが、それだけでそれっぽくなります。
CAReplicatorLayerを使っているので、各ドットの表示がずれるのもずるいですね。

1度に2つのプロパティを変化させる

経験則ですが、1度に2つのプロパティを変化させるとずるい感じになるんですよね。

ドットはopacityとbounds
Prop1.gif

タップした時にはtransform(scale)とbackgroundColor
LoadingButtoonTap.gif

背景はboundsとbackgroundColor
ドットの表示アニメーションはopacityとtransform(translation)
loadingButtonStart.gif

ライブラリとしては未完成ですが、公開しているので遊んでみてください :)

LoadingButtoonTop.gif

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
69