Anime.js backgroundColor給予意想不到的結果

所以我一直在玩Anime.js。我正在使用這一小段代碼嘗試使用單個字母ID a對div標記進行動畫製作。Anime.js backgroundColor給予意想不到的結果

anime({ 
    targets: "#a", 
    translateX: 250, 
    color: "#fff", 
    backgroundColor: "hsl(200, 50%, 50%)", 
    loop: true, 
    direction: 'alternate', 
    easing: 'easeInOutQuad' 
});

的問題是（至少對我來說谷歌瀏覽器）的元素似乎在動畫開始使用CSS的黑色background-color開出，即使它不具有任何背景色專在CSS中設置。有一點挖掘似乎表明，該元素的默認背景顏色是rgba（0,0,0,0），並且使用alpha通道的顏色時，Anime.js似乎不起作用。我認爲這解釋了爲什麼動畫以黑色開始。爲css中的元素設置背景色似乎可以解決問題，即使它具有alpha通道，但alpha通道在動畫中永遠不會被使用。

但是如果我想從rgba(0,0,0,0)的背景色變成純色，該怎麼辦？由於Anime.js是相當新的，Google搜索沒有透露很多信息。有沒有人知道我可以在Anime.js中完成這項工作的任何方式？如果Anime.js不支持此功能，有誰知道另一個JavaScript動畫庫呢？我需要alpha通道動畫顏色的支持。

爲了方便起見，這裏有我所拼湊演示到目前爲止 in a quick CodePen.

來源

2017-06-04 Aaron Beaudoin

這是我不清楚anime.js是否支持透明度。但是，您可以使用JQuery動畫，並安裝JQuery UI。

$('#a').animate({ 'background-color': 'rgba(0, 0, 0, 0.7)' },1000);

你可以看到How can I animate the opacity of the background of the div

來源

2017-06-04 05:42:55

的鏈接並不爲我工作。你也知道一個比jQuery具有更好性能的庫嗎？ –

@AaronBeaudoin修正了鏈接，不，我很抱歉，但我不知道更好的表現。 –

看看這個：https://greensock.com/gsap – Gerard

晚答案完整的答案，但我目前正在與anime.js玩，發現你的問題。您可以爲背景動畫定義一個起始值。

$(document).ready(function() { 
 
    anime({ 
 
    targets: ".box", 
 
    translateX: 250, 
 
    color: "#fff", 
 
    backgroundColor: ["hsl(250, 75%, 50%)", "hsl(200, 50%, 50%)"], 
 
    loop: true, 
 
    direction: 'alternate', 
 
    easing: 'easeInOutQuad' 
 
    }); 
 
});

div { 
 
    width: 20px; 
 
    height: 20px; 
 
    background: red; 
 
    position: relative; 
 
    left: 0; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <script data-require="[email protected]" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.js"></script> 
 
    <script src="script.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    </head> 
 

 
    <body> 
 
    <h1>Anime.js animate Background Color</h1> 
 
    <div class="box"></div> 
 
    </body> 
 

 
</html>

來源

2017-11-23 17:26:55 Gerfried

Anime.js backgroundColor給予意想不到的結果

回答

相關問題