技术·教程|Javascript中遇到的问题: 缓动动画函数的封装 JavaScript|js|vue|css|封装|#

【技术·教程|Javascript中遇到的问题: 缓动动画函数的封装】
JavaScript

- 1.缓动函数 - 匀速运动
- 2.代码展示
- 3.调用实例

来源博客：【Harryの心阁】

1.缓动函数 - 匀速运动

在匀速运动的过程中设置每次移动的距离如果大于1px,会使最后的目标位置变大，并且在封装过程中，if判断必须设置为>=,看一下样式效果
看控制台console(obj.offsetLeft)的值可以看出在设置匀速运动时，如果每次移动的距离大于1px，最后得到的距离左侧的位置大于目标位置，再做判断时要设置为对象距离左侧的位置>=目标位置

文章图片

缓动动画函数封装【地址】

2.代码展示

// 封装一个匀速或者变速的缓动文件 // 第一是减速的 function animate(obj, target, speed,callback) { clearInterval(obj.timer); obj.timer = setInterval(function () { var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { clearInterval(obj.timer); if (callback) { callback(); } } obj.style.left = obj.offsetLeft + step + 'px'; }, speed) } // 第二个封装匀速 // 对象，目标位置，每次移动的距离，移动速度，回调函数 // var demo = animateun(obj, target, csteps, callback) function animateun(obj, target,csteps,speed,callback) { clearInterval(obj.timer); obj.timer = setInterval(function () { // var step = (target - obj.offsetLeft) / 10; // step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft >= target) { clearInterval(obj.timer); if (callback) { callback(); } } obj.style.left = obj.offsetLeft + csteps + 'px'; }, speed) }

3.调用实例

Document - 锐客网 src="https://www.it610.com/article/animate.js"> > * { padding: 0; margin: 0; box-sizing: border-box; } .box { position: absolute; display: block; left: 0; width: 100px; height: 100px; margin: 100px 0; background-color: rgb(6, 143, 153); } span { position: absolute; display: block; left: 0; width: 100px; height: 100px; margin: 200px 0px; background-color: rgb(21, 8, 139); } > >var box = document.querySelector('.box'); var span = document.querySelector('span'); var box1 = animateun(box, 800, 1, 1, function () { box.style.backgroundColor = 'red'; console.log(box.offsetLeft); }); var span1 = animate(span, 900,150)