发表于 & 归档在 CSS, HTML, JavaScript, Web, 翻译.

原文: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.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);

发表评论

电子邮件地址不会被公开。 必填项已用*标注


四 × = 20

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>