匀减速方法

function getStyle(ele, attr) {
var style;
if (ele.currentStyle) {
// ele.currentStyle 包含 所有css样式的对象
// obj.attr 获取 obj的 attr的属性
style = ele.currentStyle[attr];
} else {
//正常浏览器具有getComputedStyle()方法
style = window.getComputedStyle(ele)[attr];
}
// 把获取的样式返回
return style
}

// 封装一个缓冲运动 动画函数
// ele是元素, attr是样式, target是目标值
function animation(ele, attr, target) {
let speed;
let timer = setInterval(() => {
// getStyle(ele, attr) 返回值是带有单位的字符串
let style = parseInt(getStyle(ele, attr))
speed = Math.ceil((target - style) / 5)
style = style + speed
if (style === target) {
// console.log(1) 判断是否关闭定时器
clearInterval(timer)
}
// 这里的attr是字符串，需要用[]
ele.style[attr] = style + 'px'
// console.log(2) 判断是否开启定时器
}, 50)
}

 

btn.onclick = function () {  animation(box, 'width', 500)  }

————————————————
原文链接：https://blog.csdn.net/weixin_42681295/article/details/107047086

 

 

 

 

 

 

 

function animation(ele, obj, callback) {

let timerLen = 0; //定时器的执行次数
//遍历对象obj 进行动画样式的设置!
for (let key in obj) {
timerLen++
// console.log(key); //字符串的格式 key --属性 top等等
// console.log(obj[key]); //也就是目标值 属性值 obj[key] 100
//style就是所运动的样式
clearInterval(ele[key]) //清除上一次的定时器

let speed = 0; //速度
ele[key] = setInterval(() => {

//假如为透明属性的时候，就获取到初始的透明值，否则就是获取当前样式的属性！
if (key === "opacity") {
//属性值的初始设置为小于1的，为透明度的时候 值需要*100，为了方便计算！
style = getStyle(ele, key) * 100 //拿到初始的属性值
} else {
var style = parseInt(getStyle(ele, key)); //获取到非行内样式
}
//速度的计算！ (目标值 - 当前样式值)/5
speed = (obj[key] - style) / 5;

//假如速度小于0的时候，就是代表负数，向下取整（负数）
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
style = style + speed //所修改的样式 = 当前样式 + 速度

// console.log(style, obj[key]); //50 100
if (key === "opacity") { //由于透明属性没有那个单位，因此需要判断！
ele.style[key] = style / 100 //修改ele元素的样式
} else {
ele.style[key] = style + "px" //修改ele元素的样式
}

if (style === obj[key]) { //当left等于目标值的之后，就清除定时器！
clearInterval(ele[key])
timerLen-- //执行完定时器后，就定时器计数渐渐 当定时器计数器为0的时候，代表动画执行结束
if (timerLen === 0) {
// console.log("动画执行完毕了");
callback()
}
}
}, 30)
}
}

 

//封装一个获取非行内样式的函数 --- getStyle(box, 'height')
//参数1：为需要获取的元素，参数2：为获取元素的属性（需要添加'') 返回值：为style
function getStyle(ele, attr) {
var style;
if (ele.currentStyle) {
// ele.currentStyle 包含 所有css样式的对象 需要使用obj['属性']
style = ele.currentStyle[attr]
} else {
style = window.getComputedStyle(ele)[attr]
}
return style
}
————————————————、
原文链接：https://blog.csdn.net/weixin_42681295/article/details/107047086