애니메이션 effect_javascript 기술의 핵심 방법을 달성하기 위한 js 코드
- WBOY원래의
- 2016-05-16 17:21:171065검색
아래에서는 그 과정과 원리에 대해 간략히 말씀드리겠습니다.
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);
전체 코드는 다음과 같습니다
코드 복사
코드는 다음과 같습니다
이렇게 하면 ID 애니메이션이 있는 상자의 투명도가 0에서 1로 변경됩니다.
세 번째 단계는 이를 달성하기 위해 setInterval을 사용하는 것입니다.
setInterval에도 두 개의 매개변수가 있습니다. 첫 번째는 실행 간격입니다.
코드는 다음과 같습니다. Far는 다음과 같습니다.
코드 복사 코드는 다음과 같습니다.
(function() {
함수 someAnimation(args ){
document.getElementById("animation").style.opacity=args; 10;i ){
~ ~
}, 2000);
전체 코드는 다음과 같습니다
코드 복사
코드는 다음과 같습니다