0

介绍

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

4

1 回答 1

0

这是一个错误,但显然已修复

于 2019-10-13T14:23:11.160 回答