我是靠谱客的博主 开心茉莉，最近开发中收集的这篇文章主要介绍动画效果函数动画实现原理代码动画函数封装缓动效果原理动画函数添加回调函数动画函数封装到单独js文件，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
动画实现原理
核心原理:通过定时器setInterval()不断移动盒子位置
实现步骤:
- 获得盒子当前位置
- 让盒子在当前位置加上一个移动距离
- 利用定时器不断重复这个操作
- 加上一个结束定时器的操作
注意:
- 一定要给动画的元素添加定位才能使用element.style.left等方法
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>333333</title>
<style>
div {
position: absolute;
left: 0;
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 >= 400){
clearInterval(timer);
}
div.style.left = div.offsetLeft + 1 +'px';
}, 30);
</script>
</body>
</html>
通过定时器每隔30ms让div往右移动一个像素,当div的offsetLeft≥400的时候清除定时器,即可停止动画
动画函数封装
动画函数的封装需要传递两个参数,动画对象和动画移动的距离
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>333333</title>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
top: 200px;
left: 0;
display: block;
width: 150px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<button>点击开启蓝色方块定时器</button>
<div></div>
<span></span>
<script>
//给不同的元素指定不同的定时器
function animate(obj, target) {
//如下给按钮绑定点击后添加定时器的功能 多次点击会导致元素的速度加快
//解决方法就是让元素只有一个定时器执行 即清除多余(原来的)定时器
clearInterval(obj.timer);
//给当前obj添加属性
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, 300);
})
</script>
</body>
</html>
给不同元素记录不同定时器
如上,如果多个元素使用同个动画和散户,每次都会var声明定时器,可以给不同元素使用不同定时器
原理:给当前对象添加属性,同时可以避免每次使用封装函数都申请一个内存
多次点击开启定时器按钮元素速度变快解决方法
在点击按钮后,首先清除原有的定时器,保证只有一个定时器在运行
缓动效果原理
- 让盒子每次移动的距离慢慢变小,速度就会慢慢降低
- 缓动动画公式:(目标值 - 现在的位置) / 10 作为每次移动的距离长度
- 当前盒子位置等于目标位置作为条件停止定时器
- 把步长值改为整数,避免出现整数的问题,否则会出现例如目标为500却只到496.6等类似问题
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>333333</title>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
top: 200px;
left: 0;
display: block;
width: 150px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<button class="btn500">点击蓝色方块到500</button>
<button class="btn800">点击蓝色方块到800</button>
<div></div>
<span></span>
<script>
//给不同的元素指定不同的定时器
function animate(obj, target) {
//如下给按钮绑定点击后添加定时器的功能 多次点击会导致元素的速度加快
//解决方法就是让元素只有一个定时器执行 即清除多余(原来的)定时器
clearInterval(obj.timer);
//给当前obj添加属性
obj.timer = setInterval(function () {
//将步长值写道定时器里面
//把步长值改为整数 不要出现小数的问题 使用Math.ceil()方法向上取整
//往回退的时候 step为负值 则需要Math.floor()方法向下取整
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == target){
clearInterval(obj.timer);
}
obj.style.left = obj.offsetLeft + step +'px';
}, 15);
}
//动画原理
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
//调用函数
animate(div, 300);
btn500.addEventListener('click', function () {
animate(span, 500);
})
btn800.addEventListener('click', function () {
animate(span, 800);
})
</script>
</body>
</html>
需要注意的是,使用了obj.timer来创建定时器时,clearInterval()括号内也必须改成obj.timer,否则将会报错
缓动动画往回走的过程中,变量step是负值,需要判断step是正值还是负值,从而改变取整方法为Math.floor来对step进行向下取整
动画函数添加回调函数
回调函数原理:函数可以作为一个参数,将这个函数作为一个参数传导另一个函数里面,当那个函数执行完之后,再执行传进去的这个函数,这个过程就叫做回调
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>333333</title>
<style>
div {
position: absolute;
left: 0;
width: 100px;
height: 100px;
background-color: pink;
}
span {
position: absolute;
top: 200px;
left: 0;
display: block;
width: 150px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<button class="btn500">点击蓝色方块到500</button>
<button class="btn800">点击蓝色方块到800</button>
<div></div>
<span></span>
<script>
//给不同的元素指定不同的定时器
function animate(obj, target, callback) {
// console.log(callback); 相当于callback = function() {}
//通过callback形参将方法传递进来 调用的时候callback()
//如下给按钮绑定点击后添加定时器的功能 多次点击会导致元素的速度加快
//解决方法就是让元素只有一个定时器执行 即清除多余(原来的)定时器
clearInterval(obj.timer);
//给当前obj添加属性
obj.timer = setInterval(function () {
//将步长值写道定时器里面
//把步长值改为整数 不要出现小数的问题 使用Math.ceil()方法向上取整
//往回退的时候 step为负值 则需要Math.floor()方法向下取整
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();
}
}
obj.style.left = obj.offsetLeft + step +'px';
}, 15);
}
//动画原理
var div = document.querySelector('div');
var span = document.querySelector('span');
var btn500 = document.querySelector('.btn500');
var btn800 = document.querySelector('.btn800');
//调用函数
animate(div, 300);
btn500.addEventListener('click', function () {
animate(span, 500);
})
btn800.addEventListener('click', function () {
animate(span, 800, function () {
//将此处的方法作为一个实参传递回封装函数的callback形参中
//在形参中调用这个方法作为回调函数
// alert('回调函数');
span.style.backgroundColor = 'skyblue';
});
})
</script>
</body>
</html>
将function(){}写在调用函数中作为实参,传回animate方法的形参中作为回调函数使用
动画函数封装到单独js文件
动画函数的使用较为频繁,将其封装到一个独立js文件需要时直接引用
代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>333333</title>
<style>
.sliderbar {
position: relative;
margin: 100px auto;
width: 120px;
height: 40px;
background-color: pink;
}
span {
position: absolute;
display: block;
line-height: 40px;
text-align: center;
left: 0;
top: 0;
width: 40px;
height: 40px;
background-color: skyblue;
z-index: 999;
cursor: pointer;
}
.con {
position: absolute;
background-color: salmon;
left: 0;
top: 0;
text-align: center;
height: 40px;
width: 80px;
}
</style>
<script src="../黑马/js/animate.js"></script>
</head>
<body>
<div class="sliderbar">
<span>←</span>
<div class="con">个人中心</div>
</div>
<script>
var sliderbar = document.querySelector('.sliderbar');
var con = document.querySelector('.con');
var span = document.querySelector('span');
var conLeft = con.offsetLeft;
span.addEventListener('mouseenter', function () {
animate(con, con.offsetLeft - con.offsetWidth, function () {
sliderbar.children[0].innerHTML = '→';
});
})
span.addEventListener('mouseout', function() {
animate(con, conLeft, function () {
sliderbar.children[0].innerHTML = '←';
});
})
</script>
</body>
</html>
animate.js 代码
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();
}
}
obj.style.left = obj.offsetLeft + step +'px';
}, 15);
}
最后
以上就是开心茉莉为你收集整理的动画效果函数动画实现原理代码动画函数封装缓动效果原理动画函数添加回调函数动画函数封装到单独js文件的全部内容，希望文章能够帮你解决动画效果函数动画实现原理代码动画函数封装缓动效果原理动画函数添加回调函数动画函数封装到单独js文件所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复