2019
06/26

CSSアニメーションがつらいのでanime.jsを試してみた

アニメーションをCSSで書くようになって数年になりますが、凝ったアニメーションを書こうと思うと年々つらくなってきました。

ADs

CSSアニメーションのつらみ

イージングがつらい

transitionならcubic-bezierを書くだけでいいですが、@keyframesでイージングを書こうと思うとつらい。
というか人力で書けるものなのだろうか。

完了を検知して連続したアニメーションを実装するのがつらい

transitionend/animationendでクラスを足していってそのクラスに対してアニメーション…つらい。
transitionend/animationendではなくX秒のアニメーションAが終わったらX秒のディレイ後にアニメーションB…とやれば多少は楽ですが、妥協感と将来的に破綻する未来が見える。

CSSファイルがつらい

単純に行数が増えてつらい。

…この状況を打開するために、JSで制御してみてはどうかと思い、anime.jsというライブラリを試してみました。

anime.js • JavaScript animation engine

基本的な使い方

「anime.js」でググってみると実装例が見つかります。

公式ドキュメントの日本語訳もおすすめです。

anime.jsドキュメント翻訳

基本的な使い方や概要の説明は他サイトにお願いするとして、当記事では実際の案件で使いそうな実装を試しに書いてみました。

いずれもjQueryを併用していますので、anime.jsと共にロードします。

ローディングの実装

DEMO (4MBの画像を読み込んでいるので注意)

$(function){…});でロード完了までに見せるアニメーションを定義し、$(window).on(‘load’,function(){….});でロード完了後のエンディング的なアニメーションを定義しています。

ローディングのアニメーションは四角を回しているだけですが、無限ループするアニメーションであれば何でも使えると思います。

backgroundをアニメーションさせて無限ループさせる

DEMO

anime.jsはプロパティにbackground-positionを取ることもできるため、背景画像のサイズ分横方向に移動させてループすればエンドレスで背景が流れていくアニメーションが実装できます。

クリックやhoverでの停止を実装したい場合はinfiniteslidev2.jsの利用もご検討ください。
CSS3アニメーションによる無限スクロールを実装するjQueryプラグイン「infiniteslide.js v2」を作成しました

sliderProの切り替わる前後にアニメーションを追加

DEMO

sliderProは機能も豊富で使いやすいカルーセルプラグインです。slick.jsやbxSliderなどを使っていた時期もありましたが、最近はほぼsliderProを使っています。

そのまま設置するだけでは芸がないので、画像が切り替わる前後でアニメーションを入れてアイキャッチ的な演出を狙いました。

div.slidemaskの装飾を工夫すれば(たとえばカーテンや窓の画像にすれば面白いかも)もっと印象深くなると思います。

一文字ずつ出てくるテキスト

DEMO

テキストを一文字ずつspanで囲い、順番に拡大されて表示されます。
今回はspanで囲う部分もJavascriptでやってみました。

ポコポコ出てきて全部表示されたら一定時間でぷよぷよする

DEMO

横に並べた画像が順番にポコポコと出てきて、その後一定時間ごとにぷよぷよします。
前述の一文字ずつ出てくるアニメーションと考え方は同じです。

jQuery.inviewと併用する

DEMO

スクロールに応じて要素にアニメーションを実行します。
DEMOではあらかじめtranslateXで文字と写真をずらしておき、表示領域に入ったらtranslateXを0にします。

anime.jsではtransformを使う場合は初期値の設定が必要になるため、現在のtranslateXの値を取るためにコールバック関数を使用しています。

まとめ

実際に仕事で使いそうな実装をいくつか書いてみましたが、jQueryのanimate()に似ているものの記述はよりシンプル、動作は滑らかという印象です。
(めったに書かないけど)(アニメーション制作費が取れるわけでもないし)長尺のアニメーションが必要なときはanime.jsでやってみようかな、と思わせてくれるものでした。
引き続き使ってみたいと思います。

ADs

Post Comments

メールアドレスが公開されることはありません。

Comments

コメントはまだありません。