post Image
Swiftにおけるアニメーションの世界観を掴む

動きのある実装をできるようになりたい。
という思いから漠然とアニメーションに興味があったのでSwiftでアニメーションを実装する手段と各々の概要について調べたことをまとめます。

実装する手段

アニメーションを実現するのに、大きくわけて以下の選択肢があります。
-フレームワーク
・UIKit
・CoreGraphics
・CoreAnimation
・ImageIO
・SpriteKit
-オープンソースライブラリ
・Spring
・POP
・他にも探せばいっぱい
-Unity

各項目について紹介していこうと思いますが、
Unityについて先述するとUnityはiOSアプリを作成することはできます。

C#でコードを書いてUnityのプロジェクトを作成後、
ターゲットをiOSにしてビルドするとXcodeプロジェクトファイルができます。
しかし私が期待していた”Unityで作ったプロジェクトをSwiftなどで作られている既存iOSアプリに組み込む”ということは手段は存在しますがそれは改造に近いもので、
そもそも組み込むことを想定されて作られていません。

UnityはUnityで完結することが望ましいようです。
なのでこれについてはこれ以上調べませんでした。
UnityでiOSアプリをつくる様子がきになる方はこちらの動画なんかが雰囲気を知ることができます。
スクリーンショット 2016-12-25 23.57.33.png
https://www.youtube.com/watch?v=D1O69T6m12Y

フレームワーク

UIKit

UIKitフレームワークにはユーザインターフェイスの構築と管理に必要なクラスが用意されていますが
その中でもTimerとUIViewクラスにはアニメーションを実装する際に活用できるメソッドが備わっています。

【Timerクラス】

    var timer:Timer = Timer()
    timer = Timer.scheduledTimer(timeInterval: 1.0,
    target: self,
    selector: #selector(ViewController.chageImage),
    userInfo: nil,
    repeats: false)

    func changeImage() {
        //アニメーション処理
    }

アニメーションを起動するタイミングに関してはTimerクラスのscheduledTimerメソッドがとても直感的。
フレームを弄る程度で実現できるアニメーションならこれで問題なさそうです。

【UIViewクラス】

    UIView.animateWithDuration(1.0) { () -> Void in
        //アニメーション処理
    }
    UIView.animateWithDuration(1.0, animations: { () -> Void in
          //A:アニメーション処理
    }) { (finished: Bool) -> Void in
        UIView.animateWithDuration(1.0, animations: { () -> Void in
            //Aのアニメーションの完了後に続くアニメーション処理
        })
    }

CoreGraphics

CoreGraphicsフレームワークはMac OS XやiOSで2D描画のAPIを提供するフレームワークです。
ベクトルベースの描画関数群で、グラデーション描画、アンチエイリアス*を施した画像のパターン出力、PDF文章の作成や表示などをサポートします。

CoreGraphicsはCで書かれており、UIkitはCoreGraphicsをラップしているのであまりなじみがないようで実は日々お世話になっているフレームワークです。

基本的にはUIKitで事足りるもですが、画像加工アプリを作る際などにこのCoreGraphicsにお世話になります。

*アンチエイリアス:物体の輪郭を背景と融合するように、色を滑らかに変化させることで綺麗に描画するための技術

しかし(個人的に)使用する機会があまりないように感じたので、
どんな感じなのか他の記事を見る程度にとどめておきました。

参考にした記事はこちらです。
SwiftでCoreGraphics画像作成(基本)【メモ】
UIScrollView内でPDFなどのベクター表示をうまく拡大表示する方法

CoreAnimation

CoreAnimationはグラフィックの描画やアニメーションを行うためのObjetive-Cで書かれたフレームワークです。
特にフレームの管理あたりの負担がぐっと軽減されます。
CoreAnimationのオブジェクトはとっても軽量なので何百ものアニメーションを同時に表示させることも可能ということで安心して使うことができます。

CALayer

CoreAnimationの中心となるクラス。
UIViewと同様に階層構造をしていますがUIViewとは異なる点としてタッチイベントに対応する仕組みはありません。

CALayerクラスには3つのレイヤーが存在します。
プロパティの値を保持するモデルレイヤーとアニメーションの実行時にその値を読み取るプレゼンテーションレイヤー、そしてその値を使って描画を別スレッドで行う描画レイヤーです。

スクリーンショット 2016-12-25 17.41.41.png

この仕組みによってCALayerはアニメーションに対応するプロパティの値を変更するだけで
アニメーション付きでその値の変更を反映してくれます。

この値を変更した際に実行されるアニメーションは暗黙的アニメーションと呼ばれ、durationは0.25秒に固定されています。

暗黙的アニメーションでは値を変えるたびにアニメーションが実行されてしましますが、
プロパティの値だけを変えたい場合にはsetDisableActionsで暗黙的アニメーションを無効にしたり、
setValueメソッドを使います。

durationを明示的に指定してアニメーションを作成したい場合には明示的アニメーションを使用します。明示的アニメーションにはCATransitionメソッドを使います。

    let transition = CATransition()
    transition.duration = 2
    transition.type = kCATransitionPush
    transitioningLayer.add(transition, forKey: "transition")

明示的アニメーションを実行する方法はCABasicAnimationクラス使うという選択肢もあります。
CABasicAnimationクラスはアニメーションで変化させるプロパティの変化前と後、インターバルを設定して使います。

    // アニメーションオブジェクトを作成
    var cornerRadiusAnimation = CABasicAnimation(keyPath: "cornerRadius")

    // プロパティの変化前と後を設定
    cornerRadiusAnimation.fromValue = 0
    cornerRadiusAnimation.toValue = 100

    cornerRadiusAnimation.duration = 2.0

    // アニメーションが終了した時の状態を維持する
    cornerRadiusAnimation.removedOnCompletion = false
    cornerRadiusAnimation.fillMode = kCAFillModeForwards

    // アニメーションの追加
    animationView.layer.addAnimation(cornerRadiusAnimation, forKey: "cornerRadiusAnimation")

引用元:Swiftでアニメーション[CoreAnimation編]

CABasicAnimationを利用して複数のアニメーションを順次実行したい場合にはCAAnimationGroupを使います。
使用例はこちら

上記記事ではアニメーションの加速度を変える例でもあります。
パターンがいくつか用意されていますが、これらを使うと一気にかっこよくなります。

概要をさらっと説明しましたが、より深く学びたい方はこちらの記事などが実際の実装で参考にるコードが載っています。
Core Animation 中級編

こちらはYoutubeの動画ですがTwitterの起動画面のアニメーションのコードが見れます。
Animations & Transitions – Custom Animations in iOS – iOS Dev Scout

ImageIO

ImageIOは画像の読み書きやメタデータへのアクセスを提供するフレームワークです。
UIKitより低レイヤーでの画像へのアクセスを可能としています。
UIkitで基本事足りますがUIkitでは画像を保存する際にPNGもしくはJPEGでしか保存できません。
ImageIOではGIFやアニメーションGIFでの保存も可能です。
また画像に埋め込まれている撮影場所などのデータであるExifの取得・設定も可能です。

Exif情報の取得については参考記事の掲載のみとさせていただきます。

写真のExif情報変えて、ハワイに行ったふりをするカメラアプリ
Swiftで写真からExif情報を取得する
image fileのExifファイルを読み込む

オープンソースライブラリ

アニメーションを実装するのに主だった動作パターンを簡単に実装できるライブラリがいくつかあります。
SpringとFacebooがつくるPOPなどが有名です。
ライブラリについては使い方などについての紹介はしませんがGithubと簡単なサンプルだけ掲載しておきます。

Spring

スクリーンショット 2016-12-25 20.16.38.png
http://qiita.com/codelynx/items/a2a87b053f8225782a9c

    UIView.animate(withDuration: 1.0,
                    animations: { () -> Void in
                    // 回転用のアフィン行列を生成.
                    let t1 = CGAffineTransform(rotationAngle: angle )
                    let t2 = CGAffineTransform(scaleX: scale, y: scale)

                    //concatenating:連結の意
                     subview.transform = t1.concatenating(t2)
                    },
                    completion: { (Bool) -> Void in
                    })

POP

スクリーンショット 2016-12-25 20.17.38.png
https://github.com/facebook/pop

アニメーションを実装する上で大事な事

アニメーションを使用する目的は“視覚的誘導”にあります。
アニメーションが動いている間ユーザーは待機する事になります。
1つ1つのアニメーションの時間は短くとも、何かアクションをするたびにアニメーションが走るようでは、ユーザーは次第に待っている時間が長いと感じるようになるでしょう。

アニメーションは一見カッコよく、ライブラリでもアニメーションの豊富なものは人気です。
しかし実際に自分がユーザーになってみると、ユーザーはアニメーションを見たいのではなく、なにかしらの処理をスムーズに行いたいのだという本来の目的に気が付けると思います。

アニメーションの良い例としてMacの例をあげるとウインドウの最小化です。
黄色いボタンを押すとメニューバーの右側に縮んで収納されます。
これのおかげで、赤いボタンと黄色いボタンの使い分けをユーザーは感覚で理解でき、
ウインドウを再度開く方法もなんとなくクリックしていればいいのかな?とテキストで説明がなくとも操作方法が伝わっています。

開発する際に心がけることとして、
アニメーションはやっぱり作っていてテンションがあがってしまいますが、
実装理由がちゃんと説明できるか?確認することです。
周りの人を納得させられる説明ができなかったらそのアニメーションは不要なのかもしれません。

最後に、アニメーションを使って”気持ち良い”とユーザーが感じる動きにはイージングが適切に設定されているはずです。
イージングとは物理表現を用いてアニメーションの動きをなめらかに、自然に演出するものです。
これはCoreAnimationのところでアニメーションの加速度のパターンがあるという話をしましたが、
このイージングが素晴らしいのがディズニーの12の原則です。

物体に生命を吹き込むアニメーション:12の原則

さらにアニメーションの法則については
フラットデザイン、マテリアルデザインなどにもよって考慮すべき事が違ってきます。

マテリアルデザインに見る機能的なアニメーションの6つの法則

最後に

いろいろ書きましたがやっぱりアニメーションはかっこいいです。
使用にはちゃんと目的を考えなくてはいけませんが、
いつかアニメーションを好きなようにデザインできるようになりたいです。
なので最後にこの記事を読んでくださった皆様に
アニメーション、勉強しよ!って思えるかっこいい例をあげておきます。

インタラクションの参考にしたいUIアニメーション5選

グッドデザイン賞欲しい。


『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。