通过JavaScript访问和修改CSS3动画

原文：Accessing & Modifying CSS3 Animations with Javascript By Joe 昨天Chris Heilmann在Mozilla博客上写了篇关于使用javascript查找和生成CSS动画的文章，文中用了我的一个小例子，详细的说明了代码访问css动画的相关技术 Chris最后写道：

我希望用一个CSSAnimations集合类，通过json或者string存放不同的动画，并使用他们的名字作为key，这样，可以动态的创建一个新的css rule，并添加到document或者rule集合中（以保证跨浏览器），思考中

听起来是个好主意，所以我写了一段JavaScript代码来实现这样的接口

CSS Animation Store

这个主意是通过一个简单的接口来访问CSS动画，实际上之前的Morf.js和CSSA中都有这样的处理，大部分代码已经有了，只需要整整，按照Chris所建议的接口风格写下来 从GitHub下载CSS Animation Store 下面是CSS Animation Store的基本接口（关于代码如何工作的信息），将代码放在标签之前，会创建一个全局的对象 CSSAnimations，这个对象包含所有当前可以使用的CSS动画 比如，获取名称为"spin"的动画，你可以按下面的代码：

var spin = CSSAnimations.spin;

参数spin是一个KeyframeAnimation实例，有下面的属性和函数：

• keyframes - KeyframeRule 集合
• original - 原始对象 WebKitCSSKeyframesRule 或者MozCSSKeyframesRule 类型
• getKeyframeTexts() - 返回所有keyframe文本集合, e.g. [‘0%’, ‘50%’, ‘100%’]
• getKeyframe(text) - 返回指定文字的 KeyframeRule 对象, e.g. getKeyframe(‘0%’)
• setKeyframe(text, css) - 设置新的CSS, e.g.setKeyframe(‘10%’, {background: ‘red’, ‘font-size’: ‘2em’})

可以看出，KeyframeRule提供了一些方法和函数，是对 WebKitCSSKeyframeRule 和MozCSSKeyframeRule （注意是frame不是frames）的封装，具有下面的属性和方法

• css - 该keyframe的css内容, e.g. {background: ‘red’, ‘font-size’: ‘2em’}
• keyText - 该帧的名称, e.g. 10%
• original - 原始对象 WebKitCSSKeyframeRule 或者MozCSSKeyframeRule

示例

获取动画中的所有帧

var spin = CSSAnimations.spin;
for(var i=0; i<spin.keyframes.length; i++)
console.log(spin.keyframes[i].css);

修改动画中的某一帧

var spin = CSSAnimations.spin;
spin.setKeyframe('10%', {background: 'red', 'font-size': '2em'});

反馈

给我博客或者GitHub留言，让我知道你的想法，我还开放了修改和增加的权限

使用原生JavaScript访问和创建CSS动画

如果你不想使用CSS Animation Store，或者只是想知道它的实现原理，可以参看下面的介绍

访问CSS动画

可以通过CSSOM访问keyframe动画，下面是我CSSA中的代码，用于访问指定的CSS动画

CSSAnimation.find = function(a) {
var ss = document.styleSheets;
for (var i = ss.length - 1; i >= 0; i--) {
try {
var s = ss[i],
rs = s.cssRules ? s.cssRules :
s.rules ? s.rules :
[];
for (var j = rs.length - 1; j >= 0; j--) {
if ((rs[j].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE || rs[j].type === window.CSSRule.MOZ_KEYFRAMES_RULE) && rs[j].name == a){
return rs[j];
}
}
}
catch(e) { /\* Trying to interrogate a stylesheet from another domain will throw a security error \*/ }
}
return null;
};

使用如下：

var animation = CSSAnimation.find("spin"); // Get the animation named 'spin'

返回对象为 WebKitCSSKeyframesRule 或者MozCSSKeyframesRule 类型，取决于你的浏览器

创建CSS动画

下面是我现在找到的唯一的创建动画的方法，有点变通，通过代码生成CSS文本，然后插入到CSSOM或者通过添加一个标签到当前document中 下面是在我的 Morf.js中的实现代码：

// Adds the CSS to the current page
addKeyframeRule = function(rule) {
if (document.styleSheets && document.styleSheets.length)
// Insert the style into the first attached stylesheet
document.styleSheets[0].insertRule(rule, 0);
else
{
// No attached stylesheets so append to the DOM
var style = document.createElement('style');
style.innerHTML = rule;
document.head.appendChild(style);
}
}

当你生成了你的CSS动画文本，你可以按下面的方式调用

var css = '@-webkit-keyframes spin { ... }';
addKeyframeRule(css);