便利すぎる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
0 件のコメント:
コメントを投稿