原生js实现移动动画，变化动画

浅浅的花香味﹌ 2023-06-29 10:53 71阅读 0赞

初生牛犊不怕虎，想用博客来记录自己以前的一些学习经历，对您有帮助的话请留下你们的赞哦！

话不多说进入正题

首先我们应该怎么用原生js实现动画，思路是这样的

1.  通过某些方法获取到当前元素的样式属性值，例如宽度width，高度height等
2.  获取到当前值current之后，要传入我们target，就是我们希望元素移动到哪里，即是目标值，但因业务的需要我们可能不仅要让元素移动的同时也要改变其他样式，例如层级z-index,透明度opacity等等，所以在封装的函数中就不能只传一个target，而是传入一个json格式的数据，如

{ 
    	'left': 50,
    	'wdith': 200,
    	'opacity': 0.8
    }

1.  封装的函数中要有一个回调函数，当所有动画都执行完成后就可以执行回调函数作出下一步的操作

那么就来看看代码吧 animate.js

// 封装的函数传入参数
    //element -----> 被操作元素
    //json -----> 目标值数据
    //fn -----> 回调函数
    function animate(element, json, fn) { 
    	//每调用一次函数就清除一次定时器，这里是为了解决多次点击之后速度更变的问题。
        clearInterval(element.timeId)
        element.timeId = setInterval(function() { 
          var flag = true; //假设全部动画操作已经到达目标值
          for (var attr in json) {    // 遍历json数据取到各个属性的目标值
            if (attr == "zIndex") {   // 如果是层级
              element.style[attr] = json[attr]
            }else if(attr == "backgroundColor"){  // 如果是背景颜色
              element.style[attr] = json[attr]
              // 加上美美的颜色变化过渡就perfect啦
              element.style.transition = 'background-color 2s' 
            }else if (attr == "opacity") { 	// 如果是透明度
              //获取当前透明度 （getStyle函数）也自己封装
          	  //因为透明度的值都是小数，为了方便计算我们先乘以100
              var current = getStyle(element, attr) * 100
              var target = json[attr] * 100
              var step = (target - current) / 10 //每一次的变化步数
              // 如果是正值那么步数向上取整，是负值那么步数向下取整，以便能达到目标值
              step = step > 0 ? Math.ceil(step) : Math.floor(step)
              current += step  // 每次的步数叠加
              element.style[attr] = current / 100	// 到达目标值再重新除以100
            } else {   // 其他带px的属性值
              //获取当前div的位置或者大小
              var current = parseInt(getStyle(element, attr))
              var target = json[attr]
              var step = (target - current) / 10
              step = step > 0 ? Math.ceil(step) : Math.floor(step)
              current += step
              element.style[attr] = current + 'px'
            }
            // 如果还有没有到达目标的动画操作，则把标志flag置为false
            if (current != target) { 
              flag = false
            }
          }
          // 直到所有动画操作都执行完毕才放行，清除定时器终止操作
          if (flag) { 
            clearInterval(element.timeId)
            // 并且如果有传入回调函数就运行回调函数
            if(fn){ 
              fn()
            }
          }
        },10) // 定时器每10毫秒运行一次，就实现了current值一直叠加直到达到目标
      }
    
    
    // getStyle函数，即获取元素对应的属性值
    function getStyle(element,attr){ 
    // 如果浏览器支持window.getComputedStyle,不支持则element.currentStyle[attr];
       return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
    }

到这里js就写完啦，那么赶紧用个简单的div模型来试试吧

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    </head>
    <style type="text/css"> #app{ width:100px; height: 100px; background-color: pink; position: absolute; /* 测试left，top等值记得加上定位哦 */ } </style>
    <body>
    	<div id='app'></div>
    </body>
    </html>
    
    <script src='animate.js'></script>
    <script type='text/javascript'> var app = document.querySelector('#app') animate(app,{ left:200},function(){ //先移动他个200像素 // 再变大变黄，哈哈哈 animate(app,{ width:200,height:200,backgroundColor:'yellow'}) }) </script>

看看效果图吧  
![在这里插入图片描述][20200112151241625.gif]  
回调函数里面可以写你下一步的任意操作，赶紧试试吧！

[20200112151241625.gif]: https://img-blog.csdnimg.cn/20200112151241625.gif