我有一些图像帧,我需要一个接一个地显示,以创建动画。我通过设置 background-image
属性在循环中的每个帧上。我之所以这样做,是因为css提供的其他属性可以帮助我实现我想要的效果。这是密码,
var el = document.getElementById("animation");
loop=()=>{
var now=performance.now();
var TimeCompleted=now - StartTime;
if(TimeCompleted>=this.Interval) {
StartTime=now-(TimeCompleted%this.Interval);
el.style.backgroundImage="url("+ images[frame].src + ")";
frame+=delta;
if(frame<=-1 || frame>=frames)
{
el.dispatchEvent(new Event("animationend"));
return;
}
}
requestAnimationFrame(loop);
}
还有css
# animation{
height:100%;
width:100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
我以前从未见过有人制作这样的动画,所以我想知道这是否是最好的方法,或者这种方法是否会导致任何性能问题等。
暂无答案!
目前还没有任何答案,快来回答吧!