day16 运动(上)

概述 :

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

主要实现原理

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

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

运动三大要素

• 当前值 ( current )

• 变化值 ( step )

• 目标值 ( target )

主要动画

匀速运动 ( 每次变化的值是一样的 )

• 示例 ( 操作div的宽度变化 )

//匀速运动每次变化的值 是固定的
//获取页面上的元素
var div = document.querySelector('div')
//获取当前的样式
var current = parseInt(getStyle(div).width)
//设置目标值
var target = 500
//设置步长(变化值)
var step = 10
//给div设置点击事件,并添加定时器,通过定时器来实现样式的变化
div.onclick=function(){
    var timer = setInterval(()=>{
        //判断当前值是否等于目标值,相等就清除定时器
        if(current == target){
            clearInterval(timer)
        }else{
            //否则给div设置样式
            //每次将当前值加上变化值,完成变化
            current += step
            div.style.width = current + 'px'
        }
    },40)
    }
//封装一个获取页面上样式的方法
function getStyle(element){
    if(window.getComputedStyle){
        return window.getComputedStyle(element,'')
    }else{
        return element.currentStyle
    }
}    

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

//匀速运动的封装方法
//element表示移动的元素 , target是目标位置{width:500,left:500}
function yunsu(element,targetObj){
    //遍历targetObj
    for(let key in targetObj){//key是字符串
        //获取当前样式
        let current = parseFloat(getStyle(element)[key])
        //获取目标值
        let target = targetObj[key]
        //获取步长(变化值)
        let step = target - current >0?10:-10
        //设置定时器,没有添加事件会自动开启定时器
        let timer = setInterval(()=>{
            //判断是否有到达目标位置,到了就清除清时期
            if(current == target){
                clearInterval(timer)
            }else{
                //否则给元素设置样式
                //更改每次变化后的值(当前值+步长赋给当前值继续下一轮遍历)
                current += step
                element.style[key]=current + 'px'
            }
        },40)
    }
}
//封装一个获取页面上样式的方法
function getStyle(element){
    if(window.getComputedStyle){
        return window.getComputedStyle(element,'')
    }else{
        return element.currentStyle
    }
}

缓冲运动 ( 每次变化的值是越来越小的 )

• 示例 ( 操作div的位置变化 )

//div位置变化,以缓冲运动进行变化
//1.获取div
var div = document.querySelector('div')
//2.1.获取当前样式
let current = parseInt(getStyle(div).left)
//3.设置目标值
let target = 500
//5.给div添加点击事件并设置定时器
div.onclick=function(){
    let timer = setInterval(()=>{
        //6.判断当前样式值是否等于目标样式值,相等就清除定时器
        if(current == target){
            clearInterval(timer)
        }else{
            //4.设置步长
            //变化值应是(目标值-当前)/10,因为每次的值都会除10会出现小数点然后无线增加,导致永远道不了目标值,所以要取下整数
            let step = Math.ceil((target - current)/10)
            //7.不相等就先获取当前的变化样式,再赋值给div
            current += step
            div.style.left = current + 'px'
        }
    },40)
}
//2.0封装一个获取页面上样式的方法
function getStyle(element){
    if(window.getComputedStyle){
        return window.getComputedStyle(element,'')
    }else{
        return element.currentStyle
    }
}

• 缓冲封装

//封装一个获取样式的方法
function getStyle(element){
    if(window.getComputedStyle){
        return window.getComputedStyle(element,'')
    }else{
        return element.currentStyle
    }
}
//封装缓存动画的方法,参数有元素和目标值对象
function buffer(element,targetObj){
    //判断是否有元素,没有就直接报错,不往下走
    if(!element){
        throw new Error('元素不能少')
    }
    //给这个元素设置定时器
    element.timer=setInterval(()=>{
        //默认都能执行
        var flag = true
        //遍历目标值对象
        for(let key in targetObj){
            //取出当前样式值
            let current = parseInt(getStyle(element)[key])
            //取出目标值
            let target = targetObj[key]
            //判断当前是否是宽高及位置的变化
            if(key == 'width' || key== 'height' || key =='left' || key == 'top'){
                //是就先取出变化值,负值向下取整,正值向上取整
                let step = target-current>0?Math.ceil((target-current)/10):Math.floor((target-current)/10)
                //把变化值赋给当前值,并设置给元素
                current += step
                element.style[key] = current + 'px'
            }
            //判断是否为透明度的变化
            if(key == 'opacity'){
                //是就先取出变化值,负值向下取整,正值向上取整
                let 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)
        }
    },40)

}