动画函数的实现、封装、回调函数

103 阅读 0 评论 68 点赞

我是靠谱客的博主感性小蘑菇，最近开发中收集的这篇文章主要介绍动画函数的实现、封装、回调函数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

动画函数封装

动画实现原理：

核心原理：通过定时器 setInterval（）不断移动盒子

实现步骤：

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

 <style>
div {
position: absolute;
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector("div");
var timer = setInterval(function () {
if (div.offsetLeft >= 400) {
//停止动画 即停止定时器
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 + "px";
}, 30);
</script>
</body>

动画函数的封装


//动画函数的封装
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");
animate(div, 300);

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

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


//给不同元素记录不同定时器
function animate(obj, target) {
obj.timer = setInterval(function () {
if (obj.offsetLeft >= target) {
//停止动画 即停止定时器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 1 + "px";
}, 30);
}
var div = document.querySelector("div");
animate(div, 300);

但如果设置了点击事件动画才开始时，如果不断点击按钮，对应元素的速度会越来越快，因为开启了太多的定时器。

解决方法：
让元素只有一个定时器即可，先清除以前的定时器，只保留当前的一个定时器执行


//给不同元素记录不同定时器
function animate(obj, target) {
//先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function () {
........
}

缓动效果原理

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

让盒子每次移动的距离慢慢变小，速度就会慢慢落下来
核心算法：（目标值-现在的位置）/ 10 作为每次移动的距离步长
停止的条件是：让当前位置等于目标位置就停止定时器
匀速动画：盒子当前的位置 + 固定的值
缓动动画：盒子当前的位置 +（目标值-现在的位置）/ 10


<style>
div {
width: 200px;
height: 200px;
background: blueviolet;
position: absolute;
}
</style>
</head>
<body>
<button class="go">点击到500</button>
<button class="back">点击到800</button>
<div></div>
<script>
var btnGo = document.querySelector(".go");
var btnBack = document.querySelector(".back");
var div = document.querySelector("div");
btnGo.addEventListener("click", function () {
animate(div, 500);
});
btnBack.addEventListener("click", function () {
animate(div, 800);
});
function animate(obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//步长值写到定时器里面
//把步长值取成整数，往上取整Math.ceil()
var step = (target - obj.offsetLeft) / 10;
//考虑到可能会后退，会是负值，
step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
}
//把每次加1 这个步长值改为一个慢慢变小的值
步长公式：（目标值-现在的位置）/ 10
obj.style.left = obj.offsetLeft + step + "px";
}, 15);
}
</script>
</body>

动画函数添加回调函数

回调函数原理：函数可以作为一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，这个过程就是回调。
回调函数的位置：定时器结束的位置。


function animate(obj, target,callback) {
//callback = function(){} 调用的时候 callback()
..............
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
//回调函数写到定时器结束里面
if (callback) {
//调用函数
callback();
}
}
}
btnGo.addEventListener("click", function () {
animate(div, 500, function () {
alert('你好吗');
//前面的动画都结束后才会调用这个函数 弹出 你好吗
});
});
//三个参数，最后一个参数是函数

动画函数封装到单独JS文件里面

因为以后会经常用到这个动画函数，可以单独封装到一个JS文件里面，使用的时候引用JS文件即可
JS文件如下：

function animate(obj, target, callback) {
//callback = function(){} 调用的时候 callback()
clearInterval(obj.timer);
obj.timer = setInterval(function () {
//步长值写到定时器里面
//把步长值取成整数，往上取整Math.ceil()
var step = (target - obj.offsetLeft) / 10;
//考虑到可能会后退，会是负值，
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";
}, 15);
}