使用 JavaScript 手动单步执行 CSS 动画

如果我有一个像这样的 CSS 关键帧动画

@keyframes flash-red {
  50% {
    background: #f00;
  }
}

#goflash.anm-flash {
  animation-name: flash-red;
  animation-duration: .5s;
  background: rgba(255, 0, 0, 0);
}

然后我总是可以像这样触发动画：

var gf = document.querySelector("#goflash");
gf.classList.remove("anm-flash");
setTimeout(function() {
  gf.classList.add("anm-flash");
}, 50);

有什么方法可以覆盖动画持续时间/动画计时函数以依赖于 JavaScript？我希望能够说这样的话gf.animate("flash-red", "50%")来制作背景gf红色，或gf.animate("flash-red", "75%")让背景更像rgba(255, 0, 0, .5).

理想情况下，相同的技术也适用于过渡。gf.transitionTo("new-class", "50%")会将元素显示为已过渡一半。

显然flash-red这只是一个例子——我希望能够对任何动画做到这一点。

使用内置动画：

很不幸的是，不行

JavaScript 不会公开转换的内部结构，因此您无法利用它来设置或获取数据。这是有目的的 - 如果数据were暴露它意味着效率降低，因为 JavaScript 事件队列必须更新。由于 JS 是单线程的，并且动画在单独的线程上运行，因此您很快就会失去它在单独线程上内部编译的代码中运行的好处。

不过，您可以自行进行转换。这涉及到你自己的计算转换。

这并不像听起来那么复杂，因为您只需使用插值公式来实现您想要的动画效果：

current = source + (destination - source) * fraction;

例如，对于颜色，您可以将其与颜色组件一起使用。假设我们有具有属性的颜色对象r, g, b:

var color1 = {r: 100, g: 200, b: 55};  //some random color
var color2 = {r: 0,   g: 100, b: 100};

var fraction = 0.5; //0-1

当前的 RGB 为：

r = color1.r + (color2.r - color1.r) * fraction;
g = color1.g + (color2.g - color1.g) * fraction;
b = color1.b + (color2.b - color1.b) * fraction;

对于职位：

 var pos1x = 100;
 var pos1y = 100;
 var pos2x = 500;
 var pos2y = 250;

var fraction = 1; //0-1

posX = pos1x + (pos2x - pos1x) * fraction;
posY = pos1y + (pos2y - pos1y) * fraction;

等等。

通过创建包装函数，您可以轻松计算这些函数，甚至将它们放入循环中以对其进行动画处理。

设置颜色 1 和颜色 2 之间的过渡的示例函数。 风格可以是ie。backgroundColor, color etc.:

function setColor(element, style, color1, color2, fraction) {

    var r = color1.r + (color2.r - color1.r) * fraction;
    var g = color1.g + (color2.g - color1.g) * fraction;
    var b = color1.b + (color2.b - color1.b) * fraction;

    element.style[style] = 'rgb(' + (r|0) + ',' + (g|0) + ',' + (b|0) + ')';
}

(the r|0只是去掉小数部分）。

对于位置，例如：

var pos1 = {x: 0, y: 0};
var pos2 = {x: 200, y: 0};

function setPosition(element, pos1, pos2, fraction) {

    var x = pos1.x + (pos2.x - pos1.x) * fraction;
    var y = pos1.y + (pos2.y - pos1.y) * fraction;

    element.style.left = x + 'px';
    element.style.top = y + 'px';
}

一个简单的演示（使用 Chrome 或 Aurora 23 查看滑块，滑块在 FF 23 的下一版本中出现）。

Fiddle http://jsfiddle.net/epistemex/gsd8809b/

在源和目标之间的任何点手动设置过渡，或为它们设置动画。