所以我一直在玩 Anime.js。我正在使用这段简短的代码来尝试使用单个字母 id 为 a 的 div 标签设置动画。
anime({
targets: "#a",
translateX: 250,
color: "#fff",
backgroundColor: "hsl(200, 50%, 50%)",
loop: true,
direction: 'alternate',
easing: 'easeInOutQuad'
});
问题是(至少对我来说在 Google Chrome 中)该元素似乎是在动画开始时以黑色的 css background-color 开始的，尽管事实并非如此在 css 中专门设置任何背景颜色。一些挖掘似乎表明元素的默认背景颜色是 rgba(0,0,0,0) 并且 Anime.js 在使用带有 alpha channel 的颜色时似乎不起作用。我认为这解释了为什么动画以黑色开始。在 css 中为元素设置背景颜色似乎可以解决这个问题，即使它有一个 Alpha channel ，但 Alpha channel 在动画中永远不会被尊重。
但是如果我想将背景色 rgba(0,0,0,0) 动画化为纯色怎么办？由于 Anime.js 相当新，因此 Google 搜索不会显示太多信息。有谁知道我可以在 Anime.js 中完成这项工作吗？如果 Anime.js 不支持此功能，有人知道另一个支持此功能的 JavaScript 动画库吗？我需要支持使用 Alpha channel 对颜色进行动画处理。
为了方便起见，这里是我到目前为止所组合的演示 in a quick CodePen.
最佳答案
迟到的答案，但我目前正在玩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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e08a9195859299a0d2ced2ced4" rel="noreferrer noopener nofollow">[email protected]</a>" 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>关于javascript - Anime.js backgroundColor 给出意想不到的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44351075/