3-4 元素运动实现
本节编程练习不计算学习进度，请电脑登录imooc.com操作

元素运动实现

用关键帧可以实现精灵图的切换，同时通过background-size解决了自适应的问题，这样还是不够的，元素还仅仅只是在原地进行帧动画，要让一个元素动起来必须要配合元素坐标的变化

因此在实现上，让元素动起来：

运动 = 关键帧动画 + 坐标变化

关键帧动画我们已经实现了，那坐标的变化就很简单了，一般来说前端能用到的手段

  1. 元素.position定位，修改top,left坐标修改
  2. 通过css3的transform属性的translate

无论用那种需要记住的是元素的坐标 都是 position+translate的值的总和

圣诞主题我采用的是transition+position的处理

transition是css3引入的"过渡"属性，可以让css的属性值在一定的时间区间内平滑地过渡，考虑兼容性问题，这里会额外引入一个插件jquery.transit，这个就是具体封装了transition的CSS3过渡动画的实现

接下来代码部分就非常简单了

transition的使用与jQuery提供的animate()方法基本差不多，所以使用上很容易接受

参考右边的代码，让飞鸟执行一个飞的动作，可以这样用

$(".bird").transition({
    'right': "3rem",
}, 10000,'linear',function(){
    alert("结束")
});

只要给出position的坐标值，同时给出变化的时间就让元素动起来了，结合一下精灵动画，是不是看起来物体运动就是那么回事了？

具体的实现看右边编辑区

任务

点击运动按钮，通过transition方法，让"鸟"从右边飞出来，飞出右边3rem的位置，请在右边对应的68行区域写出对应的代码来

index.html 
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  6.     <title>圣诞主题</title>
  7.     <style type="text/css">
  8.     .bird {
  9.         min-width: 4rem;
  10.         min-height: 2rem;
  11.         top: 10%;
  12.         right: 0;
  13.         position: absolute;
  14.         z-index: 10;
  15.         background: url(http://img1.sycdn.imooc.com//55ade1700001b38302730071.png);
  16.         background-size: 300% 100%;
  17.     }
  18.  
  19.     .birdFly {
  20.         /*写法1*/
  21.         -moz-animation-name: bird-slow;
  22.         -moz-animation-duration: 400ms;
  23.         -moz-animation-timing-function: steps(1,start);
  24.         -moz-animation-iteration-count: infinite;
  25.  
  26.         /*写法2*/
  27.         -webkit-animation:bird-slow 400ms steps(3) infinite;
  28.     }
  29.  
  30.     @-webkit-keyframes bird-slow {
  31.         0% {
  32.             background-position: -0% 0%;
  33.         }
  34.         100% {
  35.             background-position: -300% 0%;
  36.         }
  37.     }
  38.  
  39.     @-moz-keyframes bird-slow {
  40.         0% {
  41.             background-position: -0% 0%;
  42.         }
  43.         50% {
  44.             background-position: -100% 0%;
  45.         }
  46.         75% {
  47.             background-position: -200% 0%;
  48.         }
  49.         100% {
  50.             background-position: -300% 0%;
  51.         }
  52.     }
  53.     </style>
  54.     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
  55.     <script type="text/javascript" src="http://img1.sycdn.imooc.com//down/55ac9ea30001ace700000000.js"></script>
  56. </head>
  57.  
  58. <body>
  59.     <div class="bird birdFly"></div>
  60.     <button>点击运动</button>
  61. </body>
  62. <script type="text/javascript">
  63.  
  64. $("button").on("click",function(){
  65.     /**
  66.      * 通过transition的方式改变运动
  67.      */
  68.     ？
  69. })
  70.  
  71.  
  72.  
  73.  
  74.  
  75. var docEl = document.documentElement,
  76.     resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
  77.     recalc = function() {
  78.         //设置根字体大小
  79.         docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px';
  80.     };
  81.  
  82. //绑定浏览器缩放与加载时间
  83. window.addEventListener(resizeEvt, recalc, false);
  84. document.addEventListener('DOMContentLoaded', recalc, false);
  85. </script>
  86.  
  87. </html>
  88.  
下一节