Question

所以我一直在玩Anime.js。我正在使用这一小段代码尝试使用单个字母ID为div的{{1}}代码设置动画。

问题在于（至少对我来说是Google Chrome）这个元素似乎是在动画开始时用css anime({ targets: "#a", translateX: 250, color: "#fff", backgroundColor: "hsl(200, 50%, 50%)", loop: true, direction: 'alternate', easing: 'easeInOutQuad' });黑色开始的，即使它没有特定的背景颜色在css中设置。有点挖掘似乎暗示元素的默认背景颜色是rgba（0,0,0,0），并且当使用带alpha通道的颜色时，Anime.js似乎不起作用。我认为这解释了为什么动画以黑色开头。为css中的元素设置背景颜色似乎可以解决问题，即使它有alpha通道，但动画中的alpha通道永远不会受到尊重。

但是如果我想从background-color的背景颜色动画到纯色怎么办？由于Anime.js相当新，因此谷歌搜索没有透露太多信息。有没有人知道我可以在Anime.js中使这个工作吗？如果Anime.js不支持此功能，有没有人知道另一个JavaScript动画库呢？我需要支持使用alpha通道设置动画颜色。

为方便起见，这里是我到目前为止所拍的内容的演示 in a quick CodePen.

Answer 1

我不清楚anime.js是否支持不透明度。但是，您可以使用JQuery UI安装JQuery动画。

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

您可以在How can I animate the opacity of the background of the div

中看到完整的答案

Answer 2

迟到的答案，但我现在正在玩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="jquery@2.2.4" 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>

Anime.js backgroundColor提供意外结果

2 个答案: