JavaScript-如何通过原生JS实现匀速动画

本文主要是介绍JavaScript-如何通过原生JS实现匀速动画，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

JavaScript-如何通过原生JS实现匀速动画

据我们所知，我们可以通过css3（transform translate即可）区实现这个动画，但是通常面试的时候，可能会被要求原生手敲；

使用到的知识点：定时器去实现setInterval去实现
在这里插入图片描述

<button onclick="changeBox()">点击移动box</button><div class="box"></div><script>let box = document.querySelector('.box')let timerId let timerId2function changeBox(){if(timerId2){clearTimeout(timerId2)}timerId2 = setTimeout(()=>{// if(timerId){clearInterval(timerId)}let original = box.offsetLeft;let current = 0timerId = setInterval(()=>{current++box.style.left = original + current + 'px'// 比如移动到100px的时候就停止console.log(current === 100,"查看防抖是否生效")if(current === 100){clearInterval(timerId)}},10)},1000)}</script>

对于以上代码进行公共封装：元素原生实现匀速动画

  /*** @target <Object> 传入的目标元素* @moveData <number> 每次点击移动数据* **/
function animate(target, moveData,callback) {if (target.timerId) {clearInterval(target.timerId)}let original = target.offsetLeft;let current = 0target.timerId = setInterval(() => {current++box.style.left = original + current + 'px'if (current === moveData) {clearInterval(target.timerId)if (callback instanceof Function) {callback()}}}, 10)}

缓动动画封装（匀速、加速、减速、返回加速、返回减速）

前面可以看到，我们使用current++是一种匀速的方式，匀速的快慢取决于我们+=后面的值，如果我们希望是缓动动画的形式去移动我们的元素，我们可以通过以下封装算法去实现

 /** 清除定时器的时候需要注意的判断，非匀速是会有差别的
* if (current <0  || current == 0) {clearInterval(timerId4)box.style.left =original + 'px'}else{box.style.left =original + current + 'px'}**/function speed (type, moveData) {switch (type) {case 'uniformSpeed': // 匀速function uniformSpeed () {let current = 0return current++}return speed++breakcase 'moderate': // 减速function moderate (moveData) {let current = 0let distance = moveData - currentreturn (current += distance? Math.ceil(distance / 10): Math.floor(distance / 10))}breakcase 'accelerate': // 加速function accelerate (moveData) {let current = 0let distance = 10 + currentreturn current < 500? (current += distance? Math.ceil(distance / 10): Math.floor(distance / 10)): 500}breakcase 'comeBack-accelerate': // 往回加速function comeBack (moveData) {let current = moveDatalet distance = 10 + currentcurrent -=distance > 0 ? Math.ceil(distance / 10) : Math.floor(distance / 10)}breakcase 'comeBack-moderate': // 往回减速速function comeBack (moveData) {let current = 0let distance = moveData - currentreturn (current -= distance? Math.ceil(distance / 10): Math.floor(distance / 10))}break}
}