プログラミング

【第5回】日本語版SwiftUIチュートリアル【アニメーション】

日本語版SwiftUIチュートリアル

日本語版SwiftUIチュートリアル

日本語版SwiftUIチュートリアル

本チュートリアルは,Appleが掲載している公式のSwiftUIチュートリアルを「日本語で」そして「詳細に」解説し直すことを目的とした記事です.

この手の記事は,他にも似たようなものがありますが,全てを網羅しているわけではなく,部分的に解説している記事が多数です.

そこで,SwiftUIを使ってアプリ開発をしたい方々のために,そして勉強している自分自身のために,日本語版SwiftUIチュートリアルの完全版を書きます.

なお,本記事の難易度としては,初級者も見様見真似で作れるようにはなっていますが,それでは物足りないという中級者のために,細かい文法的な解説も随所に入れていこうと思います

注意として,本記事はSwiftの言語解説はあまり含まないので,以下の記事を別タブで開いておいて,分からなければ逐一確認してみると良いと思います.

  1. Swiftを触ったことがないプログラマーのためのSwiftチュートリアル

 

ちなみに出来上がるアプリは,上図に示すような観光地アプリです.

各観光地の位置情報を確認したり,その観光地をお気に入りに追加したりできるアプリを目指します.

第1回は👇

日本語版SwiftUIチュートリアル

第5回:アニメーションビューと遷移

今回は,前回と似たような内容になりますが,アニメーションについてです.

アニメーションの遷移,動きをどう実装していくのか,ということを中心に解説していきます.

Step 1. ハイキングモデルを作る

この部分は公式チュートリアルでは,予め作成されたファイルを使いますが,本チュートリアルでは「ほぼゼロから実装」を目標としていますので,作成しましょう.

面倒臭いという方は,最後のコードをコピペでも構いません

さて,今から何をするかというと,今まで観光地データを元にビューを作成してきましたが,今回は本アプリを使用している間に行ったハイキングの情報を可視化しようと考えています.

今回は,実際にハイキングデータが「Resource」にJSONファイルとして入っていると思うのでそれを使用します.

もし,無い方は改めてResource.zipを手元に落として確認してみてください.

まずは,JSONファイルの中身を見てみましょう.

それぞれ何を示しているかというのは,コメントをつけておきました.

公式チュートリアルでは説明が無いので,いまいちイメージがつきづらいですよね.

0.375kmごとに,標高,ペース,心拍数を記録したデータです.

それぞれの区間における,初期値と到達地点での値の2つのデータが格納されています.

このデータを読み込むためのモデルを最初に作っていきます.

新しくModelsに「Hike.swift」を作成してください.

そしてコードを書いていきましょう.

モデルの実装は一度やっているので,細かい説明は省きますが LengthFormatter() だけ初登場なので解説します.

LengthFormatter() は距離の単位を変換するためのクラスです.

例えばメートルからキロメートルへの変換や,マイルへの変換などを簡単にしてくれます.

他にも,質量系の MassFormatter() など様々なFormatterが存在します.

そうしたら,これも「Data.swift」で読み込むようにします.(公式ではいつの間にか? ModelData.swiftになっていますね)

これで下準備は完了です.

Step 2. 個別ビューへアニメーションを追加してみる

先ほど下準備は完了した,と言いましたが本題に入る前に,まだやることがあります.

まず,読み込んだハイキングデータを可視化したビューを実装したいのですが,これは公式チュートリアルでも解説はなく,これを解説していると冗長になるので,コードの中身とコメントだけで済ませます.

一つ目は「GraphCapsule.swift」です.

これは,区間ごとに記録したデータを高さとした楕円型のビューを描画する構造体です.

magnitude(of: ) 関数はこの後作成する「HikeGraph.swift」で定義します.

こちらのファイルは,先ほどの「GraphCupsule」を呼び出して実際に観測データを可視化するビューになります.

その他,いくつか関数を定義しています.

以下,「HikeGraph.swift」です.

日本語版SwiftUIチュートリアル

このとき「xxx may have crashed」エラーが出たら,JSONファイルがビルドターゲットに入っていないことが考えられます.

日本語版SwiftUIチュートリアル

...

ここで初めて出てきた KeyPath<> について.

KeyPath は構造体のプロパティに対して動的なアクセスを可能とする一種の型 (クラス) です.

複雑な構造体であるほどそのメリットを発揮するわけですが,実際に struct HikeGraph 内のプロパティでは,

と定義していますね.

これは, struct Hike > struct Observation という複雑な構造をした構造体に対してのKeyPath,つまりアクセスするためのパスを一つのプロパティで済ませています.

今はイメージがつきにくいですが,ここの部分,あとでまた出てくるのでちょっと覚えておいてください.

...

Step 3. HikeViewを作る

次に, struct HikeGraph を使って詳細データのビュー「HikeDetail.swift」とそれを一覧として操作する大枠のビュー「HikeView.swift」を作成していきます.

まずは「HikeDetail.swift」から.

このビューでは,HikeDataから3つの主要データ「Elevation (標高)」「HeartRate (心拍)」「Pace (ペース)」を全て一つのインターフェイスで,ボタンによってこれらのグラフを切り替え,表示する役割を担います.

ともかく,コメント付きでコード全体を見せます.

日本語版SwiftUIチュートリアル

ここでも,KeyPathが出てきました.

しかし,このコードをみるとなんとなくその使い方が見えてくるはずです.

KeyPathは, \ を先頭につけることで取得することができ,その型はこのコードのように初期値があれば明記しなくても推測してくれますが,先に触れた「HikeGraph.swift」では初期値がなかったため, KeyPath<Hike.Observation, Range<Double>>  と型を明記していたわけですね.

C/C++のオブジェクトポインタとも少し似ていますね.

さて,次に「HikeView.swift」を作っていきましょう.

その内容は,LandmarkViewと似ていて,Stackを利用して今つくったHikeDetailビューを呼び出すUIを作成します.

これもコード全容を掲載してしまいます.

日本語版SwiftUIチュートリアル

アニメーションなどの動作はみなさんの目で確かめてみてください.

Step 4. アニメーションを調整する

ここまででも十分UIとしては機能しています.

が,もう少しアニメーションに拘ってみましょう.

例えば,ボタンを押して詳細表示するときに矢印を大きくしてみたり.

アニメーションの挙動を変えてみたり.

他にも, .default .easeIn .easeOut など色々な指定方法があります.

こんなこともできます.

フワーっと表示されるかと思います.

Step 5. 凝ったアニメーションの設定

もう少し,複雑で凝ったアニメーションも作成してみましょう.

本チュートリアルでは,先ほども簡単にいじったHikeDetailの表示についてもう少し詳細に定義していきます.

まずは,先ほどのコードを一部元に戻します.

そうしたら,仮に以下のようにスライドして表示させるコードを追記してみましょう!

これだけでも,十分カッコ良いアニメーションなのですが,せっかくなのでもう少し細かく,自分好みに定義してみます.

そんなときは,自分でアニメーションを定義して .slide のように扱えるようにしましょう.

その場合は, extension を使って構造体 (またはクラスや列挙型) を拡張してしまいます.

.transition() の引数型は AnyTransition なので...

と,このように拡張し使用することができます.

ここまでは先ほどと挙動はなんら変わりません.

ここからは,今作成した moveAndFade をさらに細かく仕様を決めていきましょう.

まずは,動きをシンメトリックにしてみました.

.move(edge: .trailing) は,Trailing (右端) からフレームインアウトするようにしています.

他にも, .top .bottom  .leading が使用できます.

ここで,フレームインとアウト,異なる動きを実装したい場合は AnyTransition.asymmetric(insertion: , removal: ) を利用します.

以下のような使い方です.

return も追記されましたが,Computed propatyを覚えていれば不思議がることはないでしょう.

これで非対称なアニメーションが定義できました!

Step X. プロジェクトを整理する

ここまで,本チュートリアルを追ってきた方はプロジェクトファイルが乱雑になってきていませんか?

ここで整理しておきましょう.

本来であれば,こういったアプリやソフトウェアを設計する段階が明確にあり,プロジェクトはある程度整理されているのですが,チュートリアルでは見切り発車のようにコーディングを始めてしまったため,コードが乱雑になっています,

したがって

このような感じで,Badge関連はBadges/に,Hike関連はHikes/に,のように整理(グループ化)します.(一部ファイルは省略して記載しています)

新しいディレクトリ(グループ)の作成は,作成したいディレクトリ構造(ここでは親ディレクトリであるLandmarks)にカーソルを合わせダブルタップ,その中の「New Group」からできます.

第5回:おわりに

今回はアニメーションの定義の仕方について学びました.

魅力的なアプリは,クールなアニメーションが用いられていることも少なくありません.

ただ,アニメーションを取り入れすぎるとウザくなったりするので,使用量をうまく調整して使っていきましょう.

さて,次回からは今まで作成してきたビューを統合し,一つのアプリにまとめ上げていきます!

日本語版SwiftUIチュートリアル


スポンサードリンク