AnimeJs随机发生一次

问题描述

我制作了一个函数，为animejs中的每个元素随机选择一种颜色，但是这种颜色无法正常工作。仅在启动动画时才选择随机颜色，并且在循环时颜色不会改变，对此有任何解决方法吗？

这是我所拥有的：

from itertools import product

player_cards = ["%s of %s"%(i,j) for i,j in product(range(1,11),("Hearts","Diamonds","Spades","Clubs"))]
random.shuffle(player_cards)

解决方法

前段时间我遇到了同样的问题。基于函数的值可以是随机的，但是随机性仅生成一次，并且值保持不变，并非每次动画运行时都生成。这对我来说并不明显，但是查看Function Generated Values的文档，您可以确认这一点。单击示例将重新启动动画并更改随机值。

为了解决这个问题，我创建了一个单独的函数来生成我的随机值，并创建全局变量来接收它们。然后，我使用loopComplete来调用该函数并更新随机值。这是我的代码示例。

let myRandom;

function randomN() {
    myRandom = Math.random();
    console.log(myRandom);
}

function animateMe() {
    let myAnim = anime({
        targets: 'body',//use myRandom value on any animatable property you like
        duration: 1000,easing: 'linear',direction: 'alternate',loop: true,loopBegin: function (anim) {
            randomN();
        }
    });
}

您也可以在动画结束后使用loopComplete调用random函数。如果您不使用loop，则可以使用begin和complete。

使用回调.complete的最优雅的方式：

function animate() {

    anime({
         targets: '.some-target',opacity: function () {
             // Generates random opacity each time animation is triggered
             return anime.random(0.25,1);
         },complete: function (anim) {
             // Re-triggers animation by callback.
             animate();
         } 
    });

}

这也可以与 anime.timeline（）一起使用。

anime.js random