概述：

运动（动画），操作对应的dom元素发生变化（这个变化要持续多次（修改样式）），每次间隔的时间是你肉眼察觉不出的（时间比较短）。当到达目标位置就停止。这个就是所谓的动画。

主要实现原理

• 利用定时器定时操作dom的样式
• 当对应的设置目标值到达以后清除对应的定时器

运动三大要素

• 当前值（current）
• 变化值 （step）
• 目标值 （target）

主要动画

匀速运动（每次变化的值是一样的）

示例（操作div的宽度变化）

// 操作div的宽度变化
//匀速运动每次变化的值是固定的
//获取div
var div = document.querySelector('div')
//当前值 通过获取当前的样式来获取对应的宽度
var current = parseFloat(getStyle(div).width)
//变化值
var step = 10
//目标值
var target = 500
//点击div 匀速变化他的宽度
div.onclick = function () { 
    var timer = setInterval(()=>{
        //每次将当前值去加上变化量 完成变化
        current += step
        //设置给对应的div
        div.style.width = current + 'px'
        //到达目标位置清除定时器
        if(current == target){
            clearInterval(timer)
        }
    },40)
    }
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element){
    if(window.getComputedStyle){
        return  window.getComputedStyle(element,'')
    }else{
        return element.currentStyle 
    }
}

封装的匀速运动代码（如果设置值不一样那么动画将不会一起完成）

//匀速运动的方法
//element表示移动的元素 target 目标位置{width:100,left:500}
function uniformVelocityAnimation(element, targetObj) {
    //遍历target得到他的样式
    for (let key in targetObj) {//key是字符串
        //获取移动的目标样式的值
        let current = parseFloat(getStyle(element)[key])
        //得到目标值
        let target = targetObj[key]
        //步长设置 如果目标值是小于我们当前的值那么对应变化的量为负值 如果目标值大于我们当前值那么变化量为正值
        let step = target>current?10:-10
        //定时更改
        let timer = setInterval(() => {
            //判断是否到达目标位置
            if (current >= target) {
                clearInterval(timer)
            } else {
                //每次将对应的left值更改
                current += step
                //重新设置div的left值
                element.style[key] = current + 'px'
            }
        }, 40)
        }
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element){
    if(window.getComputedStyle){
        return  window.getComputedStyle(element,'')
    }else{
        return element.currentStyle 
    }
}

缓冲运动 （每次变化的值是越来越小的）

示例 （操作div的位置变化）

//div位置变化 以缓冲运动进行变化
//获取div
var div = document.querySelector('div')
//运动三要素
//当前值
let current = parseFloat(getStyle(div).left)
//目標值
let target = 500
//给div添加点击事件
div.onclick = function () {
    var timer = setInterval(() => {
        //如果到了就清除定时器
        if (current >= target) {
            clearInterval(timer)
        } else {
            //变化值 (目标值-当前值)/10  因为每次的值都会除10 那么对应的小数就会无限增加 就会导致永远到不了（取整）
            let step = Math.ceil((target - current) / 10)
            //控制current的变化
            current += step
            //设置给对应的div
            div.style.left = current + 'px'
        }

    }, 40)
    }
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(element, '')
    } else {
        return element.currentStyle
    }
}

缓冲封装

//缓冲运动封装
//element表示当前的元素 target表示目标对象
function bufferAnimation(element, targetObj) {
    //如果element为undefined就直接报错
    if(!element){
        throw new Error('元素不能缺少')
    }
    //给元素对象添加一个属性为timer他是一个定时器
    element.timer = setInterval(() => {
        var flag = true
        //遍历对象
        for (let key in targetObj) {
            //取出当前值
            let current = parseFloat(getStyle(element)[key])
            //取出目标值
            let target = targetObj[key]
            //判断当前如果是位置的变化及对应的宽度高度的变化
            if(key=='width' || key == 'height' || key == 'left' || key == 'top'){
                //步长 负值向下取整 正值向上取整
                var step = target-current>0?Math.ceil((target - current) / 10):Math.floor((target - current) / 10)
                current += step
                element.style[key] = current + 'px'
            }
            //如果是透明度的变化
            if(key == 'opacity'){
                //步长 负值向下取整 正值向上取整
                var step = target-current>0?Math.ceil((target - current) * 1000 / 10):Math.floor((target - current)*1000 / 10)
                current += step / 1000
                element.style[key] = current
            }
            //如果是层高直接赋值
            if(key == 'zIndex'){
                element.style[key] = target
            }
            //如果没有完成就是false
            if(current != target){
                flag = false
            }
        }
        //如果全部走完了就清除
        if(flag){
            clearInterval(element.timer)
        }
    },80)
}
//封装一个方法获取对应的样式(获取所有的样式)
function getStyle(element) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(element, '')
    } else {
        return element.currentStyle
    }
}