Как плавно изменить фон (анимировать) в JavaScript?

Question

У меня есть 30 изображений, которые вместе составляют полный оборот 3D-модели.Я хочу отобразить анимацию в браузере.Я не могу использовать CSS animation, который в противном случае работал хорошо.Проблема с JavaScript мигает при загрузке следующего изображения.Есть ли способ сделать его более гладким?

<div id="image" style="width: 1920px; height: 1080px;">
</div>
<script>
    let suffix;
    let i = 0;
    let image = document.getElementById("image");
    function setSuffix(){
        suffix = ("0" + (i+1)).slice(-2);
        i++;
        i = i % 30;
        image.style.background = "URL('" + suffix + ".jpg')";
    }
    setInterval(setSuffix, 1000);
</script>

Answer 1

Возможно, вы можете использовать дополнительное изображение, загрузить его, а затем перенести его на передний план, используя z-index.Что-то вроде:

let suffix;
let i = 0;
let image1 = document.getElementById("image1");
let image2 = document.getElementById("image2");

// TIP: Remove these
let url1 = "https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/41667401_10155851253461762_5185170392754421760_n.png?_nc_cat=101&oh=beb534388a04dd5ea101bc9560fa5e24&oe=5C1F4FAD";
let url2 = "https://scontent-iad3-1.xx.fbcdn.net/v/t1.0-9/34661720_10155632057856762_4698625317663670272_n.jpg?_nc_cat=106&oh=dd89a8d15e587dba4b7fe8b3ea38143e&oe=5C1E5CC0";

function setSuffix(){
  // TIP: Uncomment this
  //imageUrl = ("0" + (i+1)).slice(-2) + ".jpg";
  
  if (i % 2 === 0) {
    imageUrl = url1; // TIP: Remove this.
    image1.style.background = `URL('${imageUrl}')`;
    image1.style.zIndex = "1";
    image2.style.zIndex = "0";
  } else {
    imageUrl = url2; // TIP: Remove this.
    image2.style.background = `URL('${imageUrl}')`;
    image2.style.zIndex = "1"; 
    image1.style.zIndex = "0";
  }

  i++;
}
setInterval(setSuffix, 1000);

#image1, #image2{
  position:absolute;
  top: 0px;
  left: 0px;
}

<div id="image1" style="width: 1920px; height: 1080px;"></div>
<div id="image2" style="width: 1920px; height: 1080px;"></div>