精灵动画的实现，H5+JS+CSS3实现七夕言情教程-慕课网

精灵动画的实现

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!!!!

任务

打开index.html文件，在代码的23行填入相应代码，通过定义个CCS3的样式规则，让人物开始进行帧动画切换

    /*规定 @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)

?不会了怎么办

||

index.html
Swipe.js
pageA.css
style.css

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>慕课七夕主题</title> <link rel='stylesheet' href='style.css' /> <link rel='stylesheet' href='pageA.css' /> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="Swipe.js"></script> </head> <style type="text/css"> .charector { position: absolute; left: 6%; top: 55%; width: 151px; height: 291px; background: url(http://img1.sycdn.imooc.com//55ade248000198ae10550582.png) -0px -291px no-repeat; } .slowWalk { /* 填入动画样式规则 */ } /* 普通慢走 */ @-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"> <div class="a_background_top"></div> <div class="a_background_middle"></div> <div class="a_background_botton"></div> </div> </li> <li> 页面2 </li> <li> 页面3 </li> </ul> <div id="boy" class="charector"></div> <div class="button"> <button>点击开始动画</button> </div> </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(); // 修正小男孩的正确位置 $boy.css({ top: pathY - boyHeight + 25 }); // ========================== // 增加精灵动画 // ========================== $('button').click(function(){ // 增加走路的CSS3关键帧规则 $boy.addClass('slowWalk'); }); </script> </body> </html>

///////// //页面滑动 // ///////// /** * [Swipe description] * @param {[type]} container [页面容器节点] * @param {[type]} options [参数] */ function Swipe(container) { // 获取第一个子节点 var element = container.find(":first"); var swipe = {}; // li页面数量 var slides = element.find("li"); // 获取容器尺寸 var width = container.width(); var height = container.height(); // 设置li页面总宽度 element.css({ width: (slides.length * width) + 'px', height: height + 'px' }); // 设置每一个页面li的宽度 $.each(slides, function(index) { var slide = slides.eq(index); // 获取到每一个li元素 slide.css({ width: width + 'px', height: height + 'px' }); }); // 监控完成与移动 swipe.scrollTo = function(x, speed) { // 执行动画移动 element.css({ 'transition-timing-function' : 'linear', 'transition-duration' : speed + 'ms', 'transform' : 'translate3d(-' + x + 'px,0px,0px)' }); return this; }; return swipe; }

/*背景图*/ .a_background { width: 100%; height: 100%; position: absolute; } .a_background_top{ width: 100%; height: 71.6%; background-image: url("http://img1.sycdn.imooc.com//55addf6900019d8f14410645.png"); background-size: 100% 100%; } .a_background_middle{ width: 100%; height: 13.1%; background-image: url("http://img1.sycdn.imooc.com//55addf800001ff2e14410118.png"); background-size: 100% 100%; } .a_background_botton{ width: 100%; height: 15.3%; background-image: url("http://img1.sycdn.imooc.com//55addfcb000189b314410138.png"); background-size: 100% 100%; }

* { padding: 0; margin: 0; } ul, li { list-style-type: none; } /*主体部分*/ #content { width: 100%; height: 100%; /* top: 20%; */ overflow: hidden; position: absolute; } .content-wrap { position: relative; } .content-wrap > li { float: left; overflow: hidden; position: relative; } button { width: 100px; height: 50px; } .button { position: absolute; bottom: 0; }

提问题

提交

其他问答

查看更多本节问答

写笔记

公开笔记

提交

||

3-2 精灵动画的实现