js动画

来源：互联网发布：unity3d lerp函数编辑：程序博客网时间：2024/05/17 02:32

简单动画（原理都是设置一个固定speed，都是匀速运动）
- 速度动画
- 透明度动画
- 注意：注意清除动画
缓冲动画（speed是一个变的值，但是注意取整）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>速度动画</title>
<style type="text/css">
*{margin:0; padding:0;}
a{text-decoration:none;color:#000; }
.wrap{text-align:right;width:100px; height:100px; position: relative; left:-100px;}
.show{width:100px; height:100px; background-color:#31C37C; }
#t{width:50px;height:50px;text-align:center;line-height:50px; background-color:#ff0;position:absolute;margin-top:-75px;}
</style>
<script type="text/javascript">
var timer=null;
// 抽象动画
function translate (target) {
clearInterval(timer);
timer=setInterval(function () {
var speed=(target-con.offsetLeft)/20;（缓冲动画）
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(con.offsetLeft==(target )){
clearInterval(timer);
}else{
con.style.left=(con.offsetLeft+speed)+'px'; 
}
}, 50);
}
window.onload=function () {
  a=document.getElementById('t');
  con=document.getElementById('con');
  a.onclick=function () {
  if(t.innerHTML.indexOf('分享')>-1){
  t.innerHTML='关闭';
  translate(0); 
  }else{  
t.innerHTML='分享';
  translate(-100); 
  }
  }
}
</script>
</head>
<body>
<div class="wrap" id="con">
<div class="show" >
hello world;
</div>&nbsp;
<a href="javascript:;" id="t">分享</a>
</div>
</body>
</html>

3，多物体动画（要出入目标，多物体动画不能够公用）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin:0; padding:0;}
li{list-style:none;}
li{width:200px; height:200px; background-color:#ff0; margin:10px;} 
</style>
<script type="text/javascript">
function startMove(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var speed=(target-obj.offsetWidth)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(target==obj.offsetWidth){
clearInterval(obj.timer);
}else{
obj.style.width=obj.offsetWidth+speed+"px";
}
}, 30)
}
window.onload=function () {
var lis=document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
lis[i].timer=null;  //必须给每个都加timer
lis[i].onmouseover=function () { 
 startMove(this,400); //得传入对象
}
lis[i].onmouseleave=function () {
startMove(this,200);   
}
};  
}
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>

4，注意事项和框架完善：

offsetWidth=clientWidth+border+margin；

clientWidth=物体的实际值+padding

所以对于offset**前缀的一般会使用：

// 获取样式
function getStyle (obj,attr) {
 if(obj.currentStyle){  //ie
 return obj.currentStyle[attr];
 } else{  
 return getComputedStyle(obj,false)[attr];
 }
}

5,链式动画：就是多传个参数fn

function startMove(obj,attr,target,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function () {
var cur;
if(attr=='opacity'){
 cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
 cur=parseInt(getStyle(obj,attr));
}
var speed=(target-cur)/8;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(target==cur){
if(fn){
fn();
}else{
clearInterval(obj.timer);
}
}else{
if(attr=='opacity'){
obj.style.filter='alpha(opacity='+cur+speed+')'; 
obj.style.opacity=(cur+speed)/100;
}
obj.style[attr]=cur+speed+"px";
}
}, 30)
}

6,同时运动：（使用了json，json是存贮key-value 值的，遍历用for-in的形式）

0 0