グラデーションをアニメーションさせるライブラリ作った【iOS】

FacebookiOS アプリでは、起動時にコンテンツを表示するまでの間、テキストや画像を表す灰色で塗りつぶした View を表示しています。そうすることで、この後にどういったコンテンツが表示されるのかということを伝えることができます。

加えて、ローディングインジケータとして、 UIAcitivityIndicator のようなぐるぐるを表示するのではく、その灰色で塗りつぶした View をグラデーションさせ、グラデーションをアニメーションさせています。
コンテンツとは切り離されたぐるぐるを表示するのではく、コンテンツそのものにエフェクトを加えることで、より自然な表現になっていると思います。

今回は、この Facebook アプリと同じ表現をするためのライブラリを作ったので紹介します。

GradientAnimationView

github.com

同じようなことができるライブラリはたくさんあるかと思いますが、その中でも一番シンプルになっているかと思います。 自分がやりたかったことは、グラデーションを左から右にスライドするアニメーションをさせるということだけだったので、それだけができるようにしています。

Carthage に対応していますが、1ファイルだけなのでコピペするのでも良いです。

使い方

対象の View に対して addSubView するだけです。

let gradientAnimationView = GradientAnimationView()
view.addSubview(gradientAnimationView)

そうすると、このようなグラデーションが左から右へアニメーションする View を作ることができます。

GradientAnimationView

オプション

以下を設定できます。

// 角丸にする
gradientAnimationView.cornerRadius = 5.0

// グラデーションの両端の色
gradientAnimationView.sideColor = .gray

// グラデーションの中央の色
gradientAnimationView.centerColor = .lightGray

// アニメーションの時間
gradientAnimationView.animationDuration = 1.2

// アニメーション間の時間
gradientAnimationView.waitingDuration = 0.6

今後

Storyborad から設定できたら便利かと思うのですが今はできないので対応したいと思います。