[Javascript] animate機能でstepsを使う方法

2023年11月17日

CSS Javascript

eyecatch 便利すぎるJavascriptのanimate機能ですが、cssのanimation機能をそのままの記述で使えないことが分かりました。 複数のアニメーションパターンをコマ送りアニメで再生する、cssアニメのsteps機能をJavascriptのanimateで実装しようと思ったら、思った通りの設定でできなかったので、備忘録しておきます。 参考 : CSSを使って簡単なspliteキャラクターアニメを実装

cssのsteps機能について

改めてcssのstepsがどういう機能なのかカンタンに説明しておくと、 コマ送りアニメのパターンを横(または縦)に並べておいてそれをスムースな移動アニメーションではなく、一定の分割数をコマ送りのようにスライド表示してくれる機能です。 htmlを使って説明をすると、 まず、次のような同じサイズの要素を複数用意します。
1
2
3
<div class='sample'> <div>1</div> <div>2</div> <div>3</div> </div><style> .sample{ display:flex; gap:10px; } .sample > *{ border:1px solid black; width:80px; height:80px; display:flex; align-items:center; justify-content:center; font-size:3.0em; font-weight:bold; } </style> これに次のcssを適用すると、コマ送りアニメーションが簡単にできます。
1
2
3
.sample{ animation: 3.0S steps(3) infinite img-anim; width:300px; height:80px; position:absolute; top:0px; left:0px; } @keyframes img-anim{ to { transform:translateX(-100%); } } CSS記述の、"animation: 3.0S steps(3) infinite img-anim;"この箇所にあるsteps(3)の箇所で、全体サイズを3つに区切ってその秒数でスムースな移動ではなく、カクカクとして段階的に移動させてくれる機能です。 サンプルでは、分かりやすいように要素の間にgapを入れたり、paddingを入れていましたが、通常は、ぴったりサイズを並べておくと計算がしやすくて便利です。

JavascriptのAnimateに置き換え

上記のサンプルアニメーションをJavascriptに置き換えると次のようになります。 ※見た目が同じなので、コードのみ記載 document.querySelector('.sample').animate([ { transform: "translateX(-100%)" } ],{ duration : 3000, iterations: Infinity, easing : `steps(3 , end)`, }) 上記のcssのanimationと@keyframesを消して、上記Javascriptに切り替えると、同じ動きになります。 animateのoption指定が、cssとは少し違っているのが分かります。

余談

stepsは、animation-timing-functionで指定されるのですが、それがJavascriprtでは、easingという指定になります。 iterationsも、animation-iteration-countと同じ意味ですが、inifiniteをInfinityという、グローバル変数になっているので、要注意です。 ※この指定をミスると、次のようなエラーが表示されてしまいます。 steps()内の指定で"end"というのがありますが、これを"start"に切り替えると、開始と終了位置が変わります。(1コマ分後ろにズレます。) 基本的には"end"(または、書かない)がいいようです。 Uncaught TypeError: Failed to execute 'animate' on 'Element': iterationCount must be non-negative

あとがき

Javascriptの便利なanimate機能は、正確にはわかりませんが、おそらくjQueryから取り込まれた機能だと思っています。 とにかく便利で、cssのアニメーション終了タイミングなどを取得して色々なイベントに繋げたりできるので、ゲームなどを作るときには必須かもしれません。 ちなみに、animateの終了イベントを取る方法は、以前書いたブログを参考にしてください。 [Javascript] style記述せずにできるanimate機能がメタクソ便利 とにかく、今回のstepsの設定方法がリファレンスサイトに書かれていなくて、思いの外時間を取られてしまったので、ブログに残しておいたので、困った人がこのブログを見つけてくれることを祈ります。

このブログを検索

ごあいさつ

このWebサイトは、独自思考で我が道を行くユゲタの少し尖った思考のTechブログです。 毎日興味がどんどん切り替わるので、テーマはマルチになっています。 もしかしたらアイデアに困っている人の助けになるかもしれません。