加载中…JavaScript缓动效果
(2011-04-07 11:58:24)
标签：
javascript缓动加速减速步长系数it |
分类： Javascript |
果真生病的时候思路比较畅通, 人就是这么犯贱，我是人，所以我也犯贱......
今天做了个缓动效果或者叫弹簧，关于元素位置加速减速移动的：
缓动效果，实际上就是要实现定点坐标之间的加速和减速移动。
点到点的移动，一般就是取当前值加上一个定量再赋值，然而缓动就是当前值加上一个变量再赋值来实现的。
减速效果，一般的做法是通过用目标值减当前值（得到两者距离）除以一个系数(一般为正整数)，得到一个步长， 然后当前值加上这个步长作为新的当前值，然后反复取值直到当前值等于目标值。
由于这样得到的步长是越来越小的，而步长就是移动的值，所以就实现了减速效果。
不知道你看懂了没，举个例子：
假如我想把div从0px移动到1000px，系数为10，
那么第一个步长就是（1000-0）/10=100，那么第一次循环就是把元素从0px移动到100px的位置；
第二步长就是（1000-100）/10=90，那么第一次循环就是把元素从100px移动到190px的位置；
这样计算下去，步长变小，那么移动的相对位移就越来越小，就是减速效果。
加速效果原理是一样的，不过跟减速效果相反，可以设定一个固定的步长（比如10），乘以一个系数（比如1.5）给自己赋值，然后与当前值相加再赋值，这样步长就越来越大，元素位移也就越来越大，就实现了加速效果。
附上我自己写的一段代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spring</title>
<style type="text/css">
body{ background:#CCCCCC;}
.div1{ height:200px; width:300px; background:#FFCC99; border:1px solid #FF6633; position: absolute; left:0px; top:0px;}
input{ margin-top:200px;}
</style>
</head>
<body>
<div class="div1" id="div1">
spring
</div>
<p><input id="btn" type="button" onclick="move()" value="移动"></p>
<script language="javascript">
var step,timer,maxd=1000,mind=0,tips=false,step=10,speed=10;
var string;
function $(name){
return document.getElementByIdx_x_x(name);
}
function gs(obj,attr){
if(obj.currentStyle)
return obj.currentStyle[attr];
else
return window.getComputedStyle(obj,null)[attr];
}
function move(){
if(!tips){
if(parseInt(gs($("div1"),"left"))>=maxd){
clearTimeout(timer);
$("div1").style.left=maxd+"px";
$("btn").value="归位";
tips=true;
}
else{
step=Math.ceil((maxd-parseInt(gs($("div1"),"left")))/speed);
string+=step+" ";
$("div1").style.left=parseInt(gs($("div1"),"left"))+step+"px";
clearTimeout(timer);
timer=setTimeout(move,2);
}
}
else{
if(parseInt(gs($("div1"),"left"))<=mind){
clearTimeout(timer);
$("div1").style.left=mind+"px";
$("btn").value="移动";
step=10;
tips=false;
}
else{
$("div1").style.left=parseInt(gs($("div1"),"left"))-Math.ceil(step)+"px";
step*=1.5;
clearTimeout(timer);
timer=setTimeout(move,2);
}
}
}
</script>
</body>
</html>
同样的道理，可以把"缓动"运用到透明，大小，旋转等变换效果中。
今天做了个缓动效果或者叫弹簧，关于元素位置加速减速移动的：
缓动效果，实际上就是要实现定点坐标之间的加速和减速移动。
点到点的移动，一般就是取当前值加上一个定量再赋值，然而缓动就是当前值加上一个变量再赋值来实现的。
减速效果，一般的做法是通过用目标值减当前值（得到两者距离）除以一个系数(一般为正整数)，得到一个步长， 然后当前值加上这个步长作为新的当前值，然后反复取值直到当前值等于目标值。
由于这样得到的步长是越来越小的，而步长就是移动的值，所以就实现了减速效果。
不知道你看懂了没，举个例子：
假如我想把div从0px移动到1000px，系数为10，
那么第一个步长就是（1000-0）/10=100，那么第一次循环就是把元素从0px移动到100px的位置；
第二步长就是（1000-100）/10=90，那么第一次循环就是把元素从100px移动到190px的位置；
这样计算下去，步长变小，那么移动的相对位移就越来越小，就是减速效果。
加速效果原理是一样的，不过跟减速效果相反，可以设定一个固定的步长（比如10），乘以一个系数（比如1.5）给自己赋值，然后与当前值相加再赋值，这样步长就越来越大，元素位移也就越来越大，就实现了加速效果。
附上我自己写的一段代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spring</title>
<style type="text/css">
body{ background:#CCCCCC;}
.div1{ height:200px; width:300px; background:#FFCC99; border:1px solid #FF6633; position: absolute; left:0px; top:0px;}
input{ margin-top:200px;}
</style>
</head>
<body>
<div class="div1" id="div1">
spring
</div>
<p><input id="btn" type="button" onclick="move()" value="移动"></p>
<script language="javascript">
var step,timer,maxd=1000,mind=0,tips=false,step=10,speed=10;
var string;
function $(name){
return document.getElementByIdx_x_x(name);
}
function gs(obj,attr){
if(obj.currentStyle)
return obj.currentStyle[attr];
else
return window.getComputedStyle(obj,null)[attr];
}
function move(){
if(!tips){
}
else{
}
}
</script>
</body>
</html>
同样的道理，可以把"缓动"运用到透明，大小，旋转等变换效果中。
喜欢
0
赠金笔
前一篇：Js添加样式名
后一篇：ie6实现fixed