个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
所以我一直在玩 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="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>关于javascript - Anime.js backgroundColor 给出意想不到的结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44351075/
25
4
0
我在使用带有 vector STL 的迭代器时遇到了这个错误。 代码:- #include #include void print_vec(std::vector vec) { auto
JAVA:两个引用“p”&&“pp”之间有区别吗？ PrintStream p = new PrintStream(System.out); p.println("lol");
我尝试从主分支中拉出，但收到错误消息: $ git --no-optional-locks -c color.branch=false -c color.diff=false -c color.sta
我面临着一个让我抓狂的问题! 我有一个函数，这个: void load_weapons3(t_env *e, char *name, int x, t_weapon *w) { char
我正在尝试使用 CUDA 中的最小值、最大值、总和和平均值实现并行归约。 这是我目前的主要代码片段。 int main() { const auto count = 8; const
我知道 double free 或 corruption 错误通常是对 big 3 的违规，但在这种情况下，我找不到违规发生的地方。我有一个复制构造函数、析构函数和赋值运算符，适用于任何处理指针的东西
GTK+ 中的“focus”和“focus-in(out)-event”信号有什么区别？哪个先发射？它们与键盘(TAB)和鼠标点击有什么关系。他们互相依赖吗？ 我问这个是因为我想在顶层窗口中跟踪当前聚
*** glibc detected *** /home/ghoshs/workspace/Simulator/Debug/Simulator: double free or corruption (
#include #include #include #include using namespace std; #define MAX_WEIGHT 1000000 class Set {
我在服务器上有两个分支一个叫 R2 的分支和一个叫 DEV 的分支我无意中登录了错误的服务器，进入了存储库并执行了GIT pull 源开发但是存储库在 R2 上。所以我意识到我的错误然后尝试通过做一个
我有一个包含循环的大约 1000 个顶点和 3000 个边的有向图。 我试图从给定的顶点找到所有下游(出)路径。 使用以下 Gremlin 查询时 g.V(45712).repeat(out().si
使用 Delphi XE 2 我试图确定缩放方向以将缩放效果应用于图像(TImage)，但没有找到执行此操作的函数，并且图像的 OnGesture 事件中的 EventInfo 属性没有此信息. 我见
我正在尝试创建一个 Zoom_image 函数，它使用离散傅里叶变换来缩放灰度图像。如果图像大小小于或等于 4*4 但大小增加，我包含的代码可以工作。它给出“双重释放或损坏(出)中止(核心转储)”错误
当我执行 popAll 函数时，出现以下错误: 双重释放或腐败(出)中止(核心转储) 我想我已经将错误来源缩小到了这个函数。 IntegerStack 是我制作的一个简单的 ADT，其中包含一个名为
我有网络开发背景，我正在尝试创建类似于 this technique 的东西适用于 iOS(使用 Cocoa/Obj C)。我在谷歌搜索资源时遇到了很多困难，因为 iOS 中的“视差”往往指的是 iO
我想实现一个 faceted search对于我的一个项目。我正在使用 PHP5、Mysql 和 Symfony 1.4。显然社区指向Apache Solr这似乎正是我想要完成的。 问题是该网站将在不
我知道有 questions floating around当您没有提供明确的分支名称时，关于来自特定分支的 git pull，但是我想知道即使用户确实指定了不同的分支，是否也可以强制 pull 分支
我正在尝试将我的更改推送到 NAS 上的存储库。它以我无法理解的方式失败。 documentation声明默认情况下 push 仅适用于快进更新。很公平。所以我做了一个 git pull(我的 Rem
我刚开始使用 Oracle 的 Coherence 缓存，我注意到这一点:如果我在缓存中放入一个 ConcurrentHashMap 对象，当我检索它时，我可以看到它被转换为一个普通的 HashMap
我尝试创建一个连接到数据库的线程，从那里获取一些数据并打印到控制台。问题是当该线程完成时抛出异常: 双重免费或腐败(出局)中止(核心转储) 我尝试使用 sqlite3 和 pthread，但这两个并不
我是一名优秀的程序员,十分优秀！