【anime.js】アニメーション開始時／終了時に関数を実行する【callback】

こんにちは、Ryohei（@ityryohei）です！

本記事では、anime.jsでアニメーション開始時もしくは終了時に関数を実行する方法をご紹介しています。

anime.jsには豊富な機能が用意されていますが、今回はcallbackにフォーカスしたいと思います。

callbackはアニメーションが実行もしくは終了したタイミングで特定の処理を実行したいというときに有効な方法ですので、覚えておくと表現の幅が広がるのでおすすめです。

では、解説していきます。

事前準備

まずは検証用にサンプルを作成します。

今回は四角形の要素が丸くなるアニメーションを使って、アニメーションの開始時・終了時にそれぞれアラートを出す形で確認できるようにしたいと思います。

anime.jsを読み込む

anime.jsはJavaScriptのライブラリです。なのでCDNでライブラリ本体を読み込みます。もしインターネットに接続できない場合は、予めこちらでローカルにライブラリファイルを落としておき、それを読み込みましょう。

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

HTMLで要素を作成する

続いてHTMLで要素を作成します。後ほどid属性が「circle」の要素にアニメーションを設定します。

<div id="app">
    <span id="circle"></span>
</div>

CSSでスタイルを定義する

最後スタイルを定義します。

#circle {
    width: 200px;
    height: 200px;
    background-image: linear-gradient( 109.6deg,  rgba(104,183,249,1) 31.3%, rgba(176,248,200,1) 100.2% );
}

以上で事前準備は完了です！

では本題に戻りまして、アニメーション開始時／終了時にために関数を実行する検証用のスクリプトを作成していきましょう。

begin：アニメーション開始時に関数を実行する

まずはアニメーション開始時に関数を実行する方法から。

アニメーション開始時に関数を実行する場合はanime.jsのcallbackに用意されているbeginを使用します。

anime({
    targets: '#circle',
    easing: 'easeInOutSine',
    duration: 3000,
    borderRadius: ['0%', '50%'],
    begin: ()=> {
        //ここに処理を記述
        window.alert('Begin!');
    }
});

上記の実行結果を確認してみましょう。アニメーション開始時にアラートが表示されます。

DEMO

See the Pen
Callback Begin1 | anime.js by ryohei (@intotheprogram)
on CodePen.

ちなみにbeginはdelayが指定されている場合、delayの後で実行されます。試しにdelayを「3秒」を設定して実行してみましょう。

anime({
    targets: '#circle',
    easing: 'easeInOutSine',
    delay: 3000,
    duration: 3000,
    borderRadius: ['0%', '50%'],
    begin: ()=> {
        //ここに処理を記述
        window.alert('Begin!');
    }
});

下記がdelayを設定した際のデモです。delayの後に関数が実行されていることがご確認いただけるかと思います。

DEMO

See the Pen
Callback Begin2 | anime.js by ryohei (@intotheprogram)
on CodePen.

続いてアニメーション終了時に関数を実行する方法を見ていきましょう。

complete：アニメーション終了時に関数を実行する

アニメーション終了時に関数を実行する場合はanime.jsのcallbackに用意されているcompleteを使用します。

anime({
    targets: '#circle',
    easing: 'easeInOutSine',
    duration: 3000,
    borderRadius: ['0%', '50%'],
    complete: ()=> {
        //ここに処理を記述
        window.alert('Complete!');
    }
});

下記はcompleteを使用したデモになります。アニメーションが終了した後に関数が実行されていることがご確認いただけます。