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

您非常接近，您只需要设置backgroundImage的{{1}}属性即可。

我已经更新了随机选择部分，以避免尝试访问styles索引中不存在的索引。

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;
}

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-q-c-640-640-7.jpg', 'https://lorempixel.com/output/people-q-c-640-640-6.jpg', 'https://lorempixel.com/output/people-q-c-640-640-9.jpg', 'https://lorempixel.com/output/people-q-c-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-q-c-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>

document.createElement（）样式图像不起作用

2 个答案: