집 >
웹 프론트엔드 >
H5 튜토리얼 >
HTML5 _html5 튜토리얼 기술로 애니메이션 효과를 얻는 방법 요약
HTML5 _html5 튜토리얼 기술로 애니메이션 효과를 얻는 방법 요약
WBOY
풀어 주다： 2016-05-16 15:45:59
원래의
1623명이 탐색했습니다.
편집자는 움직이는 자동차를 예로 들어 HTML5 애니메이션을 구현하는 세 가지 방법을 설명합니다. 애니메이션은 캔버스뿐만 아니라 CSS3 및 자바스크립트도 합리적인 선택을 통해 최적의 구현을 달성할 수 있습니다.
PS: 그래픽 카드, 녹화 프레임 간격 및 컴퓨터 프로세서로 인해 재생 프로세스가 약간 부드럽지 않거나 왜곡될 수 있습니다! 세 가지 방법으로 구현할 수 있습니다. (1) JS와 결합된 캔버스 요소 (2) 순수 CSS3 애니메이션(IE 등 일부 주류 브라우저에서는 지원되지 않음) (3) Jquery와 결합된 CSS3 CSS3 애니메이션을 사용하는 방법을 아는 것이 <canvas> 요소를 사용하는 방법을 아는 것보다 더 중요합니다. 왜냐하면 브라우저는 이러한 요소(일반적으로 해당 스타일)의 성능을 최적화할 수 있기 때문입니다. , CSS와 같은) 그러나 캔버스를 사용하여 그림을 사용자 정의하는 데 사용하는 효과는 최적화할 수 없습니다. 그 이유는 브라우저가 사용하는 하드웨어가 주로 그래픽 카드의 성능에 달려 있기 때문입니다. 현재 브라우저는 그래픽 카드에 대한 직접 액세스를 제공하지 않습니다. 예를 들어 모든 그리기 작업은 먼저 브라우저에서 특정 기능을 호출해야 합니다. 1.canvas html 코드:
코드 복사
코드는 다음과 같습니다.
title>캔버스 요소
< ;/본문> ;
js 코드:
일부 변수 정의:
코드 복사코드
var dx=5, //현재 속도
rate=1, //현재 재생 속도 ani, //현재 애니메이션 루프 c, / /드로잉( 캔버스 컨텍스트) w, //자동차 [숨김](캔버스 컨텍스트) grassHeight=130, //배경 높이 carAlpha=0, //타이어 회전 각도 carX=- 400 , //자동차의 x축 방향 위치(변경 예정) carY=300, //자동차의 y축 방향 위치(일정 유지) carWidth= 400, //차 폭 carHeight=130, //차 높이 tiresDelta=15, //한 타이어에서 가장 가까운 자동차 섀시까지의 거리 axisDelta=20, / /자동차 하부 섀시 축과 타이어 사이의 거리 radius=60 //타이어 반경
자동차 캔버스(처음에는 숨겨져 있음)를 인스턴스화하기 위해 다음과 같은 자체 실행 익명 함수를 사용합니다.
코드 복사 코드는 다음과 같습니다.
(function(){
var car=document.createElement('canvas'); //요소 생성 car.height=carHeight axisDelta 반경; //높이 설정 w=car.getContext('2d')
"재생" 버튼을 클릭하면 "자동차 그리기" 작업을 일정한 간격으로 반복적으로 실행하여 "프레임 재생" 기능을 시뮬레이션할 수 있습니다.
코드 복사
코드는 다음과 같습니다.function play(s){ //매개변수 s는 버튼입니다.
if(ani){ //If ani null이 아니며 우리를 나타냅니다. 이미 애니메이션이 있습니다.
함수 속도(델타){ var newRate=Math.max(rate delta,0.1) dx=newRate/rate*dx; rate=newRate; 페이지 로딩 초기화 방법: //init function init(){ c=document.getElementById('canvas').getContext('2d') drawCanvas() ; }
주요 방법 :
코드 복사코드는 다음과 같습니다.
function drawCanvas (){ c.clearRect(0,0,c.canvas.width, c.canvas.height); //오류를 방지하기 위해 캔버스(표시됨)를 지웁니다. c.save() / /유사한 "푸시" 작업에 해당하는 현재 좌표값 및 상태 저장 drawGrass(); //배경 그리기 c.translate(carX,0) //시작점 좌표 이동 drawCar(); //자동차 그리기(숨겨진 캔버스) c.drawImage(w.canvas,0,carY) //마지막으로 표시되는 자동차 그리기 c.restore() / /캔버스의 상태를 복원합니다. 이는 "팝" 작업과 유사합니다 carX =dx; //앞으로 걷기를 시뮬레이션하기 위해 X축 방향으로 자동차의 위치를 재설정합니다 carAlpha =dx/ radius; //타이어 각도를 비례적으로 늘립니다. if (carX>c.canvas.width){ //일부 일반적인 경계 조건을 설정합니다. carX=-carWidth-10; //속도를 dx로 바꿀 수도 있습니다. *=-1; } }
배경 그리기:
코드 복사코드는 다음과 같습니다.
function drawGrass( ){ //처음 두 매개변수는 그라데이션 시작점의 좌표이고, 마지막 두 매개변수는 그라데이션 끝점의 좌표입니다. var grad=c. createLinearGradient(0,c.canvas.height-grassHeight,0 ,c.canvas.height); //선형 그래디언트의 그래디언트 색상을 지정합니다. 0은 그래디언트 시작 색상을 나타내고, 1은 그래디언트 종료 색상을 나타냅니다. grad.addColorStop(0,'#33CC00'); grad.addColorStop(1,'#66FF22') c.fillStyle=grad; c.lineWidth=0; .fillRect(0,c.canvas.height-grassHeight,c.canvas .width,grassHeight) }
차체 그리기:
코드 복사 코드는 다음과 같습니다.
function drawCar( ){
w.clearRect(0,0,w.canvas.width,w.canvas.height); //숨겨진 아트보드 지우기 w.StrokeStyle='#FF6600'; //테두리 색상 설정 w.lineWidth=2; //테두리 너비 설정(픽셀 단위) w.fillStyle='#FF9900'; //채우기 색상 설정 w.beginPath( ); //새 경로 그리기 시작 w.lect(0,0,carWidth,carHeight); //직사각형 그리기 w.strok() //테두리 그리기 w.fill (); //배경 채우기 w.closePath(); //새 경로 닫기 drawTire(tiresDelta radius,carHeight axisDelta) //첫 번째 바퀴 그리기 시작 drawTire(carWidth -tiresDelta-radius,carHeight axisDelta) / /마찬가지로 두 번째 }
