【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.jscallbackに用意されている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.

ちなみにbegindelayが指定されている場合、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.jscallbackに用意されているcompleteを使用します。

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

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

DEMO

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

最後に

anime.jsは今回ご紹介したcallbackの他に多くの機能が提供されています。今後使用する中でおすすめの機能があればこういった形でご紹介していければと思います!

以上、anime.jsでアニメーション開始時・終了時にスクリプトを実行する方法のご紹介でした!

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。