一个关于anime.js的问题

Question

话不多说上代码!

$(function(){
    var change_ani = anime({
        targets: ['.item'],
        color: {
            value: function () {
                var r = parseInt(Math.random() * 255);
                var g = parseInt(Math.random() * 255);
                var b = parseInt(Math.random() * 255);
                return 'rgb(' + r + ',' + g + ',' + b + ')';
            }
        },
        easing: "easeOutExpo",
        // loop:true, //循环
        // direction: 'alternate', //返回状态
        autoplay: false
    });
    $('.btn').on('click', function () {
        change_ani.restart();
    }); });

这是我写的一个关键词切换效果，但是问题是每次点击按钮触发动画的时候他都是取得同一个随机数，这样就达不到我要的效果，我希望是每次点击按钮的时候它都取不同的值.
简单点:
我希望每次点击按钮时都取一个随机数，而不是只能取一次随机数下次点击的时候还是那个随机数。

问题已经解决
主要还是我的代码严谨度不够高
anime的对象需要纯在于 监听事件中才可以  放在事件外面就无法监听到对应的值进行改变 看来我还要把js的基础好好巩固下了。
解决代码如下:
    $(function(){
    $('.btn').on('click', function () {
        var a=5;
        var b=20;
        var change_ani = anime({
            targets: ['.item'],
            translateX:function (target) {
                // return target.getAttribute('data-left');
            },
            translateY:function (target) {
                // return target.getAttribute('data-top');
            },
            fontSize: function () {
                return anime.random(a,b);

            },
            color: {
                value: function () {
                    var r = parseInt(Math.random() * 255);
                    var g = parseInt(Math.random() * 255);
                    var b = parseInt(Math.random() * 255);
                    return 'rgb(' + r + ',' + g + ',' + b + ')';
                }
            },
            easing: "easeOutExpo",
            // loop:true, //循环
            // direction: 'alternate', //返回状态
            autoplay: false,
            complete:function () {
                // anime.remove('.item');
                a=anime.random(2,5);
                b=anime.random(15,20);
                console.log(a,b)
            }
        });
        change_ani.restart();
    });
});

Answer 1

你得按照语法分析自己的代码。很明显，你在页面就绪之后，声明了一个变量 change_ani，它是一个 anime 对象，其中颜色的部分是一个随机颜色。当动画开始时，就从当前颜色变化到随机颜色。你每次点击都是这个效果。

如果你需要让每次点击都随机到另一种颜色，那你自然需要每次点击都改变一下目标颜色。

Answer 2

没用过anime.js，但我觉得你可能把问题想复杂了……

上代码：

---

<button id="btn">你好友</button>
<div class='item'>AABBCCDD</div>

#btn {
    width: 500px;
    height: 200px;
}
.item {
    width: 500px;
    height: 200px;
    border: 1px solid red;
    line-height: 200px;
    text-align: center;
    font-size: 5em;
    transition: color .5s ease-in; /* 随手写了个，后期可优化 */
}

$(function(){
    function getRandClr() {
        return parseInt(Math.random() * 255);
    }
    $('#btn').on('click', function () {
        var r = getRandClr(),
            g = getRandClr(),
            b = getRandClr();
        var color = 'rgb('+r+','+g+','+b+')';
        $('.item').css('color', color);
    });
});