Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

JavaScript创建CSS3动画时间轴

  CSS3的animation使用keyframes的表达式在样式表中的格式比较奇怪,以前的文章中我有介绍过如何操作样式表,但是这么奇怪的样式在样式表中又是如何对象化的呢?如果我们能找到keyframes在样式表中的对象化接口就完全可以用JavaScript来控制它!
  一个keyframes的定义是由两层大括号组成的,比如 @keyframes test {
  0% {color:red;}
  100% {color:blue;}
}
  keyframes之所以是复数形式就是因为它里面还包含很多子样式,这些子样式可以称为keyframe。在Chrome控制台的代码提示中可以找到这个。

  这意味着keyframe和keyframes都存在对象化接口,然后我们顺着styleSheet的操作方式去摸索就可以找到这两个对象的实例。并且可以对其做,创建、删除、修改,等操作。普通的CSS样式是从sheet直接到rule,rule就包含选择器和样式了。而这两个对象是从sheet到keyframes再到keyframe。keyframe就相当于普通CSS样式的rule,它没有选择器部分,只包含一个百分比值和一个组样式。而keyframes是容纳keyframe的容器,它没有选择器和样式,但是有一个name属性,比如上面的样式中keyframes的name属性就为test,这个属性用于在animation中调用的。我就不做太多文字介绍,看下面的演示和相关的注释更容易明白~

<script>
onload=function(){
  var token,style,sheet,rule,test;
  //创建style对象,并获取关联的sheet对象
  style=document.createElement("style");
  document.head.appendChild(style);
  sheet=style.sheet;
  //创建一个名为test的keyframe(webkit需要前缀)
  var token=window.WebKitCSSKeyframesRule?"-webkit-":"";
  sheet.insertRule("@"+token+"keyframes test {}",0);
  test=sheet.cssRules[0];
  //循环生成每一帧,并添加进test中
  for(var i=0;i<=100;i++){
    //计算玫瑰曲线路径 r=sin(5θ)
    var θ=Math.PI*2*i/100,
        r=Math.sin(5*θ)*100,
        x=Math.sin(θ)*r|0,
        y=Math.cos(θ)*r|0;
    //创建帧(方法有浏览器差异)
    (test.insertRule||test.appendRule).call(test,i+"% {}");
    //设置帧样式
    test.cssRules[i].style.transform=
    test.cssRules[i].style.WebkitTransform=
      "translateX("+x+"px) translateY("+y+"px)";
  };
  //生成一组元素,每个间隔20ms
  for(var l=50,i=0;i<l;i++)setTimeout(function(){
    //创建div并添加基本样式
    var div=document.createElement("div");
    document.body.appendChild(div);
    div.style.width="20px";
    div.style.height="20px"
    div.style.position="absolute";
    div.style.top="120px";
    div.style.left="120px";
    div.style.background="#000";
    div.style.opacity=(1-this/l)*0.3; //透明度逐渐降低
    div.style.borderRadius="10px";
    //让div播放test这个动画
    div.style.animation=
    div.style.WebkitAnimation=
      "test 10s linear infinite";
  }.bind(i),i*20);
};
</script>
网名:
3.80.32.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^