动画函数封装 JavaScript

最新推荐文章于 2024-03-23 14:47:09 发布

栋珞

最新推荐文章于 2024-03-23 14:47:09 发布

阅读量102

点赞数

分类专栏： JavaScript 文章标签： javascript 前端动画

本文链接：https://blog.csdn.net/2202_75549187/article/details/129920287

版权

JavaScript 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

动画函数封装

动画实现原理

核心原理：通过定时器 setInterval() 不断移动盒子位置

实现步骤：

获得盒子当前位置
让盒子在当前位置上1个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件
注意此元素需要添加定位，才能使用element.style.left

<div style="position: relative"></div>
<script>
	// 动画原理
    // 让盒子在当前位置上1个移动距离
    // 利用定时器不断重复这个操作
    // 加一个结束定时器的条件
    // 注意此元素需要添加定位，才能使用element.style.left
    var div = document.querySelector('div');
    var timer = setInterval(function() {
        if (div.offsetLeft >= 400) {
            // 停止动画 本质是停止定时器
            clearInterval(timer);
        }
        div.style.left = div.offsetLeft + 1 + 'px';
    }, 30);
</script>

动画函数简单封装

注意函数需要传递2个参数，动画对象和移动到的距离

<div style="position: relative"></div>
<span style="position: relative"></span>
<script>
    // 简单动画函数封装obj目标对象 target 目标
    function animate(obj, target) {
        var timer = setInterval(function() {
        	if (obj.offsetLeft >= target) {
            	// 停止动画 本质是停止定时器
            	clearInterval(timer);
        	}
        	obj.style.left = obj.offsetLeft + 1 + 'px';
    	}, 30);
    }
    
    var div = document.querySelector('div');
    var span = document.querySelector('span');
    animate(div, 300);
    animate(span, 200);
</script>

动画函数给不同元素记录不同定时器

如果多个元素都使用这个动画函数，每次都要var声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）

核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性

<div style="position: relative"></div>
<span style="position: relative"></span>
<button>点击</button>
<script>
    // var obj = {};
    // obj.name = 'andy';
    // 简单动画函数封装obj目标对象 target 目标
    // 给不同的元素指定了不同的定时器
    function animate(obj, target) {
        // 当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
        // 解决方案就是 让我们元素只有一个定时器执行
        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
        	if (obj.offsetLeft >= target) {
            	// 停止动画 本质是停止定时器
            	clearInterval(obj.timer);
        	}
        	obj.style.left = obj.offsetLeft + 1 + 'px';
    	}, 30);
    }
    
    var div = document.querySelector('div');
    var span = document.querySelector('span');
    var btn = document.querySelector('btn');
    // 调用函数
    animate(div, 300);
    btn.addEventListener('click', function() {
        animate(span, 200);
    });
</script>

缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来

思路：

让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
核心算法：(目标值-现在的位置) / 10 做为每次移动的距离步长
停止的条件是：让当前盒子位置等于目标位置就停止定时器
注意步长值需要取整

<div style="position: relative"></div>
<span style="position: relative"></span>
<button>点击</button>
<script>
    // 缓动动画函数封装obj目标对象 target 目标位置
    // 思路：
    // 1. 让盒子每移动的距离慢慢变小，速度就会慢慢落下来
    // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
    // 3. 停止的条件是：让当前盒子位置等于目标位置就停止定时器
    function animate(obj, target) {
        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            // 步长值写到定时器的里面
            // 把我们步长值改为整数 不要出现小数的问题
            var step = Math.ceil((target  obj.offsetLeft) / 10);
        	if (obj.offsetLeft == target) {
                // 停止动画 本质是停止定时器
            	clearInterval(obj.timer);
        	}
            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        	obj.style.left = obj.offsetLeft + step + 'px';
    	}, 30);
    }
    
    var div = document.querySelector('div');
    var span = document.querySelector('span');
    var btn = document.querySelector('btn');
    // 调用函数
    animate(div, 300);
    btn.addEventListener('click', function() {
        animate(span, 200);
    });
    // 匀速动画 就是盒子是当前的位置 + 固定的值
    // 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10
</script>

动画函数多个目标值之间移动

可以让动画函数从 800 移动到 500

当我们点击按钮时候，判断步长是正值还是负值

如果是正值，则步长往大了取整
如果是负值，则步长向小了取整

<div></div>
<button class='btn500'>点击500</button>
<button class='btn800'>点击800</button>
<script>
    // 缓动动画函数封装obj目标对象 target 目标位置
    // 思路：
    // 1. 让盒子每移动的距离慢慢变小，速度就会慢慢落下来
    // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
    // 3. 停止的条件是：让当前盒子位置等于目标位置就停止定时器
    function animate(obj, target) {
        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            // 步长值写到定时器的里面
            // 把我们步长值改为整数 不要出现小数的问题
            // var step = Math.ceil((target  obj.offsetLeft) / 10);
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step); 
        	if (obj.offsetLeft == target) {
                // 停止动画 本质是停止定时器
            	clearInterval(obj.timer);
        	}
            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        	obj.style.left = obj.offsetLeft + step + 'px';
    	}, 30);
    }
    
    var div = document.querySelector('div');
    var btn500 = document.querySelector('.btn500');
    var btn800 = document.querySelector('.btn800');
    // 调用函数
    btn500.addEventListener('click', function() {
        animate(div, 500);
    });
    btn800.addEventListener('click', function() {
        animate(div, 800);
    });
    // 匀速动画 就是盒子是当前的位置 + 固定的值
    // 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10
</script>

动画函数添加回调函数

回调函数原理：函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行之后，在执行传进去的这个函数，这个过程就叫做回调

回调函数写的位置：定时器结束的位置

<div></div>
<button class='btn500'>点击500</button>
<button class='btn800'>点击800</button>
<script>
    // 缓动动画函数封装obj目标对象 target 目标位置
    // 思路：
    // 1. 让盒子每移动的距离慢慢变小，速度就会慢慢落下来
    // 2. 核心算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
    // 3. 停止的条件是：让当前盒子位置等于目标位置就停止定时器
    function animate(obj, target, callback) {
        // 先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer);
        obj.timer = setInterval(function() {
            // 步长值写到定时器的里面
            // 把我们步长值改为整数 不要出现小数的问题
            // var step = Math.ceil((target  obj.offsetLeft) / 10);
            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();
                }
        	}
            // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        	obj.style.left = obj.offsetLeft + step + 'px';
    	}, 30);
    }
    
    var div = document.querySelector('div');
    var btn500 = document.querySelector('.btn500');
    var btn800 = document.querySelector('.btn800');
    // 调用函数
    btn500.addEventListener('click', function() {
        animate(div, 500);
    });
    btn800.addEventListener('click', function() {
        animate(div, 800, function() {
            // alert('你好吗');
            div.style.backgroundColor = 'red';
        });
    });
    // 匀速动画 就是盒子是当前的位置 + 固定的值
    // 缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10
</script>