使用原生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则为帧刷新速率，这样连续计算和设置元素样式，即形成了动画效果。
