如果我有这样的 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;
例如,对于颜色,您可以将它与颜色组件一起使用。假设我们有具有属性 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
等:
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下个版本自带)
在源和目标之间的任意点手动设置过渡,或为它们设置动画。
关于javascript - 使用 JavaScript 手动单步执行 CSS 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17220503/