原生JavaScript运动功能系列（五）：定时定点运动

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

这篇博客剖析一个问题，就是怎么实现将元素指定时间运动到目标位置？前面的博客都是在处理运动行为，没有对运动时间做任何限定，只是因为清晰的分析运动行为和实现原理，要想一个动画函数具备健全的功能，并且可以随意使用，通过参数设定动画执行时间是非常有必要的一个设计。

在前面任意一种运动函数内，实质上只有一个变量，这个变量就是运动距离（缓冲运动中添加了因数），当运动距离变大时，运动时间就会变长，动画停止条件是由坐标来决定的。当指定运动时间时，运动速度就会同时受到运动距离和运动时间的限制，动画停止条件也是由时间来控制。

定时定点运动示例代码：

//css
div{
    width:100px;
    height:100px;
    background:red;
    position: absolute;
    left: 0px;
    opacity: 1;
}
#top{
    top: 100px;
}
#bottom{
    top: 300px;    
}
//html
<div id="top"></div>
<div id="bottom"></div>
//js
var oDivArray = document.getElementsByTagName('div');
var timer = null;
var targetObj = {
    width:400,
    height:400,
    opacity:50,
    left:300,
    top:200
}
oDivArray[0].onclick = function(){
    startMove(this,targetObj,3000,function(){
        startMove(oDivArray[1],targetObj,3000);
    });
}
function getStyle(obj,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(obj,false)[attr];
    }else{
        return obj.currentStyle[attr];
    }
}
//运动方法startMove的参数：
//obj：运动物体；
//json：目标位置，最终样式值（键值对的形式合成的目标位置对象）
//speed:运动时间（指定运动的时间）
//callback：回调函数
function startMove(obj,json,speed,callback){
    //初始位置,移动距离,当前位置
    var initialPlace = {};
    //新的位置（每次运动的目标点）
    var nowPlace;
    //结束之前的定时器
    clearInterval(obj.timer);
    //获取当前时间戳
    var createTime = function(){
        return (+new Date);
    }
    //动画开始的时间戳
    var startTime = createTime();
    //初始位置对象
    for(var attr in json){
        if(attr == 'opacity'){
            initialPlace[attr] = Math.round(parseFloat(getStyle(obj,attr))*100);
        }else{
            initialPlace[attr] = parseInt(getStyle(obj,attr));
        }
    }
    //定时器
    obj.timer = setInterval(function(){
        //每次变化的时间
        //剩余时间 = Math.max(0,运动开始的时间 + 运动执行事件 - 当前时间) -- 当剩余时间为负数时，返回0
        var remaining = Math.max(0, startTime + speed - createTime());
        //剩余时间比 = 剩余时间 / 运动时间
        var temp = remaining / speed || 0;
        //当前时间比 = 1 - 剩余时间比 -- 即执行到某处时间节点
        var percent = 1 - temp;
        //循环运动到时间节点位置
        for(var  attr in json){
            nowPlace = (json[attr] - initialPlace[attr]) * percent + initialPlace[attr];
            if(attr == 'opacity'){
                obj.style.opacity = nowPlace / 100;
            }else{
                obj.style[attr] = nowPlace + 'px';
            }
        }
        //当前时间与运动时间比为1:1时，说明到达运动终点了，结束定时器，并判断是否有回调函数
        if(percent == 1){
            clearInterval(obj.timer);
            typeof callback == 'function' ? callback() : '';
        }
    },30);
}

示例还是基于链式运动的示例进行修改过来了，但是运动函数已经发生了质的变化。因为代码我都有些注释，就不详细解析了。提一个相对比较重要的点，这篇博客相对于前面的博客（运动系列），这篇博客的动画行为主要是受限定的运动时间来控制的，单次运动距离由运动实际运动时间比总(参数设置的时间)运动时间，来决定一次运动距离。通过时间比的方式来控制运动速度，和决定什么时候停止动画。

然后还有一个参数easing没有实现，如果没有这个参数，运动行为就都是匀速执行了，请看下面的改进方式：

//在js全局定义运动行为对象
var easingObj = {
    linear: function( p ) {
        return p;
    },
    swing: function( p ) {
        return 0.5 - Math.cos( p*Math.PI ) / 2;
    },
    background:function(k) {
        if (k < (1 / 2.75)) {
            return 7.5625 * k * k; 
        } else if (k < (2 / 2.75)) {
            return 7.5625 * (k -= (1.5 / 2.75)) * k + 0.75; 
        } else if (k < (2.5 / 2.75)) {
            return 7.5625 * (k -= (2.25 / 2.75)) * k + 0.9375; 
        } else { 
            return 7.5625 * (k -= (2.625 / 2.75)) * k + 0.984375; 
        } 
    }
}
//然后在startMove运动方法的形参上添加参数easing；参数位置：第四个参数（索引3）
//然后设置默认运动行为或接收设置的运动行为
//对象行为 -- 默认：swing(匀速)
if(!easing){
    easing = easingObj.swing;
}else{
    easing = easingObj[easing];
}
//将运动节点位置那行代码修改
//实质是将percend用行为函数包裹起来
nowPlace = (json[attr] - initialPlace[attr]) * easing(percent) + initialPlace[attr];

最后调用代码：

oDivArray[0].onclick = function(){
    startMove(this,targetObj,3000,"",function(){
        startMove(oDivArray[1],targetObj,3000,"background");
    });
}

这个方法就完全模仿了jQuery的动画函数animate()，后期我会将这个方法封装，并且会提供缓动函数(easings库)插件接口，缓动函数库手册地址：https://easings.net/zh-cn。运动行为库相对来说还是有些局限性的，所以接下来我会在前面的示例基础上手写弹力效果和撞击效果。一步一步来吧。

相关技术博客参考：

• 原生js使用缓动函数库easing动画效果
• jQuery源码分析系列(40）: 动画设计