通过JavaScript访问和修改CSS3动画

原文:Accessing & Modifying CSS3 Animations with Javascript By Joe
翻译:yCoder.com

昨天Chris Heilmann在Mozilla博客上写了篇关于使用javascript查找和生成CSS动画的文章,文中用了我的一个小例子,详细的说明了代码访问css动画的相关技术

Chris最后写道:

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

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

CSS Animation Store

这个主意是通过一个简单的接口来访问CSS动画,实际上之前的Morf.jsCSSA中都有这样的处理,大部分代码已经有了,只需要整整,按照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或者通过添加一个<style>标签到当前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);


− 一 = 8