Day-16运动上

运动上

运动是啥

通过改变对应的元素的样式来进行对应的变化 称为运动 ，通过设置定时器使对应的目标达到对应的状态（动画），将这个俩个内容合1就是我们的运动。

匀速运动

通过改变的值 每次都是一样的来控制对应的元素匀速运动

运动示例

//1.获取对应的按钮以及相关的div
var btn = document.querySelector('button')
var content = document.querySelector('div')
//2.给按钮添加对应的点击事件
btn.onclick = function(){
    //3.在点击事件里面 控制div的left值的改变
    //3.1 利用定时器在对应的事件里面 每次更改一部分的left值
    var timer = setInterval(() => {
        var left = parseInt(getStyle(content).left)
        content.style.left = left+10+"px"
        //3.2 当我们的left值到达了对应的位置的时候我们就清除定时器
        if(left==490){
            clearInterval(timer)
        }
    }, 100);
}
//获取对应的样式的方法 
function getStyle(el){
    if(window.getComputedStyle){
        return  window.getComputedStyle(el)
    }
    //兼容ie的
    return el.currentStyle
}

缓冲运动

通过改变的值 先改的值比较大后面改的值比较小 来达到对应的缓冲运动

//缓冲运动的核心就是对应的值的变化越来越少
//1.获取对应的元素 按钮 div
var btn = document.querySelector("button")
var div = document.querySelector("div")
//2.给按钮添加事件
btn.onclick = function(){
    //3.控制div的变化 变化的值越来越小的
    //3.1 定时器控制对应的div的left值发生变化
    var timer = setInterval(() => {
        var currentLeft = parseFloat(getStyle(div).left)
        // 距离越来越小(防止无限取小数)
        var step = (500-currentLeft)/10>1?(500-currentLeft)/10:1
        div.style.left = currentLeft+step+"px"
        //3.2 到达目标位置后 清除的对应的定时器 写大于的问题为他有可能是小数 小数相加可能会大于目标值
        if(currentLeft>=500-step){
            console.log("结束了");
            clearInterval(timer)
        }
    }, 100);
}
//获取对应的样式的方法 
function getStyle(el){
    if(window.getComputedStyle){
        return  window.getComputedStyle(el)
    }
    //兼容ie的
    return el.currentStyle
}

透明度缓动

//1.获取对应的按钮以及相关的div
var btn = document.querySelector('button')
var content = document.querySelector('div')
// 2.给按钮添加对应的事件
btn.onclick = function(){
    // 3.在事件里面进行操作
    // 3.1 加定时器更改对应的透明度
    var timer = setInterval(() => {
        //获取当前的透明度
        var current = parseFloat(getStyle(content).opacity)
        //先把放大 操作更好操作   再缩小
        //判断如果当前步长大于0情况下 我们给他向上取整 如果我们是小于0的情况 我给他向下取整
        var step = (1-current)*100/10 > 0? Math.ceil((1-current)*100/10): Math.floor((1-current)*100/10)
        //目标位置 = 当前位置+步长
        console.log(step);
        content.style.opacity = current+step/100
        // 3.2 判断是否到达对应的目标值 清除对应的定时器
        //当前位置+步长 == 目标
        if(current+step/100==1){
            clearInterval(timer)
        }
    }, 100);
​
}
//获取对应的样式的方法 
function getStyle(el){
    if(window.getComputedStyle){
        return  window.getComputedStyle(el)
    }
    //兼容ie的
    return el.currentStyle
}

链式运动

多个元素的值在无缝衔接（回调函数中更改）中更改

公式

目标位置 = 当前位置 + 步长

透明度切换

先乘100 再除100

步长 = （目标位置-当前位置）* 100 / 10 > 0 ? Math.ceil(（目标位置-当前位置）* 100 / 10 ) : Math.floor(（目标位置-当前位置）* 100 / 10 )