封装动画以及原理分析过程

92 阅读 0 评论 61 点赞

我是靠谱客的博主霸气口红，最近开发中收集的这篇文章主要介绍封装动画以及原理分析过程，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

动画得原理以及封装分析

第一步 核心原理：通过定时器 setInterval() 不断移动盒子位置。
实现步骤：

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

第二步 函数需要传递2个参数，动画对象(就是你给谁设置动画)和移动到的目标距离。

第三步 动画函数给不同元素记录不同定时器在我们日常开发中如果多个元素都使用这个动画函数，每次都要var 声明定时器这会导致我们得代码效力变低。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性

第四步 缓动效果及原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：

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

注意：
如果我们不要缓动效果就是盒子是当前的位置 + 固定的值 10
如果要缓动动画就是盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10）

第五步 动画函数多个目标值之间移动
比如我可以让动画函数从800移动到500 500移动到800 但是我们要判断取整数才能准确到达目标位置
判断步长距离是正值还是负值
如果是正值，则步长往大了取整
如果是负值，则步长向小了取整

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

总结： 1.我们在移动动画距离得时候一定要取整数不然它得目标位置有差距，2.如果我们是给元素添加得是点击事件后才让动画走得，这时候会有一个Bug那就是你反复得点击按钮，这时候元素会走的越来越快，这是因为你每点击一次，定时器就每执行了一次所以你点击得越快那么你速度就走得越快，那我们怎么解决勒？那就是在你点击下一次之前先清除以前得定时器(动画函数)，只保留当前的一个定时器执行。这样不管你点击了多少次，都只是点击了一次 3.回调函数是写在动画函数形参最后一个得，而调用回调函数则是写在定时器结束里面，回调函数在结束定时器后才会去执行，是最后一个执行得，判断它有参数传过来才去执行，如果没有则不执行

代码演示


// 缓动动画函数封装obj目标对象 target目标位置
callback = function(){}
调用的时候callback()
function animate(obj, target, callback) {
clearInterval(obj.timer); // 先清除以前的定时器，只保留当前的一个定时器执行
obj.timer = setInterval(function() { //这里得obj.timer代表得是元素使用不同的定时器 obj可以是任意对象 如box.timer就代表这个定时器是box得就是往对象里面添加属性
// 步长值写到定时器的里面
var step = (target - obj.offsetLeft) / 10; //这里求得是缓动动画
step = step > 0 ? Math.ceil(step) : Math.floor(step); // 把我们步长值改为整数 不要出现小数的问题 负值向小了取整，正值向大了取整
if (obj.offsetLeft == target) { //判断元素位置等于移动目标停止定时器
clearInterval(obj.timer); // 停止动画 本质是停止定时器
// 回调函数写到定时器结束里面因为它是等到动画结束完毕后才去执行得
callback&&callback() //这里是在判断有没有回调函数参数传进来如果有则调用执行没有则不执行 注意这回调函数是最后执行得意思是动画完成后才执行得
}
// 如果我们不要缓动效果 就是 盒子是当前的位置 + 固定的值 10
// 如果要缓动动画就是 盒子当前的位置 + 变化的值(目标值 - 现在的位置) / 10)
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}

调用动画函数代码演示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="16.封装动画.js"></script>
<style>
* {
padding: 0px;
margin: 0px;
}
.box {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
}
button {
margin-top: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<button>点击移动400</button>
<button>点击移动800</button>
<script>
var box = document.querySelector('.box');
var btn = document.querySelectorAll('button');
btn[0].addEventListener('click', function() {
animate(box, 400, function() {
box.style.backgroundColor = 'blue'
})
})
btn[1].addEventListener('click', function() {
animate(box, 800, )
})
</script>
</body>
</html>