js animation learning (1)

1. Movement framework implementation ideas

1. Uniform motion (attribute values ​​change at a uniform speed) (change left, right, width, height, opacity, etc.);

2. Buffer motion ( The changing speed of the attribute value is proportional to the difference between the current value and the target value);

3. Multi-object movement;

4. Changes in any attribute value (using encapsulated functions);

5. Chain motion (the same object completes a series of movements);

6. Multiple objects move at the same time

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

2. Simple exercise Uniform motion

The following function is the basic framework of the motion series function.

//鼠标移到元素上元素右移，鼠标离开元素回去。 
    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)
    }

For example:

Call the above JS function in the following HTML document

<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(&#39;box1&#39;);
         ob.onmouseover=function(){
             Move(10,200);//鼠标移到div上时div从0移到200
         }  
         ob.onmouseout=function(){
             Move(-10,0);//鼠标移走时div从200移到0
         }  
     }
 </script>

3. Change transparency of simple animation


The model of the function is basically the same as the previous section. The difference is that the element does not have its own transparency attribute, and the initial value of transparency needs to be defined first.

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 }

Quote the above JS function in the HTML document below to change the transparency

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(&#39;div1&#39;);
 5         div1.onmouseover=function(){
 6             changeOpacity(10,100);
 7         }
 8         div1.onmouseout=function(){
 9             changeOpacity(-10,30);
10         }
11     }

The above is the content of js animation learning (1). For more related content, please pay attention to the PHP Chinese website (www.php.cn)!