HTML5 _html5 튜토리얼 기술로 애니메이션 효과를 얻는 방법 요약

편집자는 움직이는 자동차를 예로 들어 HTML5 애니메이션을 구현하는 세 가지 방법을 설명합니다. 애니메이션은 캔버스뿐만 아니라 CSS3 및 자바스크립트도 합리적인 선택을 통해 최적의 구현을 달성할 수 있습니다.

PS: 그래픽 카드, 녹화 프레임 간격 및 컴퓨터 프로세서로 인해 재생 프로세스가 약간 부드럽지 않거나 왜곡될 수 있습니다!
세 가지 방법으로 구현할 수 있습니다.
(1) JS와 결합된 캔버스 요소
(2) 순수 CSS3 애니메이션(IE 등 일부 주류 브라우저에서는 지원되지 않음)
(3) Jquery와 결합된 CSS3
CSS3 애니메이션을 사용하는 방법을 아는 것이 <canvas> 요소를 사용하는 방법을 아는 것보다 더 중요합니다. 왜냐하면 브라우저는 이러한 요소(일반적으로 해당 스타일)의 성능을 최적화할 수 있기 때문입니다. , CSS와 같은) 그러나 캔버스를 사용하여 그림을 사용자 정의하는 데 사용하는 효과는 최적화할 수 없습니다. 그 이유는 브라우저가 사용하는 하드웨어가 주로 그래픽 카드의 성능에 달려 있기 때문입니다. 현재 브라우저는 그래픽 카드에 대한 직접 액세스를 제공하지 않습니다. 예를 들어 모든 그리기 작업은 먼저 브라우저에서 특정 기능을 호출해야 합니다.
1.canvas
html 코드:

코드 복사

코드는 다음과 같습니다.

title>캔버스 요소


귀하의 브라우저는 <canvas>-요소를 지원하지 않습니다. 브라우저 업데이트를 고려해 보세요!

느리게
Play
Faster

< ;/본문> ;

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이 아니며 우리를 나타냅니다. 이미 애니메이션이 있습니다.

clearInterval(ani); //그래서 이를 지워야 합니다(애니메이션 중지)

ani=null
s.innerHTML='Play' ; //버튼 이름을 "Play"로 바꿉니다.
}else{
ani=setInterval(drawCanvas,40) //애니메이션을 25fps[초당 프레임], 40/1000으로 설정합니다. -twenty-fifth
s.innerHTML='Pause'; //버튼 이름을 "Pause"로 변경합니다.
}
}



가감속은 다음과 같은 방법으로 이동 거리를 변경하여 이루어집니다.

코드 복사

코드 다음과 같습니다:

함수 속도(델타){
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) / /마찬가지로 두 번째
}

타이어 그리기:

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

function drawTire( x,y){

w.save();
w.translate(x,y)
w.rotate(carAlpha)
w.StrokeStyle='#3300FF' ;
w.lineWidth=1;
w.fillStyle='#0099FF';
w.beginPath()
w.arc(0,0,radius,0,2*Math. PI,false );
w.closePath();
w.beginPath()
w.lineTo (-radius ,0);
w.closePath();
w.moveTo(0,radius); .lineTo( 0,-radius);
w.closePath()
w.restore()



원리는 간단하고 자세한 설명은 코드에서 하기 때문에 여기서는 일일이 설명하지 않겠습니다!


2.CSS3


단일 JS 코드 없이 위와 동일한 애니메이션 효과를 완전히 달성한 것을 확인할 수 있습니다.

HTML 코드:

코드를 복사하세요

코드는 다음과 같습니다

섀시">

< div class="vr">

>

CSS 코드 :
본문
{
패딩:0;
여백:0
}

코드 복사

코드는 다음과 같습니다.

/*애니메이션 정의: -400px 위치에서 1600px 위치로 이동*/
@keyframes carAnimation
{
0% { left:-400px } /* 초기 위치 지정 , 0%는 from*/
100% { left:1600px } /* 최종 위치를 지정하고, 100%는 다음과 같습니다.*/
}
/* Safari 및 Chrome */
@ -webkit-keyframes carAnimation
{
0% {왼쪽:-400px; }
100% {왼쪽:1600px; }
}
/* Firefox */
@ -moz -keyframes carAnimation
{
0% {left:-400; }
100% {left:1600px; }
}
/*IE는 아직 이 정의를 지원하지 않습니다. IE10*/
@-ms-keyframes carAnimation
{
0% {left:-400px }
100%{left:1600px }
} @keyframes용입니다. tyreAnimation
{
0% {변형: 회전(0) }
100% {변형: 회전(1800deg) }
}
@-webkit-keyframes tyreAnimation

0% { -webkit-transform: 회전(0) }
100% { -webkit-transform: 회전(1800deg) }
}
@-moz-keyframes tyreAnimation
{
0% { -moz-transform: 회전(0) }
100% { -moz-transform: 회전(1800deg) }
}
@-ms-keyframes tyreAnimation
{
0% { -ms-transform: 회전(0) }
100% { -ms-transform: 회전(1800deg) }
} #container
{
위치 :relative;
너비:100%;
높이:600px;
overflow:hidden; /*매우 중요*/
}
#car
{
위치 :absolute; / *자동차는 컨테이너 안에 절대적으로 위치합니다*/
width:400px
height:210px /*타이어와 섀시를 포함한 자동차의 전체 높이*/
z-index; :1; /*자동차를 배경 위에 놓으세요*/
top:300px; /*위쪽에서 거리(y축)*/
left:50px; /*왼쪽에서 거리(x축)* /
/* 다음 콘텐츠는 요소에 사전 정의된 애니메이션 및 관련 속성을 제공합니다*/
-webkit-animation-name:carAnimation /*name*/
-webkit-animation-duration:10s; 기간*/
-webkit-animation-iteration-count:infinite; /*반복 횟수-무한*/
-webkit-animation-timing-function:linear /*처음부터 같은 속도로 애니메이션 재생 종료* /
-moz-animation-name:carAnimation; /*name*/
-moz-animation-duration:10s; /*duration*/
-moz-animation-iteration-count: 무한; /*반복 횟수 - 무제한*/
-moz-animation-timing-function:linear; /*처음부터 끝까지 같은 속도로 애니메이션 재생*/
-ms-animation-name:carAnimation; ; /*이름*/
-ms-animation-duration:10s; /*기간*/
-ms-animation-iteration-count:infinite; /*반복 횟수-무한*/
- ms-animation-timing-function:linear; /* 처음부터 끝까지 같은 속도로 애니메이션 재생*/
animation-name:carAnimation /*Name*/
animation-duration:10s; */
animation-iteration-count:infinite; /*반복 횟수-무한*/
animation-timing-function:linear; /*처음부터 끝까지 같은 속도로 애니메이션 재생*/
}
/*body*/
#chassis
{
위치:절대;
너비:400px
배경:#FF9900; border: 2px solid #FF6600;
}
/*Tire*/
.tire
{
z-index:1; /*위와 마찬가지로 타이어도 위의 배경*/
위치:절대값:
border-radius:60px; /*원 반경*/
height:120px;
너비:120px; /* 2*반경=너비 */
배경:#0099FF /*채우기 색상*/
테두리:1px 솔리드 #3300FF
-webkit-animation-name: tyreAnimation ;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
-moz-animation- 이름 :tyreAnimation
-moz-animation-duration:10s;
-moz-animation-iteration-count:infinite
-moz-animation-timing-function:linear; animation -name:tyreAnimation;
-ms-animation-duration:10s;
-ms-animation-iteration-count:infinite
-ms-animation-timing-function:linear; - 이름:tyreAnimation;
animation-duration:10s;
animation-timing-function:linear;
#fronttire
🎜 >right:20px; /*오른쪽 타이어와 가장자리 사이의 거리를 20으로 설정*/
}
#backtire
{
left:20px; 타이어 및 가장자리를 20으로 설정*/
}
#grass
{
position:absolute; /*배경은 컨테이너에 절대적으로 위치합니다*/
width:100%; >height:130px;
bottom:0; 하단은 그라디언트의 시작점을 나타내며, 첫 번째 색상 값은 그라디언트의 시작 값입니다. 종료 값입니다*/
background:linear-grdaient(bottom,#33CC00,#66FF22)
background:-webkit-linear-gradient(bottom,#33CC00,#66FF22)
background: -moz-linear-gradient(하단, #33CC00,#66FF22);
배경:-ms-linear-gradient(하단,#33CC00,#66FF22)
}
.hr,.vr
{
위치:절대 ;
배경:#3300FF
}
.hr
{
폭:1px; /*가로선 타이어*/
왼쪽:0
상단:60px
}
.vr
{
너비:1px;
높이:100%; /*타이어 수직선*/
왼쪽:60px;
위쪽:0; >

3.JQuery 및 CSS3

이 방법은 효과와 호환성이 좋은 방법입니다(특히 IE9에서는 아직 CSS3를 지원하지 않기 때문에) HTML 코드( CSS3의 HTML 코드와 다르지 않습니다):



코드 복사

코드는 다음과 같습니다.