document.createElement（）樣式圖像不起作用

Question

檢查下面的代碼。 在名為createElement的函數中，我正在從images數組中獲取隨機圖像，但問題是我正在使單個圖像具有動畫效果。

我的主要目標是使用這4張圖像中的隨機圖像制作動畫，而不是像現在這樣使用單個圖像。 我該如何解決？

 var maxElements = 20; var duration = 4000; var toAnimate = []; var radius = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight; var distance = radius / 4 <= 250 ? 250 : radius / 4; //var images = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']; var images = ['https://preview.ibb.co/gZfv09/img2.jpg', 'https://image.ibb.co/bDCBOU/img5.jpg', 'https://preview.ibb.co/gZfv09/img2.jpg', 'https://image.ibb.co/bDCBOU/img5.jpg']; console.log(images); var createElements = (function() { var fragment = document.createDocumentFragment(); for (var i = 0; i < maxElements; i++) { var el = document.createElement('div'); el.classList.add('particule'); el.style.images = images[anime.random(0, 4)]; toAnimate.push(el); fragment.appendChild(el); } document.body.appendChild(fragment); })(); var animate = function(el, i) { var angle = Math.random() * Math.PI * 3; anime({ targets: el, translateX: [0, Math.cos(angle) * distance], translateY: [0, Math.sin(angle) * distance], scale: [{ value: [0, .1], duration: 4000, easing: 'easeOutBack' }, { value: 0, duration: 4000, delay: duration - 8000, easing: 'easeInBack' } ], offset: (duration / maxElements) * i, duration: duration, easing: 'easeOutSine', loop: true }); } toAnimate.forEach(animate); 

 .particule { position: absolute; top: 5%; left: 10%; width: 70rem; height: 70rem; margin: -.5rem 0 0 -.5rem; border: 1px solid currentColor; transform: scale(0); background-image: url('https://preview.ibb.co/gZfv09/img2.jpg'); background-size: cover; background-repeat: no-repeat; background-color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script> <div class="particule"> <img id="img-1" src=""> <img id="img-2" src=""> </div> 

Answer 1

您非常接近，您只需要設置styles的backgroundImage屬性即可。

我已經更新了隨機選擇部分，以避免嘗試訪問不存在的images索引的索引。

 var maxElements = 20; var duration = 4000; var toAnimate = []; var radius = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight; var distance = radius / 4 <= 250 ? 250 : radius / 4; //var images = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']; var images = ['https://preview.ibb.co/gZfv09/img2.jpg', 'https://image.ibb.co/bDCBOU/img5.jpg', 'https://preview.ibb.co/gZfv09/img2.jpg', 'https://image.ibb.co/bDCBOU/img5.jpg']; console.log(images); var createElements = (function() { var fragment = document.createDocumentFragment(); for (var i = 0; i < maxElements; i++) { var el = document.createElement('div'); el.classList.add('particule'); var selectedImage = Math.floor(Math.random() * images.length); el.style.backgroundImage = `url('${images[selectedImage]}')`; // template literal toAnimate.push(el); fragment.appendChild(el); } document.body.appendChild(fragment); })(); var animate = function(el, i) { var angle = Math.random() * Math.PI * 3; anime({ targets: el, translateX: [0, Math.cos(angle) * distance], translateY: [0, Math.sin(angle) * distance], scale: [{ value: [0, .1], duration: 4000, easing: 'easeOutBack' }, { value: 0, duration: 4000, delay: duration - 8000, easing: 'easeInBack' } ], offset: (duration / maxElements) * i, duration: duration, easing: 'easeOutSine', loop: true }); } toAnimate.forEach(animate); 

 .particule { position: absolute; top: 5%; left: 10%; width: 70rem; height: 70rem; margin: -.5rem 0 0 -.5rem; border: 1px solid currentColor; transform: scale(0); background-image: url('https://preview.ibb.co/gZfv09/img2.jpg'); background-size: cover; background-repeat: no-repeat; background-color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script> <div class="particule"> <img id="img-1" src=""> <img id="img-2" src=""> </div> 

Answer 2

你的

el.style.images = images[anime.random(0, 4)]; 

需要有效-並非現在。 沒有“ .images”樣式屬性

另外anime.random（0,4）不會返回0到3之間的值，這是您想要的

這有效

el.style.backgroundImage = "url("+rnd(images)+")";

加入

var rnd = function(arr) {
  return arr[Math.floor(Math.random()*arr.length)];
}

 var maxElements = 20; var duration = 4000; var toAnimate = []; var radius = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight; var distance = radius / 4 <= 250 ? 250 : radius / 4; var images = ['https://lorempixel.com/output/people-qc-640-640-7.jpg', 'https://lorempixel.com/output/people-qc-640-640-6.jpg', 'https://lorempixel.com/output/people-qc-640-640-9.jpg', 'https://lorempixel.com/output/people-qc-640-640-1.jpg']; var rnd = function(arr) { return arr[Math.floor(Math.random()*arr.length)]; } var createElements = (function() { var fragment = document.createDocumentFragment(); for (var i = 0; i < maxElements; i++) { var el = document.createElement('div'); el.classList.add('particule'); el.style.backgroundImage = "url("+rnd(images)+")"; toAnimate.push(el); fragment.appendChild(el); } document.body.appendChild(fragment); })(); var animate = function(el, i) { var angle = Math.random() * Math.PI * 3; anime({ targets: el, translateX: [0, Math.cos(angle) * distance], translateY: [0, Math.sin(angle) * distance], scale: [{ value: [0, .1], duration: 4000, easing: 'easeOutBack' }, { value: 0, duration: 4000, delay: duration - 8000, easing: 'easeInBack' } ], offset: (duration / maxElements) * i, duration: duration, easing: 'easeOutSine', loop: true }); } toAnimate.forEach(animate); 

 .particule { position: absolute; top: 5%; left: 10%; width: 70rem; height: 70rem; margin: -.5rem 0 0 -.5rem; border: 1px solid currentColor; transform: scale(0); /* background-image: url('https://lorempixel.com/output/people-qc-640-640-7.jpg'); */ background-size: cover; background-repeat: no-repeat; background-color: red; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script> <div class="particule"> <img id="img-1" src=""> <img id="img-2" src=""> </div>