使用背景图像属性设置动画是否最佳?

ldfqzlk8  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(251)

我有一些图像帧,我需要一个接一个地显示,以创建动画。我通过设置 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;
}

我以前从未见过有人制作这样的动画,所以我想知道这是否是最好的方法,或者这种方法是否会导致任何性能问题等。

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题