JS运动函数基础

概述：

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

主要实现原理

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

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

运动的三大要素

• 当前值（current）

• 变化值（step）

• 目标值（target）

主要动画

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

示例（操作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(function(){
        //每一次将当前值+变化值 完成变化
        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)
            // console.log(step);
            //控制current的变化
            current += step
            //设置给对应的div
            div.style.left = current + 'px'
        }
​
    },20)
    }
//封装一个方法获取对应的样式(获取所有的样式)
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
    }
}