JS动画
- 动画实现原理
- 实现步骤
- 动画函数简单封装
- 给不同元素记录不同定时器
- 缓动动画
- 动画函数的使用
动画实现原理
核心原理：通过定时器setInterval（）不断移动盒子位置。
实现步骤
1、获得盒子当前位置
2、让盒子在当前位置加上1个移动距离。
3、利用定时器不断重复这个操作
4、加一个结束定时器的条件
5、注意此元素需要添加定位，才能使用element.style.left
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画原理</title>
<style>
div{
position: absolute;
left:0;
width: 100px;
height:100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
// 1、获得盒子当前位置
// 2、让盒子在当前位置加上1个移动距离。
// 3、利用定时器不断重复这个操作
// 4、加一个结束定时器的条件
// 5、注意此元素需要添加定位，才能使用element.style.left
var div = document.querySelector('div');
// div.style.left = div.offsetLeft + 5 + 'px';
var timer = setInterval(function () {
if(div.offsetLeft >= 400){
//停止动画 本质是停止定时器
clearInterval(timer);
}
div.style.left = div.offsetLeft + 5 + 'px';
},60)
</script>
</body>
</html>
动画函数简单封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画原理</title>
<style>
div{
position: absolute;
left:0;
width: 100px;
height:100px;
background-color: pink;
}
span {
position: absolute;
display: block;
left: 0;
top:200px;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<div></div>
<span></span>
<script>
//简单动画函数封装obj目标对象target目标位置
function animate(obj,target) {
// div.style.left = div.offsetLeft + 5 + 'px';
var timer = setInterval(function () {
if(obj.offsetLeft >= target){
//停止动画 本质是停止定时器
clearInterval(timer);
}
obj.style.left = obj.offsetLeft + 1 + 'px';
},60);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
//调用函数
animate(div,300)
animate(span,500)
</script>
</body>
</html>
给不同元素记录不同定时器
如果多个元素都使用这个动画函数，每次都要var声明定时器，我们可以给不同的元素使用不同的定时器（自己专门用自己的定时器）。
核心原理：利用JS是一门动态语言，可以·很方便给当前对象添加属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画原理</title>
<style>
div{
position: absolute;
left:0;
width: 100px;
height:100px;
background-color: pink;
}
span {
position: absolute;
display: block;
left: 0;
top:200px;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button>出发</button>
<div></div>
<span></span>
<script>
//简单动画函数封装obj目标对象target目标位置
function animate(obj,target) {
//当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
//解决方案就是让我们元素只有一个定时器执行
//先清除以前的定时器，只保留当前的一个定时器
clearInterval(obj.timer);
// div.style.left = div.offsetLeft + 5 + 'px';
obj.timer = setInterval(function () {
if(obj.offsetLeft >= target){
//停止动画 本质是停止定时器
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + 5 + 'px';
},60);
}
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn = document.querySelector('button');
//调用函数
animate(div,300)
btn.addEventListener('click',function (evt) {
animate(span,400);
})
</script>
</body>
</html>
缓动动画
**原理：**让元素运动速度有所变化，最常见的是让速度慢慢停下来
1、让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
2、核心算法：（目标值 - 现在的位置）/ 10 作为每次移动的距离步长
3、停止的条件是：让当前盒子位置等于目标位置就停止定时器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画原理</title>
<style>
div{
position: absolute;
left:0;
width: 100px;
height:100px;
background-color: pink;
}
span {
position: absolute;
display: block;
left: 0;
top:200px;
width: 150px;
height: 150px;
background-color: purple;
}
</style>
</head>
<body>
<button>出发</button>
<span></span>
<script>
//简单动画函数封装obj目标对象target目标位置
//当我们不断的点击按钮，这个元素的速度会越来越快，因为开启了太多的定时器
//解决方案就是让我们元素只有一个定时器执行
//先清除以前的定时器，只保留当前的一个定时器
function animate(obj, target) {
clearInterval(obj.timer);
// div.style.left = div.offsetLeft + 5 + 'px';
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);
}
//把每次加n这个步长值改为一个慢慢变小的值 步长公式：（目标值 - 现在的位置）/ 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
var span = document.querySelector('span');
var btn = document.querySelector('button');
//调用函数
btn.addEventListener('click',function (evt) {
animate(span,500);
})
</script>
</body>
</html>
动画函数的使用
因为以后经常使用这个动画函数，可以单独封装到一个JS文件里面，使用的时候引用这个JS文件即可。
1、创建一个JS文件
2、在所需页面引用JS文件
```go
<script src="JS/animate.js"></script>
