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

标签 javascript html css css-animations

如果我有这样的 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 公开,因此您无法利用它来设置或获取数据。这是有目的的——如果数据暴露,这将意味着效率降低,因为必须更新 JavaScript 事件队列。由于 JS 是单线程的,并且动画在单独的线程上运行,您很快就会失去它在单独线程内部以编译代码运行的好处。

但是您可以进行自己的转换。这涉及到你自己的计算转换。

这并不像听起来那么复杂,因为您只需为要设置动画的内容使用插值公式:

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

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

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 等:

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) + ')';
}

(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';
}

一个简单的demo(使用Chrome或者Aurora 23看slider,slider在FF 23下个版本自带)

Fiddle

enter image description here

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

关于javascript - 使用 JavaScript 手动单步执行 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17220503/

相关文章:

html - 当我将此 ul 添加到 div 时,它之前的 div 位置较低。我怎样才能让他们坐在同一高度

javascript - 具有调整大小事件的等高行

javascript - JSON - 查找对象的长度

javascript - Chart.js 将折线图向左对齐

Javascript:转发采用可变数量参数的函数调用

html - 在 100% div 中并排安装 2 个 div

html - 如何设置选择标签中文本内部选项之间的间距

JQuery:简单幻灯片的问题

javascript - 如何在高阶函数中将参数传递给命名回调

javascript - Node Js 和 Angular Js 如何从服务器向客户端发送请求