JS特效之简单动画封装
2017-07-17 22:32
405 查看
这是一个简单的盒子移动问题,个人觉得比较经典,容易理解。
以上代码运行以后,你会发现,你只有在点击第一次的时候,得到想要的效果,多次点击就会出现bug,下面我们来看看如何解决这些bug。
经过上述处理,可以达到多次点击不出现bug的效果。
如果有一天要传递另外一个盒子,那么我们的方法就不好用了,所以应该增加一个参数,使得封装的动画可以在任何一个盒子上使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
margin: 0;
padding: 5px;
height: 200px;
background-color: #ddd;
position: relative;
}
button {
margin: 5px;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0px;
top: 40px;
}
.box3 {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0px;
top: 150px;
}
</style>
</head>
<body>
<div class="box1">
<button>运动200</button>
<button>运动400</button>
<div class="box2"></div>
<div class="box3"></div>
</div>
<script>
var btnArr = document.getElementsByTagName("button");
var box2 = document.getElementsByClassName("box2")[0];
var box3 = document.getElementsByClassName("box3")[0];
var timer = null;
//绑定事件
btnArr[0].onclick = function () {
//如果有一天要传递另外一个盒子,那么我们的方法就不好用了,
// 所以我们要增加第二个参数:被移动的盒子本身。
animate(box3,200);
}
btnArr[1].onclick = function () {
animate(box3,400);
}
function animate(ele,target) {
//常识:调用定时器,先清除定时器。
//一个盒子只能有一个定时器,这样的话,被移动的是这个盒子本身
clearInterval(timer);
var speed = (target - ele.offsetLeft)>0 ? 10 : -10;
timer = setInterval(function () {
var val = target - ele.offsetLeft;
//盒子自身的位置+步长
ele.style.left = ele.offsetLeft + speed + "px";
if(Math.abs(val)<10){
ele.style.left = target + "px";
clearInterval(timer);
}
},30);
}
</script>
</body>
</html>
最后一种方法可以运用到多个不同盒子中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画封装</title> <style> .box1 { margin: 0; padding: 10px; height: 200px; background-color: lightpink; position: relative; } button { margin: 5px; } .box2 { width: 100px; height: 100px; background-color: red; position: absolute; left: 0; } </style> </head> <body> <div class="box1"> <button>运动300</button> <button>运动600</button> <div class="box2"></div> </div> <script> var btnArr = document.getElementsByTagName("button"); var box2 = document.getElementsByClassName("box2")[0]; var timer = null; btnArr[0].onclick = function () { timer = setInterval(function () { //盒子自身的位置+步长 box2.style.left = box2.offsetLeft + 10 + "px"; //如果停止盒子?清除定时器 if(box2.offsetLeft === 300){ clearInterval(timer); } },30); } btnArr[1].onclick = function () { timer = setInterval(function () { //盒子自身的位置+步长 box2.style.left = box2.offsetLeft + 10 + "px"; //如果停止盒子?清除定时器 if(box2.offsetLeft == 600){ clearInterval(timer); } },30); } </script> </body> </html>
以上代码运行以后,你会发现,你只有在点击第一次的时候,得到想要的效果,多次点击就会出现bug,下面我们来看看如何解决这些bug。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .box1 { margin: 0; padding: 5px; height: 200px; background-color: #ddd; position: relative; } button { margin: 5px; } .box2 { width: 100px; height: 100px; background-color: red; position: absolute; left: 0px; } </style> </head> <body> <div class="box1"> <button>运动200</button> <button>运动400</button> <div class="box2"></div> </div> <script> var btnArr = document.getElementsByTagName("button"); var box2 = document.getElementsByClassName("box2")[0]; var timer = null; btnArr[0].onclick = function () { animate(200); } btnArr[1].onclick = function () { animate(400); } function animate(target) { //bug1:点击多次以后,越来越快:解决:每次只能开一个定时器,执行定时器前先清除定时器。 //常识:调用定时器,先清除定时器。 clearInterval(timer); //bug2:多次点击,无法返回,一直向后走 // 原因:步长不能为恒定值, // 传递的目标值如果比当前值大,步长为+10; // 传递的目标值如果比当前值小,步长为-10; var speed = (target - box2.offsetLeft)>0 ? 10 : -10; timer = setInterval(function () { //bug3:二次点击不停止,来回移动问题 //原因:如果当前值===目标值,那么先判断之前的距离还有多少,如果小于不长,那就不走了。 var val = target - box2.offsetLeft; //盒子自身的位置+步长 box2.style.left = box2.offsetLeft + speed + "px"; if(Math.abs(val)<10){ box2.style.left = target + "px"; clearInterval(timer); } },30); } </script> </body> </html>
经过上述处理,可以达到多次点击不出现bug的效果。
如果有一天要传递另外一个盒子,那么我们的方法就不好用了,所以应该增加一个参数,使得封装的动画可以在任何一个盒子上使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
margin: 0;
padding: 5px;
height: 200px;
background-color: #ddd;
position: relative;
}
button {
margin: 5px;
}
.box2 {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0px;
top: 40px;
}
.box3 {
width: 100px;
height: 100px;
background-color: pink;
position: absolute;
left: 0px;
top: 150px;
}
</style>
</head>
<body>
<div class="box1">
<button>运动200</button>
<button>运动400</button>
<div class="box2"></div>
<div class="box3"></div>
</div>
<script>
var btnArr = document.getElementsByTagName("button");
var box2 = document.getElementsByClassName("box2")[0];
var box3 = document.getElementsByClassName("box3")[0];
var timer = null;
//绑定事件
btnArr[0].onclick = function () {
//如果有一天要传递另外一个盒子,那么我们的方法就不好用了,
// 所以我们要增加第二个参数:被移动的盒子本身。
animate(box3,200);
}
btnArr[1].onclick = function () {
animate(box3,400);
}
function animate(ele,target) {
//常识:调用定时器,先清除定时器。
//一个盒子只能有一个定时器,这样的话,被移动的是这个盒子本身
clearInterval(timer);
var speed = (target - ele.offsetLeft)>0 ? 10 : -10;
timer = setInterval(function () {
var val = target - ele.offsetLeft;
//盒子自身的位置+步长
ele.style.left = ele.offsetLeft + speed + "px";
if(Math.abs(val)<10){
ele.style.left = target + "px";
clearInterval(timer);
}
},30);
}
</script>
</body>
</html>
最后一种方法可以运用到多个不同盒子中。
相关文章推荐
- js基础03特效简单响应式页面布局client()函数封装
- js-匀速/缓动动画-简单封装
- js学习心得_一个简单的动画库封装tween.js
- JS简单动画封装浅析
- js动画基本原理和简单封装
- JS简单动画封装
- JS简单动画封装浅析
- 004_JS封装简单动画函数
- js 匀速/缓动动画 简单封装
- js实现简单的动画(4个按钮控制图片上下左右移动)
- js实现简单的动画(游动的鱼)
- 一个简单的JS鼠标悬停特效具体方法
- JS中简单的滑动特效
- js cookie操作的简单封装
- 简单封装js的dom查询实例代码
- js单选按钮动画特效
- js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
- js中form表单的简单封装
- JS简单特效
- 你见过js画出这样的矢量图以及动画特效吗?