day19运动

运动是啥

通过改变对应元素的样式来进行对应的变化 称为运动,通过设置定时器是对应的目标达到对应的状态,将这两个内容和一就是运动

匀速运动

通过改变的值 每次都是改变都是相同的就是匀速运动

运动实例

//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
}

链式运动

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

公式

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

透明度切换

先放大差值,改变差值后在缩小

 timer1 = setInterval(() => {
            var currentOp = parseFloat(getStyle(oDiv).opacity);

            var step1 = (0 - currentOp * 100) / 10 > 0 ? Math.ceil((0 - currentOp * 100) / 10) : Math.floor((0 - currentOp * 100) / 10)
            oDiv.style.opacity = currentOp + step1 / 100;
            if (currentOp + step1 / 100 <= 0) {
                clearInterval(timer1);
                oDiv.style.opacity = 0;
            }
        }, 100);