原来的时候写过一个小程序,里面有一个播放背景音乐的按钮(也是一个圆形的图片),它是一直在旋转的,当我们点击这个按钮的可以暂停或者播放背景音乐。当初的这个动画,是同事自己写的,我看到的时候以为是他在上面放了一个gif图呢。但是没有想到他是自己写的一个动画。早就想自己整理一下关于c3 动画的一些信息了,今天就在这里小小的总结一下,然后也算是自己的一个小的笔记。

  首先说c3动画,就必须提到animation 这个就相当于咱们写的background的一样,是一个c3新增的属性。这个就能写动画了。如果你做其他的动画,或者flash动画之类的,一定知道“帧”这个东西。这个是动画的一个过程,电脑是根据帧,然后渲染得到的一个连续的动画。看一小段代码:

.dong{
         animation: myfirst 2s linear 0s infinite alternate;
     }

这个就是我们写c3动画中经常用到的属性。这种连写的好处就是简单,但是对于初学者,这个简直就是噩梦,所以如果我们不熟练的话,可以一个一个的写,虽然比较繁琐,但是每个字段什么意思都是清晰可见的。

/**
             * animation-name    规定需要绑定到选择器的 keyframe 名称。。
             * animation-duration    规定完成动画所花费的时间,以秒或毫秒计。
             * animation-timing-function    规定动画的速度曲线。
             * animation-delay    规定在动画开始之前的延迟。
             * animation-iteration-count    规定动画应该播放的次数。
             * animation-direction    规定是否应该轮流反向播放动画。
             * **/

这里附上一个链接地址,里面有各个属性的属性值。点这里

  回到咱们上个问题,就是点击这个按钮的时候,需要将这个动画暂停,然后再次点击的时候开始这个动画。这个时候就需要用到一个叫做“animation-play-state”的属性了,他的属性值我们可以设置为“paused”。当然了实际的生产中,我们肯定是会给这个属性一个class类名的,然后通过控制这个class类名的添加和删除,来控制这个动画的暂停和开始。请看下面的一行css代码:

.pause {
    animation-play-state: paused;
}

好了,到了这里差不多css3 的动画就完了。下面附上一段我自己写的小的demo,但是需要注意的是,这个demo不是我上面说的那个旋转暂停的,但是这个有了更多的功能。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>css3 动画</title>
 6         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 7         <style type="text/css">
 8             @keyframes myfirst{
 9                 from {
10                     background: red;
11                     left: 0px;
12                     top: 40px;
13                     border-radius: 0;
14                     transform:rotate(0deg);
15                 }
16                 to {
17                     background: blue;
18                     left: 300px;
19                     top: 200px;
20                     border-radius: 50%;
21                     transform:rotate(360deg);
22                 }
23             }
24             .dong{
25                 animation: myfirst 2s linear 0s infinite alternate;
26             }
27             /**
28              * animation-name    规定需要绑定到选择器的 keyframe 名称。。
29              * animation-duration    规定完成动画所花费的时间,以秒或毫秒计。
30              * animation-timing-function    规定动画的速度曲线。
31              * animation-delay    规定在动画开始之前的延迟。
32              * animation-iteration-count    规定动画应该播放的次数。
33              * animation-direction    规定是否应该轮流反向播放动画。
34              * **/
35             .pause {
36                 animation-play-state: paused;
37             }
38             .big_box{
39                 width: 100px;
40                 height: 100px;
41                 background: red;
42                 text-align: center;
43                 line-height: 100px;
44                 position: absolute;
45                 left: 0px;
46                 top: 40px;
47             }
48         </style>
49     </head>
50     <body>
51         <div class="big_box">一个盒子</div>
52         <button class="button1">开始</button>
53         <button class="button2">暂停</button>
54     </body>
55     <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
56     <script type="text/javascript">
57         $(".button2").attr("disabled",true);
58         $(".button1").on("click.animation",function(){
59             $(".big_box").addClass("dong");
60             $(".button2").attr("disabled",false);
61         })
62         $(".button2").on("click.pause",function(){
63             $(".big_box").toggleClass("pause");
64         })
65
66     </script>
67 </html>

---------------------------------------华丽的分割线------------------------------------------------------

  既然咱们提到了动画,那就不能不提到动画的性能。既然说到性能那肯定又要说道浏览器的重绘,回流还有重布局。这样就很麻烦了,而且动画不只有css的动画,jquery也提供了一套动画。所以我就简单的总结了一下,如果不准确的话,请各位指教。

  操作一个dom元素的位置的话,可以使用css3的transform属性,这样会比jquery的动画快上不少。但是如果是操作一个dom元素的长宽的时候,尽量的使用jquery的动画。但是需要注意的一点是,jquery的动画只能设置数字值。也就是说你如果想动态的改变一个元素的背景颜色的话,只能使用css3的动画。jquery无能为力,最后附上一个链接,我感觉写的比较好。点这里还有这一个

10-09 16:37