一個(gè)關(guān)于anime.js的問題

話不多說上代碼!

$(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, //循環(huán)
        // direction: 'alternate', //返回狀態(tài)
        autoplay: false
    });
    $('.btn').on('click', function () {
        change_ani.restart();
    }); });

這是我寫的一個(gè)關(guān)鍵詞切換效果，但是問題是每次點(diǎn)擊按鈕觸發(fā)動畫的時(shí)候他都是取得同一個(gè)隨機(jī)數(shù)，這樣就達(dá)不到我要的效果，我希望是每次點(diǎn)擊按鈕的時(shí)候它都取不同的值.
簡單點(diǎn):
我希望每次點(diǎn)擊按鈕時(shí)都取一個(gè)隨機(jī)數(shù)，而不是只能取一次隨機(jī)數(shù)下次點(diǎn)擊的時(shí)候還是那個(gè)隨機(jī)數(shù)。

問題已經(jīng)解決
主要還是我的代碼嚴(yán)謹(jǐn)度不夠高
anime的對象需要純在于 監(jiān)聽事件中才可以  放在事件外面就無法監(jiān)聽到對應(yīng)的值進(jìn)行改變 看來我還要把js的基礎(chǔ)好好鞏固下了。
解決代碼如下:
    $(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, //循環(huán)
            // direction: 'alternate', //返回狀態(tài)
            autoplay: false,
            complete:function () {
                // anime.remove('.item');
                a=anime.random(2,5);
                b=anime.random(15,20);
                console.log(a,b)
            }
        });
        change_ani.restart();
    });
});

回答

編輯回答

我以為

你得按照語法分析自己的代碼。很明顯，你在頁面就緒之后，聲明了一個(gè)變量 change_ani，它是一個(gè) anime 對象，其中顏色的部分是一個(gè)隨機(jī)顏色。當(dāng)動畫開始時(shí)，就從當(dāng)前顏色變化到隨機(jī)顏色。你每次點(diǎn)擊都是這個(gè)效果。

如果你需要讓每次點(diǎn)擊都隨機(jī)到另一種顏色，那你自然需要每次點(diǎn)擊都改變一下目標(biāo)顏色。

2018年1月18日 20:19

編輯回答

莫小染

沒用過anime.js，但我覺得你可能把問題想復(fù)雜了……

上代碼：

<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; /* 隨手寫了個(gè)，后期可優(yōu)化 */
}

$(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);
    });
});

2017年4月15日 14:23