Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

林です。

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

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

LoadingButtoonTop.gif

https://github.com/hayashi311/HRProgressButton

ベースは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

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

https://github.com/hayashi311/HRProgressButton

LoadingButtoonTop.gif

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした