#try!SwiftTokyo2025 Exploring SwiftUI Path Animations featuring Japan Symbol Quiz
この記事はtry!SwiftTokyo2025で発表したライトニングトークの「Exploring SwiftUI Path Animations featuring Japan Symbol Quiz」の内容をまとめたものです
今回の発表ではSwiftUIのPathのアニメーションの仕組みやその活用案についてトークしました
具体的にはまず冒頭で以下のアニメーションをSwiftUIのみでどのように実現するかを確認しました
このようなアニメーションをどのように実現しているのか、そしてその後のシンボルクイズの話についてまとめています
スライドはTestFlightで配布しているので、iOS/macOSアプリとしてダウンロードして、確認することができます(もちろんこのアプリはSlideKitに依存しています)
またこのスライドアプリのソースコードはGitHubで確認できます(Slidys)
そしてシンボルクイズの機能を切り出したSymbolKitもGitHubで確認できます(SymbolKit)
SwiftUIのPathのアニメーションの仕組み
上記のアニメーションの仕組みについて、簡単に確認します
手順としては以下のようになっています
- アニメーションしたいShapeのPathを用意する
- 今回の場合はSVGで用意したパスをSVG to SwiftUIなどのツールでSwiftUIのPathに変換しています
- 将来的にはこの変換ロジックも自作できるようにしたいです
- 上記のSwiftUIのPathをセットしたShapeを定義し、そのShapeにAnimatable Protocolを適用させる
- Animatable Protocolは特定の値について実行するSwiftUIのアニメーションを意図した形で滑らかに実行されるようにするために設定するものです(設定しなくてもアニメーション自体は動かないですが、意図した形で実行されない時があります)
- 今回の場合は、アニメーションの進捗率を管理する
animationProgressをanimatableDataとして設定しています
- PathのtrimmedPathの関数を使用し、fromの引数は0、toの引数にアニメーションの進捗率を渡し、Pathがtrimされるようにする
- animationProgressの値を0→1に変更し、Pathが徐々に表示されるようにアニメーションを実行する
上記の実装はこちらのSymbolKitに記述されています(コード)
基本的にSwiftUIのPathさえ用意できれば、この仕組みでどのような形もアニメーションさせることができます
また同様な仕組みで他のプラットフォーム、例えばFlutterなどでも同様の機能を実現することができます
シンボルクイズ – SwiftUIのPathのアニメーションの活用
ではこのPathのアニメーションはどのような場面で活用できるでしょうか？
もしかすると今までmp4やLottieなどで実現していた機能の一部をそのようなリソースファイルやライブラリを用いずに、Swiftのコードだけで実現できるかもしれません
私はそのような実用的な面ではなく、少しエンタメ的な活用方法を考えてみました
最近日本ではJapan-\(region).swiftというSwiftの地域イベントが実施されています
この記事の執筆時点では以下のイベントが実施されています
上記の一部のイベントに参加し、LTをしましたが、そのうちの一部のイベントで「技術的な内容だけではなく、その地域の内容を踏まえたLTをしてくれると嬉しい」というオファーがあったので、それを考慮して、シンボルクイズという企画を思いつき、その後いくつかのイベントでLTとして実施しました
現在上記の動画にある4つのイベントでシンボルクイズを実施し、かつそれぞれのイベントで同じ内容ではなく、少しずつ技術的にもアップデートを追加して、違う内容のものを実施しました
ちなみに今回のtry!SwiftTokyo2025のLTで実施したJapanSymbolQuizは以下です
外国の方も多く参加するということで、外国の人でもわかりやすそうで、かつ春という季節を考慮して、桜を選びました
また桜の特徴であるピンクの色が正解時にわかりやすく表示できるように、正解発表時に正解用のViewをoverlayできる機能をSymbolKitも追加しました
まとめ
今回はSwiftUIのPathのアニメーションについて、try!SwiftTokyo2025のLTで話した内容についてまとめました
技術的にものすごいdeepな話題ではないですが、シンボルクイズを含めて色々な応用が効く面白いテーマだなと思いました
またまだ色々と発展させていく余地もあるかなと思います
またJapan-\(region).swiftについて、この記事執筆時点での次のイベントはNagoya.swiftです
私もLT枠で参加予定なので、興味のある人はぜひ名古屋で会いましょう！
普段の東京の勉強会だとあまり会わないような方とコミュニケーションすることができて、楽しいと思います！
