运动框架

这两天在慕课网学习了一门课程即Js动画效果，循序渐进的做一个运动框架。可以实现多物体的同时运动，链式运动。

运动框架  move.js

 1         //startMove(obj,{attr1:itarget1,attr2:itarget2},fn)
 2         function startMove(obj,json,fn){
 3             
 4             clearInterval(obj.timer)
 5             obj.timer = setInterval(function(){
 6                 var flag = true;//假设所有都到达目标值
 7                 for(var attr in json){
 8 
 9                 //取当前值
10                 var icur = 0;
11                 if(attr == 'opacity'){
12                     icur = Math.round(parseFloat(getStyle(obj,attr)) * 100 );
13                 }
14                 else{
15                      icur = parseInt(getStyle(obj,attr));
16                 }
17 
18                 //定义速度
19                 var speed = (json[attr] - icur)/8;
20                 speed = speed > 0?Math.ceil(speed):Math.floor(speed);
21 
22                 //判断是否停止
23                 if(json[attr] != icur){
24                     flag = false;
25                 }
26                 if(attr == 'opacity'){
27                     obj.style.filter = 'alpha(opacity:'+(icur + speed)+')';
28                     obj.style.opacity = (icur + speed)/100;
29                 }
30                 else{
31                     obj.style[attr] = icur + speed + 'px';
32                 }
33                 }//json for-in
34 
35                 //在所有属性都到达目标值后，判断是否有回调函数（链式动画）
36                 if(flag){
37                     clearInterval(obj.timer);
38                     if(fn){
39                         fn();
40                     };
41                 }
42             },30)
43         }
44 
45         function getStyle(obj,attr){//解决加了边框之后bug
46             if(obj.currentStyle){
47                 return obj,currentStyle[attr];
48             }
49             else{
50                 return getComputedStyle(obj,false)[attr];
51             }
52         }

引用move.js的格式

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>jsonmove</title>
 6     <style>
 7         body,ul,li{
 8             margin:0;
 9             padding:0;
10         }
11         ul #li1{
12             width:200px;
13             height: 100px;
14             background-color: yellow;
15             border: 4px solid #000;
16             filter:alpha(opacity:30);
17             opacity:0.3;
18             position: absolute;
19             top:10px;
20             left:10px;
21             list-style-type: none;
22         }    
23         ul #li2{
24             width:200px;
25             height: 100px;
26             background-color: yellow;
27             border: 4px solid #000;
28             filter:alpha(opacity:30);
29             opacity:0.3;
30             position: absolute;
31             top:250px;
32             left:10px;
33             list-style-type: none;
34         }
35     </style>
36     <script src="move.js"></script>
37 </head>
38 <body>
39     <ul>
40         <li id="li1"></li>
41         <li id="li2"></li>
42     </ul>
43     <script>
44     window.onload = function(){
45         
46         //同时运动
47         var oLi = document.getElementById('li1');
48 
49         oLi.onmouseenter = function(){
50             startMove(oLi,{width:400,height:200,opacity:100,top:20,left:20});
51         }
52         oLi.onmouseout = function(){
53             startMove(oLi,{width:200,height:100,opacity:30,top:10,left:20});
54         }
55 
56         //链式运动
57         var oLi2 = document.getElementById('li2');
58 
59         oLi2.onmouseenter = function(){
60             startMove(oLi2,{width:400},function(){
61                 startMove(oLi2,{height:200},function(){
62                     startMove(oLi2,{opacity:100},function(){
63                         startMove(oLi2,{top:250},function(){
64                             startMove(oLi2,{left:20})
65                         })
66                     })
67                 });
68             });
69         }
70 
71         oLi2.onmouseout = function(){
72             startMove(oLi2,{left:20},function(){
73                 startMove(oLi2,{top:250},function(){
74                     startMove(oLi2,{opacity:30},function(){
75                         startMove(oLi2,{height:100},function(){
76                             startMove(oLi2,{width:200})
77                         })
78                     })
79                 });
80             });
81         }
82     }
83     </script>
84 </body>
85 </html>

慕课网JS动画效果-http://www.imooc.com/learn/167

代码演示地址：http://runjs.cn/detail/2jhz4bmc

posted @ 2016-08-05 16:37  老板丶鱼丸粗面  阅读(292)  评论(0)  编辑  收藏  举报