用JavaScript控制CSS Animations(动画)和Transitions(过渡)(2)_H5之家

// Makes an array of the current percent values

// in the animation

var keyframeString = [];

for(var i = 0; i < length; i ++)

{

keyframeString.push(keyframes[i].keyText);

}

// Removes all the % values from the array so

// the getClosest function can perform calculations

var keys = keyframeString.map(function(str) {

return str.replace('%', '');

});

复制代码

这里keys是一个包含所有动画关键帧数值的数组。

改变实际的动画（终于！）

在循环动画演示过程中，我们需要两个变量：一个用来跟踪从最近的起始位置开始移动了多少度，另一个用来跟踪从原来的起始位置开始移动了多少度。我们可以使用setInterval函数(在环形移动度数时消耗的时间)改变第一个变量。然后我们可以使用下面的代码，当单击该按钮时更新第二个变量。

totalCurrentPercent += currentPercent;

// Since it's in percent it shouldn't ever be over 100

if (totalCurrentPercent > 100) {

totalCurrentPercent -= 100;

}

复制代码

然后我们可以使用以下函数，在之前我们获得的关键帧数组里，找出与当前总百分比值最接近的关键帧值。

function getClosest(keyframe) {

// curr stands for current keyframe

var curr = keyframe[0];

var diff = Math.abs (totalCurrentPercent - curr);

for (var val = 0, j = keyframe.length; val < j; val++) {

var newdiff = Math.abs(totalCurrentPercent - keyframe[val]);

// If the difference between the current percent and the iterated

// keyframe is smaller, take the new difference and keyframe

if (newdiff < diff) {

diff = newdiff;

curr = keyframe[val];

}

return curr;

}

复制代码

要获得新动画第一关键帧的位置值，我们可以使用JavaScript的方法。然后我们根据这个值，删除原来的关键帧定义，重新定义该关键帧。

for (var i = 0, j = keyframeString.length; i < j; i ++) {

keyframes.deleteRule(keyframeString[i]);

}

复制代码

接下来，我们需要把圆的度数值转换成相应的百分比值。我们可以通过第一关键帧的位置值与3.6简单的相乘得到(因为10 0 * 3.6 = 360)。

最后，我们基于上面获得变量创建新的规则。每个规则之间有45度的差值，是因为我们在绕圈过程中拥有八个不同的关键帧，360(一个圆的度数)除以8是45。

// Prefix here as needed

keyframes.insertRule("0% {

-webkit-transform: translate(100px,100px) rotate(" + (multiplier + 0) + "deg)

translate(-100px,-100px) rotate(" + (multiplier + 0) + "deg);

background-color:red;

}");

keyframes.insertRule("13% {

-webkit-transform: translate(100px,100px) rotate(" + (multiplier + 45) + "deg)

translate(-100px,-100px) rotate(" + (multiplier + 45) + "deg);

}");

...continued...

复制代码

然后我们通过setInterval重置当前百分比值来使它可以再次运行。注意上面使用的是WebKit前缀，为了使它兼容更多的浏览器，我们需要做一些UA的嗅探来确定采用哪个前缀：

var browserPrefix;

navigator.sayswho= (function(){

var N = navigator.appName, ua = navigator.userAgent, tem;

var M = ua.match(/(opera|chrome|safari|firefox|msie)\/?\s*(\.?\d+(\.\d+)*)/i);

if(M && (tem = ua.match(/version\/([\.\d]+)/i))!= null) M[2] = tem[1];

M = M? [M[1], M[2]]: [N, navigator.appVersion,'-?'];

M = M[0];

if(M == "Chrome") { browserPrefix = "webkit"; }

if(M == "Firefox") { browserPrefix = "moz"; }

if(M == "Safari") { browserPrefix = "webkit"; }

if(M == "MSIE") { browserPrefix = "ms"; }

})();

复制代码

如果你想进一步研究，可以访问Russell Uresti和相应的案例。

Animations(动画)转成Transitions(过渡)
正如我们所看到的，使用JavaScript可以很方便的操作CSS transitions(过渡)。如果使用CSS animations(动画)最终没能得到想要的结果，你可以试着把它变成css transitions(过渡)来实现。从CSS代码来看他们大约有相同的代码量，但使用transiton可以更容易地设置和编辑。

将CSS animations(动画)转换成CSS transitions(过渡)的最大问题是，当我们把animation-iteration转换成与之等效的transition命令时，Transitons(过渡)没有直接等效命令。

关于我们的旋转演示，有一个小技巧就是用x来分别乘以transition-duration和rotation(译者：分别包括X轴和Y轴的旋转值)。然后你需要使用样式类来触发这个动画，因为如果你在元素上直接改变这些属性，将不会有过渡效果。你需要给元素添加类名来触发过渡(模拟动画)。

在我们的例子中，我们在页面加载时实现：

执行效果：

利用CSS矩阵

你也通过CSSMatrix来操作CSS animations(动画)。比如：

var translated3D =

new WebKitCSSMatrix(window.getComputedStyle(elem, null).webkitTransform);

复制代码

但是这个过程可能有些混乱，尤其对于那些刚刚开始使用CSS animations(动画)的。

想获取更多CSS矩阵的信息，请（虽然帮助不太大），这个工具可以让你操作矩阵的值，或关于这个主题的。

重置CSS animations(动画)

实现这个技巧的方法可以从CSS Tricks找到。

动动脑筋

在开始编码前，就思考和规划过渡或动画如何执行，应该是减少你的问题和达到你想要的效果的最佳途径。好过你在遇到问题时google搜索解决方案！虽然在这篇文章中总结的技术和技巧，不一定是你在项目中创建动画的最佳方案，但值得你尝试着了解一下（师兄我也只能帮到这里了……）。

比如这个小例子仅通过html和css就解决了问题，你可能开始会想着使用JavaScript去解决。

我们想让一个不停旋转的图形当鼠标悬停时反方向旋转。你可能跳过这篇文章讲解的内容直接使用animationIteration事件来实现这个动画。然而，一个更有效更好的方案是是使用CSS和添加内容元素。

技巧是获取旋转图形旋转速度x，当鼠标悬停时，让其父元素以2倍x的速度反方向旋转(在相同的位置)。两个方向的旋转相互作用，最终得到想要的反向旋转的效果。

执行效果：
相同的概念用在StackOverflow的这个例子中。

相关链接

你可能会感兴趣的相关东东。
Animo.js - 用于管理CSS动画的强大小工具

Thank God We Have A Specification! - Smashing Magazine上的关于transition技巧的文章

总结

1. getComputedStyle 对于操作CSS transitions(过渡)很有帮助

2. transitionEnd及其相关事件对于使用JavaScript操作CSS transitions(过渡)和animations(动画)非常有帮助

3. 通过使用JavaScript获取样式表可以更改当前CSS animation的值，但操作比较复杂。

4. 通常情况下使用JavaScript操作CSS transitions(过渡)比操作CSS animations(动画)要更容易。

5. 处理CSS矩阵比较痛苦，尤其对于初学者来说。

6. 思考应该做什么和规划如何做，是动画编码的关键。

转载自：齐舞团