css精灵动画
精灵动画的实现
CSS Sprites在国内很多人叫CSS精灵，其实这个技术不新鲜，原理就是：靠不断的切换图片让人感觉视觉上不断在变化，例如gif动画之类的效果
那么前端如何实现精灵效果？
传统的就是靠定时器不断去改变一个元素的background-image属性了，简单的来说就是靠不断的替换图片，但是值得注意的问题就是图片如果很多，加载会比较慢，会占用大量网络资源
大多数的做法就是把图片都合成一张大图再利用CSS的以下属性
background-image background-repeat background-position
组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置
这里我将采用最新的CSS3的动画实现。通过 CSS3我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
新增一个class类slowWalk，在这个类中定义一个animation，通过关键帧keyframes定义一些规则，就是如何取图片坐标
- slowWalk样式，用于定义一些动画参数，比如执行的时间、方式、算法、次数等等
- @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果
右边代码区域所示，为方便理解，解读一下样式的slowWalk类定义规则：
定义一个名为person-slow的@keyframes规则，@keyframes用百分比来规定变化发生的时间， 0% 是动画的开始，100% 是动画的完成，规则中有4个百分比值的变化，每个比值分别通过position获取一张图片，分别是0%,25%,50%,75%,100%。在950毫米内从0%-100%发生4次变化，采用的算法是steps(1, start)一帧一帧的切换，通过设置infinite参数每950毫秒不断循环
通过点击开始动画按钮，我们可以看到最终效果，完全靠CSS实现，非常nice!!!!
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html" charset="utf-8"> <title>mukeqixizhuti</title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="Swipe.js"></script> <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="pageA.css"> </head> <style type="text/css"> .charector{ width: 151px; height: 291px; background: url(http://img.mukewang.com/55ade248000198ae10550582.png) -0px -291px no-repeat; position: absolute; /*设置一个元素的坐标*/ left: 6%; top: 55%; } .slowWalk { /* 填入动画样式规则 */ /*规定 @keyframes 动画的名称。*/ -webkit-animation-name: person-slow; /*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/ -webkit-animation-duration: 950ms; /*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/ -webkit-animation-iteration-count: infinite; /*动画切换的方式是一帧一帧的改变*/ -webkit-animation-timing-function: steps(1, start); -moz-animation-name: person-slow; -moz-animation-duration: 950ms; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: steps(1, start) } /* 普通慢走 */ @-webkit-keyframes person-slow { 0% { background-position: -0px -291px; } 25% { background-position: -602px -0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: -0px -291px; } } @-moz-keyframes person-slow { 0% { background-position: -0px -291px; } 25% { background-position: -602px -0px; } 50% { background-position: -302px -291px; } 75% { background-position: -151px -291px; } 100% { background-position: -0px -291px; } } </style> <body> <div id="content"> <ul class="content-wrap"> <!-- 第一副画面 --> <li> <div class="a_background_top"></div> <div class="a_background_middle"></div> <div class="a_background_button"></div> </li> <!-- 第二个页面 --> <li>页面二</li> <!-- 第三个页面 --> <li>页面三</li> </ul> <div id="boy" class="charector slowWalk"></div> </div> <div class="button"> <button>点击开始动画</button> </div> <script type="text/javascript"> var swipe=Swipe($("#content")); //获取数据 var getValue =function(className){ var $elem=$(''+className+''); //走路的坐标 return { height:$elem.height(), top:$elem.position().top } }; //路的y轴 var pathY=function(){ var data=getValue('.a_background_middle'); return data.top+data.height/2; }(); var $boy=$("#boy"); var boyHeight = $boy.height(); console.log(pathY-boyHeight+25); console.log $boy.css({ top:pathY-boyHeight+25 }); // ========================== // 增加精灵动画 // ========================== $('button').click(function(){ // 增加走路的CSS3关键帧规则 $boy.addClass('slowWalk'); }); </script> </body> </html>
这里只是学习的一个记录，不给出完整代码。完整教程见：http://www.imooc.com/code/8898
给出精灵动画的实现代码：
.slowWalk {
/* 填入动画样式规则 */
/*规定 @keyframes 动画的名称。*/
-webkit-animation-name: person-slow;
/*规定动画完成一个周期所花费的秒或毫秒。默认是 0*/
-webkit-animation-duration: 950ms;
/*规定动画被播放的次数。默认是 1。 infinite(循环播放)*/
-webkit-animation-iteration-count: infinite;
/*动画切换的方式是一帧一帧的改变*/
-webkit-animation-timing-function: steps(1, start);
-moz-animation-name: person-slow;
-moz-animation-duration: 950ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: steps(1, start)
}
/* 普通慢走 */
@-webkit-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}
@-moz-keyframes person-slow {
0% {
background-position: -0px -291px;
}
25% {
background-position: -602px -0px;
}
50% {
background-position: -302px -291px;
}
75% {
background-position: -151px -291px;
}
100% {
background-position: -0px -291px;
}
}
通过对background-position的改变，实现图片的更换，这样只加载一张图片，会提高页面缓存的效率。
