애니메이션 effect_javascript 기술의 핵심 방법을 달성하기 위한 js 코드-JS 튜토리얼-php.cn

아래에서는 그 과정과 원리에 대해 간략히 말씀드리겠습니다.
1단계: 익명 함수를 구현하고 직접 실행합니다.

코드 복사 코드는 다음과 같습니다.

(function(){ })()

이 함수는 잘 작성된 JS 코드에서 자주 볼 수 있으며, 함수 뒤에 () 쌍을 추가하여 이전 익명 함수가 필요함을 나타냅니다. 호스트(우리 BOM 환경)에서 이해할 수 있도록 ( )를 사용합니다. 내부의 function(){}은 익명 함수입니다.
2단계: 상자의 밝기를 변경하여 애니메이션을 구현합니다.
ID 애니메이션이 포함된 div

코드 복사 코드는 다음과 같습니다.

애니메이션의 투명한 그라데이션을 얻으려면 투명도를 지속적으로 변경해야 합니다.

코드 복사 코드는 다음과 같습니다.

for(var i=0;i<10;i) { 
 setTimeout((function(pos){ 
         return function(){                      someAnimation(pos); 이 코드를 설명해 보겠습니다. 이 코드는 복잡하고 이해하기 어려우므로 이해하지 못해도 괜찮습니다. 먼저 여기에서 setTimeout 사용법을 설명하세요. 

코드 복사

코드는 다음과 같습니다. >

setTimeout((function(){})(i/10),i*100) setTimeout의 첫 번째 매개변수는 실행할 함수이고, 두 번째 매개변수는 매개 변수는 실행을 시작하는 데 걸리는 시간을 의미하는 시간 매개 변수입니다 그러나 js에는 블록 개념이 없으며 범위는 함수를 기반으로 하므로 여기서 사용하는 클로저, 구현 원칙은 다음과 같습니다.

코드를 복사하세요

코드는 다음과 같습니다.

(function(){ 　return function(){} })() 그래야만 for 루프를 실행하여 원하는 결과를 얻을 수 있습니다.

코드 복사

코드는 다음과 같습니다.

for( var i=0 ;i<10;i ){ setTimeout(function(pos){ someAnimation(pos); }(i/10),i*100) }

이러한 for 루프는 한 번만 실행됩니다. 즉, i=9일 때 관심 있는 학생들이 직접 시도해 볼 수 있습니다. 
지금까지 전체 코드는 다음과 같습니다

코드 복사

코드는 다음과 같습니다.

(function(){ ~ .").style.opacity= args; 반환 함수(){ >
이렇게 하면 ID 애니메이션이 있는 상자의 투명도가 0에서 1로 변경됩니다.
세 번째 단계는 이를 달성하기 위해 setInterval을 사용하는 것입니다.
setInterval에도 두 개의 매개변수가 있습니다. 첫 번째는 실행 간격입니다.
코드는 다음과 같습니다. Far는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

(function() { 
 함수 someAnimation(args ){ 
               document.getElementById("animation").style.opacity=args; 10;i ){ 
                                       ~ ~                                                           
              }, 2000); 
전체 코드는 다음과 같습니다

코드 복사

 코드는 다음과 같습니다