見出し画像

svgで実現するMorphing Revealアニメーションの実装について

nap5

こんにちわ。nap5です。


今回はsvgで実現するMorphing Revealアニメーションの実装について紹介したいと思います。

Twiiterにも投稿してみました。


以下のデモですが、不安定のため、zipにしたものも添付します。zipファイルダウンロード後、展開します。展開後のディレクトリに移動した後、以下のコマンド打つとデモが動きます。




$ cd 展開後のディレクトリ
$ yarn install
$ yarn dev


以下のcodesandboxのデモが見れない場合のフォールバックとしてrenderというホスティングサービスでデプロイしたものも用意しました。



デモサイトです。


デモコードです。


実現手順としては以下のようになります。

  1. アニメーションをキックするフラグを受け取る

  2. キックされたら、モーフィングする図形の初期位置や動きのタイムラインをgsapで定義し、アニメーションを実行する

  3. そのあとアニメーションフレーム（requestAnimationFrame）のコンテキストでnoise関数を介したspline（catmull-rom）曲線のsvgパスコマンドを変化させ続ける

  4. メインのタイムラインアニメーションが完了したタイミングでアニメーションフレームを停止させて、引数で受け取っている完了コールバックを実行し、呼び出し元にアニメーション終了通知を送る

  5. 呼び出し元は呼び出し先から完了通知を受け取った後、開幕させるメインコンテンツをオープンさせる


WebGLで実現できる方法もあると思いますが、svgで実現するときはこのようにできるといったサンプルの紹介でございました。


最近では、MENTAをはじめてみました。MENTAを使って提供していることを紹介している記事は以下になります。



また、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。




最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。



また、コースの内容紹介記事は以下になります。




簡単ですが、以上です。

この記事が気に入ったらサポートをしてみませんか？