snapsvgライブラリを使ったモーフィングアニメーションを作ってみよう
こんにちわ。nap5です。
snapsvgライブラリを使ったモーフィングアニメーションのデモを紹介したいと思います。
snapsvgライブラリはこちらです。
デモページはこちらです。
デモコードはこちらです。
snapsvgを使用する際はnpmからインストールしたものに加え、cdnから配布されているファイルもインクルードしておきます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
そうすると、もろもろのトラブルが回避できました。
アニメーションしている部分ですが、以下のコードになります。
gsapのsetのようなものが見当たらないため、animateの0秒指定でごまかしました。ここらへんの柔軟性はgsapがハンディだと思います。
animationendのタイミングでコールバックをとれるので、次のアニメーション関数を呼び出しています。最後のアニメーションで最初のアニメーション関数を呼ぶことで、ぐるぐる繰り返しています。
useEffect(() => {
const pathDom = Snap(pathDomRef.current);
const f = function () {
pathDom.animate({d: paths.step2.unfilled}, 500, mina.easeinout, a);
};
const e = function () {
pathDom.animate({d: paths.step2.inBetween}, 600, mina.easeinout, f);
};
const d = function () {
pathDom.animate({d: paths.step2.filled}, 0, mina.easeinout, e);
};
const c = function () {
pathDom.animate({d: paths.step1.filled}, 300, mina.easeinout, d);
};
const b = function () {
pathDom.animate({d: paths.step1.inBetween}, 600, mina.easeinout, c);
};
const a = function () {
pathDom.animate({d: paths.step1.unfilled}, 500, mina.easeinout, b);
};
a();
}, []);オープニングで画像とかを後ろに置いておいてrevealとかしても映えるんじゃないかと思います。
あとはページトランジションにもマッチすると思います。
最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。
最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。
また、コースの内容紹介記事は以下になります。
簡単ですが、以上です。
この記事が気に入ったらサポートをしてみませんか？