原生JavaScript运动功能系列（四）：多物体多值链式运动

• 原生JavaScript运动功能系列（一）：运动功能剖析与匀速运动实现
• 原生JavaScript运动功能系列（二）：缓冲运动
• 原生JavaScript运动功能系列（三）：多物体多值运动

 多物体多值链式运动

这篇博客的内容本来是安排在上一篇博客的内容里面的，但是后来考虑篇幅的问题，就单独拿出来了，所以就不过多就多物体多值运动的原理解析了，如果对代码不是很理解的话可以回到前面的博客查看我的具体分析，整个运动系列的前面的博客连接我都放到了最上面。所以这么博客直接进入链式运动分析。

所谓的链式运动就是一次触发后，多个动画函数自动连续调用执行。聪明的你应该想到了解决方法，解决链式调用最直接的方法当然非回调函数莫属了，在这篇博客不讨论回调机制的负面问题，后面会有相关博客来解析回调机制的负面内容，这篇博客我们就用回调函数来实现链式运动，毕竟在绝大多是不是特别复杂的动画设计中还是使用回调函数比较方便。所以，回调函数也不是解决链式运动的唯一方案，写完这篇博客我就会基于仿写jQuery的队列来实现。

回调这种很简单的机制，也没有太多需要分析的，直接上示例代码，我再基于代码来做一些解释。

 1 //css
 2 div{
 3     width:100px;
 4     height:100px;
 5     background:red;
 6     position: absolute;
 7     left: 0px;
 8     opacity: 1;
 9 }
10 #top{
11     top: 100px;
12 }
13 #bottom{
14     top: 300px;    
15 }
16 //html
17 <div id="top"></div>
18 <div id="bottom"></div>
19 //js
20 var oDivArray = document.getElementsByTagName('div');
21 var timer = null;
22 var targetObj = {
23     width:400,
24     height:400,
25     opacity:50,
26     left:300,
27     top:200
28 }
29 oDivArray[0].onclick = function(){
30     startMove(this,targetObj,function(){
31         startMove(oDivArray[1],targetObj);
32     });
33 }
34 function getStyle(obj,attr){
35     if(window.getComputedStyle){
36         return window.getComputedStyle(obj,false)[attr];
37     }else{
38         return obj.currentStyle[attr];
39     }
40 }
41 function startMove(obj,json,callback){
42     clearInterval(obj.timer);
43     var iSpeed,iCur;
44     obj.timer = setInterval(function(){
45         var bStop = true;
46         for(var attr in json){
47             if(attr == 'opacity'){
48                 iCur = Math.round(parseFloat(getStyle(obj,attr))*100);
49             }else{
50                 iCur = parseInt(getStyle(obj,attr));
51             }
52             iSpeed = (json[attr]-iCur)/7; 
53             iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
54 
55             if(attr == 'opacity'){
56                 obj.style.opacity=(iCur+iSpeed)/100;
57             }else{
58                 obj.style[attr]=iCur+iSpeed+'px';
59             }
60             if(iCur != json[attr]){
61                 bStop= false;
62             }
63         }
64         if(bStop){
65             clearInterval(obj.timer);
66             typeof callback == 'function' ? callback() : '';
67         }
68     },30);
69 }

相对于上一篇博客的多值运动代码只多了66行这一行代码，方法多出一个callback回调函数的形参（因数divisor这个参数等下再讲），在触发动画函数时传入一个回调函数来触发以下动画就Ok了，简单的我都不知道怎么说了。所以下面来凑内容，前面我提取动画函数时，第三个参数提取的是divisor（因数）来改变动画速度的参数，其实这个参数实质上没有多大意义（就改变速度而言），如果你使用jQuery的animate这个动画方法，这个方法的第三个形参是“easing”，用来设置不同运动点的速度，甚至还可以基于插件来实现改变运动轨迹，而第二个参数用来规定动画执行时间，这是我在前面提取方法是有意的将因数提取出来的原因，就是为了后面来实现更jQuery一样的功能，但这是后话了，这个设计比较复杂，需要一些时间来完成。

所以，在运动系列博客的第一部分，也就是实现轮播图插件这个过程，暂时不会提取divisor这个参数了。运动系列的博客第二部分会基于我自己的仿写jQuery来实现这些功能，这是我对这个系列博客的规划。希望大家多多支持啦。

转载于:https://www.cnblogs.com/ZheOneAndOnly/p/10395454.html