js 애니메이션 학습 (1)-JS 튜토리얼-php.cn

js 애니메이션 학습 (1)

黄舟

풀어 주다： 2016-12-30 16:54:01

원래의

1138명이 탐색했습니다.

1. 움직임 프레임워크 구현 아이디어

1. 균일한 움직임(속성값이 일정한 속도로 변경됨)(왼쪽, 오른쪽, 너비, 높이, 불투명도 등 변경)

2. 버퍼 동작(속성 값의 변경 속도는 현재 값과 대상 값의 차이에 비례함)

3.

4. 임의의 속성 값 변경(캡슐화 기능 사용);

5. 체인 동작(동일한 개체가 일련의 움직임을 완료함)

6. 동시에 이동합니다.
============================================== ======

2. 간단한 연습 등속운동

다음 함수는 모션 계열 함수의 기본 프레임워크입니다.

//鼠标移到元素上元素右移，鼠标离开元素回去。 
    var timer="";
    function Move(speed,locat) {//移动速度，移动终点位置
        var ob=document.getElementById(&#39;box1&#39;);
        clearInterval(timer);//先清除定时器，防止定时器的嵌套调用
        timer=setInterval(function () {
            if (ob.offsetLeft==locat) {//当前位置到达指定终点，关闭定时器
                clearInterval(timer);
            } else {//否则元素的left属性等于当前left加上每次改变的速度
               ob.style.left=ob.offsetLeft+speed+&#39;px&#39;;
           }
        }, 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(&#39;box1&#39;);
         ob.onmouseover=function(){
             Move(10,200);//鼠标移到div上时div从0移到200
         }  
         ob.onmouseout=function(){
             Move(-10,0);//鼠标移走时div从200移到0
         }  
     }
 </script>

로그인 후 복사

3. 단순 애니메이션의 투명도 변경

함수의 모델은 기본적으로 이전 섹션과 동일합니다. 차이점은 요소에 자체 투명도 속성이 없으며 투명도의 초기 값을 먼저 정의해야 한다는 것입니다.

1 var timer="";
 2 var alpha=30;//透明度初始值
 3 function changeOpacity(speed,target) {
 4     var div1=document.getElementById(&#39;div1&#39;);//获取改变透明度的元素
 5     clearInterval(timer);//清除定时器，避免嵌套调用
 6     timer=setInterval(function () {
 7         if (alpha==target) {//如果透明度达到目标值，清除定时器
 8             clearInterval(timer);
 9         } else {//当前透明度加上透明度变化的速度
10             alpha=alpha+speed;
11             div1.style.filter=&#39;alpha(opacity:&#39;+alpha+&#39;)&#39;;//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(&#39;div1&#39;);
 5         div1.onmouseover=function(){
 6             changeOpacity(10,100);
 7         }
 8         div1.onmouseout=function(){
 9             changeOpacity(-10,30);
10         }
11     }

로그인 후 복사

위는 js 애니메이션 학습(1) 내용입니다. 관련 내용은 PHP 중국어 홈페이지(m.sbmmt.com)를 주목해주세요!