文章目录
当我们学习了动画之后,我们就能做各种各样的网页特效了。有的同学总是杠,js能做的动画css也能做。首先你是来学js的没必要杠,css的灵活度远不如js,其次做网页轮播图等特效时用js是不是方便的多
动画实现原理
核心原理:
通过定时器setInterval()不断移动盒子位置
实现步骤:
- 获得盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位,才能使用element.style.left
js的动画:
那么我们下面体会一下js的动画效果:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
div {
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
var timer = setInterval(function() {
if(div.offsetLeft >= 800)
{
clearInterval(timer);
}
else {
div.style.left = div.offsetLeft + 1 + 'px';
}
},10);
</script>
</body>
</html>
css的动画:
再复习一下css的动画效果:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<style>
div {
position: absolute;
top: 200px;
left: 200px;
width: 100px;
height: 100px;
background-color: pink;
/* animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向 */
animation: move 3s ease 0s infinite alternate;
}
@keyframes move{
from{
left: 0;
background-color: pink;
}
to{
left: 1000px;
background-color: yellow;
}
}
</style>
</head>
<body>
<div></div>
<script>
</script>
</body>
</html>
动画函数简单封装
因为我们的页面中需要用到大量的动画效果,所以能够封装成一个函数就非常方便了,注意函数需要传递两个参数,动画对象和移动到的距离
var div = document.querySelector('div');
//obj目标对象,target目标位置
function animate(obj,target) {
var timer = setInterval(function() {
if(obj.offsetLeft >= target)
{
clearInterval(timer);
}
else {
obj.style.left = obj.offsetLeft + 1 + 'px';
}
},10);
}
animate(div,800);
这样封装完的就是一个简单的动画函数,和上例中的效果相同
给不同对象添加不同的定时器
在上例中我们每调用一次动画函数就会在内存中开辟一个空间,因为我们赋值了一个var 变量。这样的话浪费内存资源。其次,如果不同元素调用动画函数,但是在我们的函数里定时器都叫timer,这很容易引起歧义。所以,我们可以给不同的元素使用自己专用的自己的定时器
核心原理:
利用js是一门动态语言,可以很方便的给当前对象添加属性
因为我们的函数传递进来的obj就是一个对象,所以我们给他添加一个属性,就避免了内存资源的浪费。并且timer属性是专门属于obj对象的,div.timer就是div对象的定时器,span.timer就是span对象的定时器
代码示例:
var div = document.querySelector('div');
//obj目标对象,target目标位置
function animate(obj,target) {
//先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
if(obj.offsetLeft >= target)
{
clearInterval(obj.timer);
}
else {
obj.style.left = obj.offsetLeft + 1 + 'px';
}
},10);
}
animate(div,800);
为什么在函数开头要加清除定时器呢,因为如果我们通过一个外部事件调用这个函数,比如点击一个按钮会调用动画函数,那如果我们不停的按这个按钮,那么就会给对象不停添加定时器,他就会越跑越快,所以在开头清除其他的定时器是必须的。
缓动动画原理
缓动动画就算让元素运动速度有所变化,最常见的就是让速度慢慢停下来
思路:
1.让盒子每次移动的距离慢慢变小,速度就会慢慢落下来
2.核心算法:(目标值-现在的位置)/ 20 做为每次移动的距离步长
3.停止的条件是:让当前盒子位置等于目标位置就停止定时器
4.注意步长值要取整
实现效果:
代码示例:
我们只需要在把代码做一点小小的改动:
<body>
<button class="first">移动到500</button>
<button class="second">移动到800</button>
<div></div>
<script>
var div = document.querySelector('div');
var btn500 = document.querySelector('.first');
var btn800 = document.querySelector('.second');
//obj目标对象,target目标位置
function animate(obj,target) {
//先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//步长值写到定时器里面
//把我们步长值改为整数,不要出现小数的问题
var step = (target-obj.offsetLeft) / 10;
//如果向右走就向上取整,向左走就向下取整
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == target)
{
clearInterval(obj.timer);
}
else {
obj.style.left = obj.offsetLeft + step + 'px';
}
},10);
}
btn500.addEventListener('click',function() {
animate(div,500);
})
btn800.addEventListener('click',function() {
animate(div,800);
})
</script>
</body>
动画函数添加回调函数
回调函数原理:
函数可以作为一个参数,将这个函数作为参数传递到另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调
我们可以加一个函数作为参数
然后把这个参数传递给实参callback
也就是说,callback = function() { } 调用的时候callback()就可以
示例代码:
function animate(obj,target,callback) {
//先清除以前的定时器,只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
//步长值写到定时器里面
//把我们步长值改为整数,不要出现小数的问题
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();//调用函数
}
}
else {
obj.style.left = obj.offsetLeft + step + 'px';
}
},10);
}
btn500.addEventListener('click',function() {
animate(div,500);
})
btn800.addEventListener('click',function() {
animate(div,800,function(){
alert('加油呀');
});
})
我们给类名是second的按钮添加了一个回调函数,那么这个代码的执行效果是会怎么样的呢?
实现效果:
我们可以看到当单击第二个按钮的时候,盒子先移动到800的位置,然后再弹出加油呀的对话框。这就是回调函数,执行完整个函数之后,再执行这个回调函数。
动画函数封装到单独js文件里面
因为以后经常使用这个动画函数,可以单独封装到一个js文件里,使用的时候引入这个文件就行