壮Swift13この記事は「Swift入門記事連載」の一部です。Watchのアプリは、Swift(またはObjective-C)の開発フレームワーク「WatchKit」を用いて作成できます。Watchで動作するパーティクルアニメーションのデモを紹介しながら、WatchKitにおけるアニメーション作成方法を説明します。Watch上で動作するパーティクルアニメーションのデモです。最初は3色のパーティクルが順番に表示されますが、画面下部のスライダーで特定の色に固定できます。ソースコードはGitHubにて公開してあります。Watchにおけるアニメーション表示についてWatchKitにおいては、プログラム上から表示オブジェクトを追加する、オブジェクトの位置座標を指定する、オブジェクトを別のオブジェクトの上に重ねるといったことができません(※)。やってアニメーション表現をするのかというと、連番の画像をパラパラ漫画のように切り替えて表示することで実現します。WatchKitではこの連番アニメーションを取り扱いやすくするための仕組みが用意されています。1.2パーティクルアニメーションの作成では具体的なアニメーションの作り方を見ていきましょう。Swiftを使った初めてのiOSアプリ開発入門」をご覧ください。App]を選択すると、プロジェクト内にWatchKit開発用のファイルが書き出されます。InterfaceController.swiftがメインとなるプログラム、interface.storyboardがストーリーボード(※)です。ストーリーボードは表示オブジェクトをXcodeでレイアウトするためのものです。アニメーション素材の作成プロジェクトの準備ができたので、アニメーション素材を準備します。CCの「ムービーの書き出し」機能を使用します。1)、フレームレートは60fpsにしました。連番画像の数字は0から始める必要があるので、p-0.png、p-1.png...という名前にしておきます(※2)。Watchの画面サイズは縦340px横272px、縦390px横312pxの2種類です。今回は後者のサイズに合わせて作成しました。CCで連番画像を書き出すと、数字は1から始まります。Extensionフォルダーではありません)内にあるImages.assetsを開き、ドラッグアンドドロップして登録しておきます。アニメーションの表示つづいて、作成したアニメーション素材を実際に画面上に配置します。プロパティの「BackGround」で画像の番号を抜いた名前(今回は「p-」)を指定。Load]にチェックを入れる。Watchの実機、またはiOSシミュレータを使ってアニメーションが確認できます。Watchにアプリが自動でインストールされます。Watchを選択して確認できます。返し回数を設定できます。再生が始まれば何も制御できないgifアニメとは違い、ちょっとしたインタラクションを加える事が可能です。200コマ目から300コマ目の間を2秒かけてアニメーションさせるには、startAnimatingWithImagesInRange()メソッドを使って以下のような記述になります。デモにおいてはアニメーションの再生範囲を変更することでパーティクルの色を変化させています。Watchにおけるアニメーションの実装は多くの制約があります。Watchアプリの需要が徐々に高まってくる中で、今回のような工夫やノウハウが必要となりそうです。平成29年1月16日に内容をメンテナンスしています。メディアアートを学ぶ。MEDIA、Qiita他)、Twitterで積極的に情報を発信中。Lynda.comやSchooの講師も務める。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。