WEBTODESIGN

Lottieのアニメーションをホバーで再生する【JavaScript】

ホバーした時にLottieのアニメーションを再生させたくて調べたので、共有します！

事前準備

事前に、必要なHTML・CSS・JSのファイルを準備します。

<div class="button"></div>

HTMLには、用意したアニメーションを表示するための枠を作っておきます。

.button{
    width: 50px;
    height: 50px;
}

CSSでは、アニメーションを表示する枠のサイズを指定しておきます。
枠のサイズが0pxだと、表示できませんからね！

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.6.6/lottie.min.js"></script>

Lottieのライブラリも読み込んでおきます。
最新のCDNのURLはCDNのBodymovinのページをチェックしてください。

Lottieアニメーションの読み込み

まずは、基本となるLottieのjsonファイルの読み込みです。

const button = document.querySelector('.button');
const anim = lottie.loadAnimation({
    container: button,
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: '../img/sample.json'
});

ホバーしたら再生したいので、「autoplay」は「false」にしておきます。
pathは、jsonファイルがある場所を指定します。適宜変えてください。

ホバーした際のアクション

Lottieのアニメーションを読み込んだら、ホバーした際のアクションを追加します。
数パターン試してみました。

① ホバーで再生し、外れても最後まで再生する

ホバーすると再生し、ホバーが外れても最後まで再生します。

button.addEventListener('mouseenter', () => {
    anim.stop();
    anim.play();
});

ホバー時のイベントは「addEventListener」の「mouseenter」で追加します。
ここで重要なのは、anim.stop()です。これがないと、最初のホバーしか反応しませんでした。

② ホバーで再生し、外れると再生がリセットする

ホバーすると再生し、ホバーが外れるとその場で再生が止まりリセットされます。

button.addEventListener('mouseenter', () => {
    anim.play();
});
button.addEventListener('mouseleave', () => {
    anim.stop();
});

ホバーを外れた時のイベントは「addEventListener」の「mouseleave」で追加します。
ホバーが外れた時にアニメーションがストップする記述です。

③ ホバーで再生し、外れると逆再生で戻る

ホバーすると再生し、ホバーが外れると逆再生で戻ります。

button.addEventListener('mouseenter', () => {
    anim.setDirection(1);
    anim.play();
});
button.addEventListener('mouseleave', () => {
    anim.setDirection(-1);
    anim.play();
});

anim.setDirection()は再生の向きを指定できます。1は通常、-1は逆再生です。
ホバーした際はDIrectionが１になり、外した際は-1になるコードを追加しています。

標準状態を好きなフレームで固定する

ホバーしていない状態が、ホバー開始の1フレームになってしまい、狙いとは違いました。なので、好きなフレームで再生できるメソッドを活用してみました。（これが正しい方法かどうかは不明です、、、。）

anim.goToAndStop(30, 30);

第一引数は開始のフレーム、第二引数は終わりのフレームです。第一引数と第二引数を同じにすることで、擬似的に好きなフレームで停止させるようにしています。

本当ならば、ホバーしていない時に表示したい状態をアニメーションの1フレーム目に持ってくると良いのだと思います！今回の私の場合は、もう何パターンか作ってしまっていて修正が手間だったので、JSで一発でできないかなぁとこの方法を使ってみました。

JSの全体像

今回私が実装したJSの全体像は以下です。

const button = document.querySelector('.button');
const anim = lottie.loadAnimation({
    container: button,
    renderer: 'svg',
    loop: false,
    autoplay: false,
    path: '../img/sample.json'
});
anim.goToAndStop(30, 30);
button.addEventListener('mouseenter', () => {
    anim.stop();
    anim.play();
});

参考になりましたら幸いです！

公式ドキュメント

さらに詳しく知りたい方は公式ドキュメントをご参照ください。

RECOMMENDATION

NEWEST