ビデオ/ gif形式での透明性のサポートが必要なため、webpを使用しています。私の問題は、アニメーションが終了したら要素を非表示にする必要があることです。ハードコーディングせずに、要素がいつ発生したかを正確に把握できるかどうかわかりません（低速のハードウェアで不整合が発生する可能性があります）。
PNGシーケンスをループする前は、パフォーマンスが良くなかったので、可能であればこの形式を使用したいと思います。
私はJavaScriptを使用していますが、現在は次のようなタグでJavaScriptを使用しています。
<img src="../../../assets/animations/anim.webp">
現在、これは不可能です。おそらく最善の方法は、画像の読み込みイベントにリスナーを追加し、タイマーをGIFアニメーションと同じ長さに設定することです。（この回答と同様）
<img onload="stopImage();" id="myImg" src="../../../assets/animations/anim.webp">
そしてJSでは：
function stopImage() {
setTimeout(
() => document.getElementById('myImg').src = "../../../assets/staticImage.png"
, 6700);
}
ネットワークの読み込み時間は大きく異なりますが、再生速度の変動は、短時間のアニメーションで大幅に異なることはありません。細かいレベルの制御が必要な場合は、JSを使用してアニメーションを手動で制御する必要があります。以前にPNGシーケンスで行っていたように、またはこの回答でCSSスプライトマップを使用して推奨されているように。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加