1. 原理和实现
缓动动画的工作原理在于：让其目标值减去开始位置的值，我们假设目标位置
target=800px，开始位置在begin=0的位置。按照一定比例缩小移动距离，
得出一个运动的距离。
speed=（target-begin）/20
根据盒子所在位置的不同，也就得出了移动距离的不同。
begin=begin+speed;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* { margin: 0; padding: 0; }
div{ width: 100px; height: 100px; background: red; position: absolute; }
</style>
</head>
<body>
<button id="btn">开始动画,改变位置和高度</button>
<button id="btn1">改变高度</button>
<div id="box"></div>
<script>
window.onload = function () {
function $(TagId){return document.getElementById(TagId);}
var box=$("box");
var btn=$("btn");
var btn1=$("btn1");
var target=400;
btn.onclick=function(){
clearInterval(timer);
var timer=setInterval(function () {
var begin = box.offsetLeft;
var begin = box.offsetLeft;
var speed=Math.ceil((target-begin)/10);
begin=begin+speed;
box.style.left=begin+"px";
if(begin==target){
clearInterval(timer);
}
},20)
};
var target1=0;
btn1.onclick=function(){
clearInterval(timer1);
var timer1=setInterval(function () {
var begin1 = box.offsetLeft;
var speed1=(target1-begin1)/10;
speed1=Math.floor(speed1);
begin1=begin1+speed1;
box.style.left=begin1+"px";
if(begin1==target1){
clearInterval(timer1)
}
},20)
}
}
</script>
</body>
</html>
2. 初步封装
提取出相同部分分代码；
function boffer(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var begin = box.offsetLeft;
var speed =(target-begin)/10;
speed = target > begin?Math.ceil(speed):Math.floor(speed);
begin=begin+speed;
box.style.left=begin+"px";
if(begin==target){
clearInterval(obj.timer)
}
},20)
}
如果是向负方向移动需要用一个判断语句来为速度取整
ceil()向大数值取整
floor（）向小值取整
speed = target > begin?Math.ceil(speed):Math.floor(speed);
3. 封装进一步优化
- 提取出属性值可以更进一步对元素的宽度、高度、位置进行动态修改。
function boffer(obj,target,attr){
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var begin = parseInt(getCss(obj,attr));
var speed =(target-begin)/10;
speed = target > begin?Math.ceil(speed):Math.floor(speed);
begin=begin+speed;
box.style[attr] =begin+"px";
if(begin==target){
clearInterval(obj.timer)
}
},20)
}
以下是获取标签属性
function getCss(obj,attr){
if(obj.currentStyle){
//IE游览器下获取属性
return obj.currentStyle[attr];
}else{
//其他游览器获取方式
return window.getComputedStyle(obj,null)[attr];
}
}
网友评论