原来的时候写过一个小程序,里面有一个播放背景音乐的按钮(也是一个圆形的图片),它是一直在旋转的,当我们点击这个按钮的可以暂停或者播放背景音乐。当初的这个动画,是同事自己写的,我看到的时候以为是他在上面放了一个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无能为力,最后附上一个链接,我感觉写的比较好。点这里,还有这一个
更多专业前端知识,请上 【猿2048】www.mk2048.com