교통 신호등과 동기화하여 애니메이션을 반복하는 방법을 모르겠습니다.

신호등이 녹색/인덱스 = 2 인 상태에서이 코드를 작성하고 애니메이션을 실행하려고합니다. 나는 문자 그대로 모든 것을 시도해 보았습니다. 그래서 어떤 보프라도 기쁘게 생각합니다. 코드의 두 부분을 어떻게 동기화 할 것인가를 보여줍니다.교통 신호등과 동기화하여 애니메이션을 반복하는 방법을 모르겠습니다.

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<h1>The best GCSE traffic lights sequence any examiner has ever seen!</h1> 
 
<img id="light" src="Traff 1.jpg"> 
 
<style> 
 
#container { 
 
    width: 600px; 
 
    height: 475px; 
 
    position: absolute; 
 
    background: #000; 
 
} 
 
#animate { 
 
    width: 300px; 
 
    height: 170px; 
 
    position: absolute; 
 
    background: url(car.jpg); 
 
} 
 
</style> 
 
<div id ="container"> 
 
<div id ="animate"></div> 
 
</div> 
 

 
<script> 
 
var list = [ 
 
    "Traff 1.jpg", 
 
    "traff 2.jpg", 
 
    "traff 3.jpg", 
 
    "traff 4.jpg" 
 
]; 
 

 
var index = 0; 
 
(function nextlight() { 
 
\t setInterval(function(){ index = index + 1; 
 

 
    if (index == 4) index = 0; 
 

 
    var image = document.getElementById('light'); 
 
    image.src=list[index]; }, 3000); 
 

 
    
 
})() 
 

 
</script> 
 
<script> 
 
    (function myMove() { \t 
 
    var elem = document.getElementById("animate"); 
 
    var pos = 0; 
 
var id = setInterval(frame,10); 
 
    function frame() { 
 
    if (pos == 300) { 
 
\t \t pos = 0; 
 
    } else { 
 
     pos++; 
 
     elem.style.top = pos + 'px'; 
 
     elem.style.left = pos + 'px'; 
 
    } 
 
    } 
 
})() 
 
\t \t \t \t \t \t 
 
</script> 
 
</body> 
 
</html>

출처

2016-12-08 Braden Moosey

그것은 간단합니다. index이 2 인 경우에만 위치를 이동하도록 기능 frame에서 확인해야합니다.

function frame() { 
    if (index !== 2) { 
     return; 
    } 
    ... 
}

작동 예 (이미지 대신 사용되는 색상) :

정말 일

<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <h1>The best GCSE traffic lights sequence any examiner has ever seen!</h1> 
 
    <!-- <img id="light" src="Traff 1.jpg"> --> 
 
    <div id="light">Traff Light</div> 
 
    <style> 
 
    #container { 
 
     margin: 30px 0; 
 
     width: 900px; 
 
     height: 500px; 
 
     position: absolute; 
 
     background: #000; 
 
    } 
 
    #animate { 
 
     width: 300px; 
 
     height: 170px; 
 
     position: absolute; 
 
     background: blue; 
 
     /* background: url(car.jpg); */ 
 
    } 
 
    #light { 
 
     background: red; 
 
     border: 5px solid cyan; 
 
     height: 50px; 
 
     width: 100px; 
 
    } 
 
    </style> 
 
    <div id="container"> 
 
    <div id="animate"></div> 
 
    </div> 
 

 
    <script> 
 
    var list = [ 
 
     "Traff 1.jpg", 
 
     "traff 2.jpg", 
 
     "traff 3.jpg", 
 
     "traff 4.jpg" 
 
    ]; 
 

 
    var tlight = ['red', 'yellow', 'green', 'grey']; 
 

 
    var index = 0; 
 
    (function nextlight() { 
 
     setInterval(function() { 
 
     index = index + 1; 
 

 
     if (index == 4) index = 0; 
 

 
     var image = document.getElementById('light'); 
 
     //image.src = list[index]; 
 
     image.style.background = tlight[index]; 
 
     }, 3000); 
 

 
    })(); 
 
    </script> 
 
    <script> 
 
    (function myMove() { 
 
     var elem = document.getElementById("animate"); 
 
     var pos = 0; 
 
     var id = setInterval(frame, 10); 
 

 
     function frame() { 
 
     if (index !== 2) { 
 
      return; 
 
     } 
 
     if (pos == 300) { 
 
      pos = 0; 
 
     } else { 
 
      pos++; 
 
      elem.style.top = pos + 'px'; 
 
      elem.style.left = pos + 'px'; 
 
     } 
 
     } 
 
    })(); 
 
    </script> 
 
</body> 
 

 
</html>

출처

2016-12-08 13:45:32

감사합니다 :) –

교통 신호등과 동기화하여 애니메이션을 반복하는 방법을 모르겠습니다.

답변

관련 문제