day 16 运动（上）

概述：运动也就是动画，操作对应的dom元素持续多次的修改样式，并且有比较短的时间的间隔（肉眼无法察觉），达到目标位置后停止，这就是动画

主要实现原理

• 利用定时器定时操作dom的样式

• 当对应的设置目标值到达以后清除对应的定时器

运动三大要素

• 当前值（current）

• 变化值 （step）

• 目标值 （target）

主要动画

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

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

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

//匀速运动的方法
//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 
    }
}

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

缓冲封装

//缓冲运动封装
//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
    }
}