자바 스크립트 바 애니메이션

enter image description here 자바 스크립트 바 애니메이션

위 이미지가 있습니다. 자동차의 RPM에 따라 이미지의 일부를 표시하고 싶습니다. 예를 들어 차가 시작되면 하단 파란색 블록 만 표시됩니다. 속도가 올라감에 따라 더 많은 블록이 다시 줄무늬로 표시됩니다. 속도가 떨어지면 블록이 사라집니다. 나는 어디서부터 시작해야할지 모르겠다. 원래 각 블록을 별도의 이미지로 만들려고 생각했지만이 작업을 수행하는 더 좋은 방법이 있는지 궁금해하고있었습니다. 어떤 아이디어?

출처

2011-07-05 Mark Manickaraj

이미지가 선형이 아니기 때문에 각 RPM 레벨에 대해 별도의 이미지를 생성해야 할 수 있습니다. –

은 @Emre에 동의합니다. Canvas/js가 실제로 레거시 브라우저 용 플래시 대체 기능을 사용하는 것이 가장 좋습니다. ccs3 회전 소품을 신중하게 적용하여이 작업을 수행 할 수도 있습니다. 아마도 css2에서는 불가능합니다. – Bosworth99

Raphael 자바 스크립트 라이브러리를 확인하십시오. Javascript 환경에 따라 약간의 학습 곡선이있을 수 있지만 위의 내용을 재현하고 각 모양에 원하는 동작을 첨부하는 것이 훨씬 쉬운 시간이라고 생각합니다. 이미지, 특히 블록의 배열과 방향을 고려할 때.

업데이트 : 나는 이것을 흥미로운 운동처럼 보인다고 생각하여이 fiddle을 만들었습니다. 방금 직사각형 블록을 사용했으나 녹색 '스로틀'바 위에 마우스를 올리면 블록이 어떻게 나타나고 사라지는 지 확인할 수 있습니다.

출처

2011-07-05 20:34:36

자바 스크립트 바 애니메이션

답변

관련 문제