欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

js动画学习(一)

程序员文章站 2022-03-30 15:41:21
...
一、运动框架实现思路

1.匀速运动(属性值匀速变化)(改变 left, right, width, height, opacity 等);

2.缓冲运动(属性值的变化速度与当前值与目标值的差成正比);

3.多物体运动;

4.任意属性值的变化(用封装函数);

5.链式运动(同一物体完成一系列的运动);

6.多物体同时运动

====================================================

二、简单运动之匀速运动

下面的函数就是运动系列函数的基本框架。
//鼠标移到元素上元素右移,鼠标离开元素回去。 
    var timer="";
    function Move(speed,locat) {//移动速度,移动终点位置
        var ob=document.getElementById('box1');
        clearInterval(timer);//先清除定时器,防止定时器的嵌套调用
        timer=setInterval(function () {
            if (ob.offsetLeft==locat) {//当前位置到达指定终点,关闭定时器
                clearInterval(timer);
            } else {//否则元素的left属性等于当前left加上每次改变的速度
               ob.style.left=ob.offsetLeft+speed+'px';
           }
        }, 30)
    }

举个栗子:

在下面的HTML文档中调用上面的JS函数

<style type="text/css">
     *{
         margin: 0;
         padding: 0;
     }
     
     #box1{
         width: 200px;
         height: 200px;
         background-color: red;
         position: absolute;
         left: 0;
     }
  </style>
<div id="box1"></div>
 <script type="text/javascript">
     window.onload=function(){
         var ob=document.getElementById('box1');
         ob.onmouseover=function(){
             Move(10,200);//鼠标移到div上时div从0移到200
         }  
         ob.onmouseout=function(){
             Move(-10,0);//鼠标移走时div从200移到0
         }  
     }
 </script>

三、简单动画之改变透明度


函数的模型和上一节基本一致,不同的是元素没有自身透明度属性,需要先把透明度初值定义好。

1 var timer="";
 2 var alpha=30;//透明度初始值
 3 function changeOpacity(speed,target) {
 4     var div1=document.getElementById('div1');//获取改变透明度的元素
 5     clearInterval(timer);//清除定时器,避免嵌套调用
 6     timer=setInterval(function () {
 7         if (alpha==target) {//如果透明度达到目标值,清除定时器
 8             clearInterval(timer);
 9         } else {//当前透明度加上透明度变化的速度
10             alpha=alpha+speed;
11             div1.style.filter='alpha(opacity:'+alpha+')';//IE浏览器
12             div1.style.opacity=alpha/100; //火狐和谷歌
13         }
14     }, 30)
15 }

在下面的HTML文档中引用上面的JS函数,实现透明度的改变

1 <style type="text/css">
 2     *{
 3         margin: 0;
 4         padding: 0;
 5     }
 6     #div1{
 7         width: 200px;
 8         height: 200px;
 9         background: red;
10         filter: alpha(opacity:30);/*filter滤镜:不透明度,IE浏览器*/ 
11         opacity: 0.3;/*火狐和谷歌*/
12     }
13 </style>
1 <div id="div1"></div>
 2 <script type="text/javascript">
 3     window.onload=function(){
 4         var div1=document.getElementById('div1');
 5         div1.onmouseover=function(){
 6             changeOpacity(10,100);
 7         }
 8         div1.onmouseout=function(){
 9             changeOpacity(-10,30);
10         }
11     }

以上就是js动画学习(一)的内容,更多相关内容请关注PHP中文网(www.php.cn)!

相关标签: js动画