はじめに
こんにちは、nukkyです。
今回は、仕事でViewのアニメーションを
多用する機会があったので
そこで使用したライブラリ「Cheetah」を紹介したいと思います。
準備
おなじみCarthageを使用します。
Cartfileにこちらを記述します、
| 1 | github "suguru/Cheetah" |
そうしたら、以下のコマンドでビルドしてください。
| 1 | carthage update --platform iOS |
実装
準備
まずは「Cheetah」をインポートします。
| 1 | import Cheetah |
次にViewを表示します、
今回は動きが分かりやすいように正四角形で用意します。
| 1 2 3 | let box = UIView(frame:CGRect(x: 100, y: 100, width: 100, height: 100)) box.backgroundColor = UIColor.blue self.view.addSubview(box) |
移動
まずは単純に移動させてみます。
以下のコードで右方向に移動します。
| 1 | box.cheetah.move(100, 0).run() |
連続で移動させたい場合は以下のようにします。
| 1 2 3 4 5 6 | // 右に移動した後、初期位置に帰ってくる box.cheetah .move(100, 0) .wait() .move(-100, 0) .run() |
moveの後にmoveを実行したいときはwait()を挟んでください。
回転と拡大
回転と拡大は以下のように行います。
| 1 | box.cheetah.rotate(M_PI).scale(1.5).run() |
回転はrotate、拡大はscaleを使用します。
当然、移動とも絡めることができるので、
上の連続移動のサンプルに追記して、
右回転で右に移動しながら拡大し、
左回転で初期位置に縮小しながら戻るようにします。
| 1 2 3 4 5 6 7 8 9 | box.cheetah .move(100, 0) .rotate(M_PI) .scale(1.5) .wait() .move(-100, 0) .rotate(-M_PI) .scale(1.0) .run() |
速度調整
アニメーションの速度調整は以下のように行います。
| 1 | box.cheetah.move(100, 0).duration(0.5).delay(2).run() |
durationでアニメーションの速度、
delayでアニメーションを実行するまでの遅延を指定できます。
この場合runから2秒後にアニメーションが開始され、
その後、0.5秒でアニメーションが終了するように実行されます。
繰り返し
アニメーションの繰り返しは回数指定と
永続指定の２種類用意されています。
| 1 2 3 4 | // 回数指定 box.cheetah.rotate(M_PI).repeatCount(3).run() // 永続 box.cheetah.rotate(M_PI).forever.run() |
注意事項として、repeatCountは最初の実行回数は含まれていないので
repeatCount(3)と指定するとアニメーションは４回実行されます。
アニメーションの終了
アニメーションの終了は以下の形で受け取ります。
| 1 2 3 | box.cheetah.completion({ () -> Void in print("アニメーション完了") }) |
ちなみにアニメーションの終了は繰り返し指定していても
一回のループが終わるたびに検知されるので気をつけてください。
(repeatCount(3)と指定した場合４回終了が検知されます)
さいごに
「Cheetah」いかがだったでしょうか、
まだまだ、今回紹介しきれなかった機能は一杯あるのですが
基本的な使い方は紹介出来たと思います。
かなり直感的かつ簡単にアニメーションが書けるので
アニメーションを多用するアプリには
是非、使ってみて頂ければと思います。
