1. 动画实现原理
核心原理：通过定时器 setInterval() 不断移动盒子位置。
实现步骤：
-
获得盒子当前位置
-
让盒子在当前位置加上1个移动距离
-
利用定时器不断重复这个操作
-
加一个结束定时器的条件
-
注意此元素需要添加定位，才能使用element.style.left
<body>
<div></div>
<script>
//动画原理
// 1.获得盒子当前位置
// 2.让盒子在当前位置加上1个移动距离
// 3.利用定时器不断重复这个操作
// 4.加一个结束定时器的条件
// 5.注意此元素需要添加定位， 才能使用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>
</body>
2.简单动画函数封装原理
<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>
3. 动画函数给不同元素记录不同定时器
如果多个元素都使用这个动画函数，每次都要var 声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。
核心原理：利用 JS 是一门动态语言，可以很方便的给当前对象添加属性。
<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( 'button' );
//调用函数
animate(div, 300) ;
btn.addEventListener( 'click', function() {
animate(span, 200);
})
</script>
4.动画缓动效果原理
缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来
思路：
-
让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
-
核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长
-
停止的条件是： 让当前盒子位置等于目标位置就停止定时器
-
注意步长值需要取整 (往上取整)
<script>
// 思路：
// 1. 让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
// 2. 核心算法： (目标值 - 现在的位置) / 10 做为每次移动的距离步长
// 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
// 4. 注意步长值需要取整 (往上取整)
var span = document.querySelector('span')
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
function animate(obj, target) {
// 清除以前的定时器，只保留一个定时器
clearInterval(obj.timer);
obj.timer = setInterval(function () {
// 步长值写到定时器里面
// 步长需要取整 以免出现小数
// var step = Math.cell((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';
}, 15);
}
btn500.addEventListener('click', function () {
animate(span, 500);
});
btn800.addEventListener('click', function () {
animate(span, 800);
});
</script>
5. 动画函数多个目标值之间移动
可以让动画函数从 800 移动到 500。
当我们点击按钮时候，判断步长是正值还是负值
1.如果是正值，则步长往大了取整
2.如果是负值，则步长 向小了取整
6. 动画函数添加回调函数
回调函数原理：函数可以作为一个参数。将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数，
这个过程就叫做回调。
回调函数写的位置：定时器结束的位置。
因为以后经常使用这个动画函数,可以单独封装到一个js文件里面,使用的时候引用这个js文件即可。
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 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();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3i00ygbffg6cs