・AnimateCCの使用バージョンについて訂正しました。・キーフレームアニメーション以外でも作成できる場合があるので追記しました。今回はAnimateCCで作成することにしました。作成されるjsファイルがES6形式ではないため、WebpackやVue.jsなどに組み込むのが思ったより大変なことになりました。手軽に使いたい!!と思い調べていくと、AnimateCCはSVGアニメーションが書き出せるとのこと。今回はこれを使うことにしました。Animator」を使用する方法が多いのですが、2019年3月時点で拡張機能が使えなくなったのか、インストールができませんでした。Exporter」を使用します。Exporter」をインストールします。Animation」が追加されています。Exporter」が使えるようになります。Exporter」を使用時はCC2015がオススメです。いうとCC2019ではアニメーションがうまく書き出せなかったから。CC2015だと正しく動作するようです。Professionalになります。追記Adobeのブログにて、最新メジャーバージョンの2つ前までがダウンロード可能となることが発表されました。これによりCC2015は使用できなくなります。最新バージョンでも正常に書き出せる場合がありますのでお試しください。アニメーションのflaファイルを開くアニメーション作成ではCCのバージョンはいくつでも大丈夫です。以下の設定・作業が必要です。追記キーフレームアニメーションにしなくても正常に作成できる場合があります。(クラシックトゥイーンで作成した場合にて確認)通常通り作成してうまく書き出せない場合はキーフレームアニメーションもお試しください。SVG」になっていることを確認しましょう。OKであれば「Export」ボタンを押すと、flaファイルと同じ名前のsvgファイルが書き出されます。更新ボタンを押すことで、書き出されたSVGアニメーションが確認できます。Vue.jsに組み込む星画像をクリック→星が弾けるアニメーション→画面遷移VueファイルにSVGアニメーションを組み込みます。今回は以下のような作りにしました。画面クリックでSVGアニメーションが始まり、アニメーション終了後に$router.pushで画面遷移コードについて画面をクリックしたらSVGアニメーションが書かれたコンポーネントを表示します。objectタグからsvgファイルを呼ぶこともできますが、読み込みに時間がかかるためコンポーネントに直書きすることにしました。SVGアニメーションの終了を検知する方法がわからなかったので、setTimeoutで遷移先に飛ばしています。以下は星画像とSVGアニメーションを配置するコード。</script>以下はSVGアニメーションを配置したコンポーネント(TopEffect.vue)。書き出されたSVGファイルをほぼコピペして置いています。encoding="utf-8"?>とあるので、ここだけ除いてください。100"と入れて大きさを調整しました。</template>できたものコチラ所感ちょっと無理やりなところもありますが、やりたいことを実現できたのでよかったです。SVGアニメーションなら小さめにつくっても大きさ調整できてしかもキレイなのでありがたいですね。Qrunch.netサーバー提供フィードバックを送信する。