问题描述

介绍

TLDR：https ://codesandbox.io/s/elated-jennings-6budz 。为什么红色与铬中的蓝色不一样？这是一个错误吗？

我使用的是chrome版本：76.0.3809.132。在 Firefox 中，一切都按预期工作。

问题

我使用 waapi 来实现依赖于自定义时间轴的动画（例如滚动位置作为时间轴）。这个概念如下：

waapi 允许您通过将iterationStart选项设置在 0 和 1 之间的某个位置（假设动画只有一次迭代）来中途开始动画。当动画立即暂停时，我们得到请求的帧。当下一个输入进入时，我们会覆盖最后一帧。

因此，当我们得到 0.5 的输入时，我们将使用以下代码：

//           test keyframes
elem.animate({marginLeft: ["0px", "600px"]}, {
  duration: 100, 
  easing: "linear",
  fill: "both", 
  iterations: 1, 
  iterationStart: 0.5 // input
}).pause()

即使我们每 1/60 秒设置一个这样的帧，这也很有效。然而，问题出现了，因为我们想要缓和动画（例如easing: "ease"not linear）。这引入了奇怪的故障，动画每次都以相同的进度跳跃（进度 = 迭代饱和度 / 输入）。例如，第一个跳转是0.148使用easeas easing 函数。有人可以解释这种行为吗？这是一个错误吗？

我遇到了以下相关性。0.148 * 2轻松的ease功能刚刚结束0.5。为了计算这个，我使用bezier-easing图书馆。这里的例子：https ://runkit.com/embed/1wetjf7jjb2s 。我不知道这是否相关，但我想我会分享我的发现。

这里显示问题的代码和框链接： https ://codesandbox.io/s/elated-jennings-6budz 。请注意不要让它一次运行太久而不重新加载。

蓝色 div 使用修复来显示预期结果。为此，我保留但习惯性地使用如上所示easeing: "linear"的库（和代码中）简化每个输入。bezier-easing

标签： javascriptanimationweb-animationsweb-animations-api

javascript - 在 chrome 中使用自定义时间线的 Waapi 缓动被窃听

问题描述

介绍

问题

解决方案

推荐阅读