使用原生js实现简单动画效果

我们知道，借助jQuery提供的animate方法，我们可以很容易实现一些常见的js动画效果。而对于颜色等无法用数值直接表示的样式，我们可以通过引入一些jQuery插件来实现。但是随着前端组件化开发的流行，jQuery大量的DOM操作已显得十分多余，正在逐渐从前端技术栈中被淘汰。那么如何使用原生js来实现类似于jQuery中的动画效果呢？下面我们将使用原生js实现一个简单的让div匀速加宽的动画效果。

目标效果

点击按钮使div从100像素加宽为200像素。初始HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>简单js动画的实现</title><style>#nav{margin-top: 20px;width: 100px;height: 100px;background-color: #409eff;}</style>
</head>
<body>
<button onclick="run()">加宽</button>
<div id="nav"></div>
</body>
<script>//需要应用动画效果的目标元素var elem = document.getElementById('nav');//动画配置，为了方便，这里只针对width属性，duration表示动画持续时间var options = {width: '200px',duration: 1000};//启动动画function run(){animate.call(elem, options);}//动画逻辑function animate(options){//动画的具体实现，后面的所有代码均位于该函数内...}
</script>
<html>

初始效果如下：

基本原理

使用js实现动画效果的基本原理是，用window.setInterval(logic, time)控制动画的整体运行过程。logic用于计算和设置当前帧的样式，time给定动画刷新速率（即每隔该间隔就重新计算样式，暂不考虑任务阻塞）。

那么logic如何计算当前帧中div的宽度值呢？首先我们需要获取div的原始宽度和结束宽度，然后根据当前动画执行的百分比，计算当前宽度值，这需要借助三个时间参数来确定。一个是动画的开始时间，我们通过一个简单的函数，来获取当前时间的毫秒数形式，代码如下：

//定时器
var timer = null;
//div的初始宽度和结束宽度
var startWidth = parseInt(window.getComputedStyle(elem)['width']);
var endWidth = parseInt(options.width);function createTime(){//返回当前日期距1970年1月1日午夜（GMT 时间）之间的毫秒数，一种简化写法return (+new Date);
}
var startTime = createTime();

另一个是动画持续时间duration，我们从配置的参数中得到。第三个就是当前时间，我们在logic函数中动态获取。根据这三个参数，我们可以在logic中计算出当前动画的剩余时间：

function logic(){//开始时间 + 持续时间 - 当前时间，结果即为动画的剩余时间，当剩余时间小于0则置0，表示动画结束var remaining = Math.max(0, startTime + options.duration - createTime());

根据动画的剩余时间和动画的持续时间，我们可以很容易计算出当前动画执行的百分比，即：

 //remaining/duration即为动画剩余的百分比，用1去减，得到已执行的百分比var percent = 1 - (remaining / options.duration);

根据动画已执行的百分比，我们就可以计算当前帧元素的样式：

 //（结束宽度 - 开始宽度）* 百分比 + 开始宽度，即为当前帧div的实际宽度var nowWidth = ( endWidth - startWidth ) * percent + startWidth;

然后我们定义一个函数setStyle来为div设置宽度：

 function setStyle(nowWidth){elem.style['width'] = nowWidth + 'px';}

我们通过percent来判断当前动画是否结束，如果结束，就设置样式并且清除定时器，否则只设置样式即可：

 if(percent === 1){setStyle(nowWidth);clearInterval(timer);timer = null;} else {setStyle(nowWidth);}
}

最后，我们在logic函数外启动定时器，设置帧刷新速率为13毫秒（jQuery的默认刷新速率）：

timer = setInterval(logic, 13);

总结

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>简单js动画的实现</title><style>#nav{margin-top: 20px;width: 100px;height: 100px;background-color: #409eff;}</style>
</head>
<body>
<button onclick="run()">加宽</button>
<div id="nav"></div>
</body>
<script>
//需要应用动画效果的目标元素
var elem = document.getElementById('nav');
//动画配置，为了方便，这里只针对width属性，duration表示动画持续时间
var options = {width: '200px',duration: 1000
};
//点击按钮启动动画
function run(){animate.call(elem, options);
}
//动画逻辑
function animate(options){//定时器var timer = null;//div的初始宽度和结束宽度var startWidth = parseInt(window.getComputedStyle(elem)['width']);var endWidth = parseInt(options.width);function createTime(){//返回当前日期距1970年1月1日午夜（GMT 时间）之间的毫秒数，一种简化写法return (+new Date);}var startTime = createTime();function logic(){//开始时间 + 持续时间 - 当前时间，结果即为动画的剩余时间，当剩余时间小于0则置0，表示动画结束var remaining = Math.max(0, startTime + options.duration - createTime());//remaining/duration即为动画剩余的百分比，用1去减，得到已执行的百分比var percent = 1 - (remaining / options.duration); //（结束宽度 - 开始宽度）* 百分比 + 开始宽度，即为当前帧div的实际宽度var nowWidth = ( endWidth - startWidth ) * percent + startWidth;function setStyle(nowWidth){elem.style['width'] = nowWidth + 'px';}if(percent === 1){setStyle(nowWidth);clearInterval(timer);timer = null;} else {setStyle(nowWidth);}}timer = setInterval(logic, 13);
}
</script>
<html>

本示例只简单地实现元素宽度的变化，但是可以从中了解到js动画执行的基本原理。即通过setInterval(logic, time)控制动画执行，logic用于计算每帧的样式，time则为帧刷新速率，这样连续计算和设置元素样式，即形成了动画效果。