js原生缓动动画封装，细节优化

最新推荐文章于 2024-03-19 00:47:56 发布

一如丶年少

最新推荐文章于 2024-03-19 00:47:56 发布

阅读量151

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/unapproachable/article/details/107263397

版权

web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

缓动动画核心思路：通过每次动画的数值不一样实现缓动效果

html、css代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box1 {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #f60;
        }
    </style>
</head>

<body>
    <button id="btn1">缓动</button>
    <div id="box1"></div>
</body>

</html>

js代码

 <script>
		// 获取元素
        var box1 = document.getElementById('box1');
        var btn1 = document.getElementById('btn1');
        // 调用动画函数
        btn1.onclick = function () {
            animationSlow(box1, {width: 400,height: 400,top: 200,left: 200}, function () {
                animationSlow(box1, {width: 200,height: 200,top: 50,left: 700}, function () {
                    animationSlow(box1, {width: 400,height: 400,top: 200,left: 1100})
                })
            });
        }

		// 缓动封装
     	/**
    	* @description: 缓动动画
    	* @param {dom对象}  ele : 要移动的元素
	    * @param {object}  attrs : 要移动的属性对象
    	* @param {function}  fn : 回调函数   可选， 如果传了，则动画结束后就会执行fn函数体。反之不执行
   	 	* @return: 
    	*/
        function animationSlow(elm, attrs, fn) {
            // 清除定时器，防止开启多个定时器而导致加速
            clearInterval(elm.timeID);
            // 将timeID设置为DOM对象属性，方便调用
            elm.timeID = setInterval(function () {
            	//定义flag变量值为布尔值，用于做终点检测
                var flag = true;
                // 遍历需修改的属性对象
                for (var key in attrs) {
                    var attr = key;
                    var target = attrs[key];
                    var position = parseInt(getComputedStyle(elm)[attr]);
                    // 让每次步长即step的值都发生变化
                    var step = (target - position) / 10;
                    // 当step为正，向上取整，为负向下取整，
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    position += step;
                    elm.style[attr] = position + 'px';
                    // 判断每个要修改的属性是否都已到达终点
                    if (position != target) {
                        flag = false;
                    }
                }
                // 修改的所有属性都到达终点清除定时器，并执行回调函数
                if(flag) {
                    clearInterval(elm.timeID);
                   // 参数为函数就执行该函数
                    if(typeof(fn) == 'function') {
                        fn();
                    }
                }
            }, 20)
        }
    </script>