使用内置动画:
抱歉不行
转换的内部结构不会暴露给 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';
}
一个简单的演示(使用 Chrome 或 Aurora 23 来查看滑块,滑块在 FF 23 的下一个版本中提供)。
小提琴
在源和命运之间的任何点手动设置过渡,或为它们设置动画。