캔버스를 사용하여 가샤폰 기계 애니메이션 효과를 구현하기 위한 샘플 코드

눈 깜짝할 사이에 두 달간 인턴을 하게 됐는데, 회사에서 매달 회원데이 행사를 하는군요. 이번 달의 과제는 가샤폰 기계 추첨 행사를 하는 것인데, 데이터 등이 있습니다. 프론트 엔드에 남았나요? 가장 큰 과제는 바로 가샤폰 기계의 애니메이션을 구현하는 것이었습니다.

인터넷에서 가샤폰 기계 애니메이션을 찾아서 신났는데, 가샤폰 애니메이션을 직접 작성하는 데 CSS 애니메이션을 사용했다는 것을 알게 되었고 별로 마음에 들지 않아서 캔버스를 사용하여 그리는 것을 선택했습니다. 가샤폰의 무작위 애니메이션. 먼저 간단한 가샤폰 기계 데모를 작성하고 효과를 미리 보았습니다.

가샤폰 머신의 레이아웃은 비교적 간단합니다. 기본 배경에 몇 가지 요소만 추가하면 됩니다. 가장 중요한 것은 캔버스 태그입니다.

 <div class=bg> <span id=message>그리려면 클릭</span> <div class=lotterybg> <canvas id=myCanvas width=285px height=170px></canvas> <img src=img/lighting.png 클래스 =조명/> </div></div><img src=img/start-btn.png id=start onclick=play()/><div class=award><span id=awardBall></span></div><img src=img/1.png id=ball1 class=imgSrc><img src=img/2 .png id=ball2 클래스=imgSrc><img src=img/3.png id=ball3 클래스=imgSrc><img src=img/4.png id=ball4 클래스=imgSrc>

첨부된 스타일 시트:

 본문 {여백: 0;패딩: 0;경계: 없음;}.bg {배경: url(../img/bg.png) 상단 반복 없음;배경 크기: 100%;오버플로: 숨김;위치: 절대 ;너비: 400px;높이: 100%;여백 상단: 0;왼쪽 여백: 50%;-webkit-transform: 번역(-50%);-moz-변환: 번역(-50%);-ms-변형: 번역(-50%);-o-변환: 번역(-50%);변형: 번역(-50%) );}#message {위치: 절대;텍스트 정렬: 센터;높이: 25px;글꼴 크기: 22px;마진-상단: 110px;마진-왼쪽: 50%;-webkit-transform: 번역(-50%);-moz-transform: 번역(-50%);-ms-transform: 번역(-50%);-o-transform: 번역(-50%) ;변환: 번역(-50%);}.lotterybg {배경: url(../img/lotterybg.png) 상단 반복 없음;배경 크기: 100%;오버플로: 표시;너비: 80%;높이: 100%;여백 상단: 160px;여백 왼쪽: 50%;-webkit-transform: 번역(-50%);-moz-transform: 번역(- 50%);-ms-변환: 번역(-50%);-o-변환: 번역(-50%);변형: 번역(-50%);}#myCanvas {위치: 절대;경계: 없음;너비: 285px;높이: 170px;마진-상단: 15px;마진-왼쪽: 50%;-webkit-transform: 번역(-50% );-moz-변환: 번역(-50%);-ms-변환: 번역(-50%);-o-변환: 변환(-50%);변환: 변환(-50%);}.lighting {display: block;max-width: 99%;margin-top: 0;margin-left: 0;}#start {위치: 절대 ;z-색인: 3;너비: 202px;여백-상단: 413px;여백-왼쪽: 50%;-webkit-transform: 번역(-50%);-moz-변환: 번역(-50%);-ms-변형: 번역(-50%);-o-변환: 번역(-50%);변형: 번역(-50%) );}.imgSrc {디스플레이: 없음;위치: 절대;}.award {위치: 절대;경계: 없음;너비: 60px;높이: 200px;상단: 470px;여백-왼쪽: 50%;-webkit-transform: 번역(-50%);-moz-transform: 번역(-50%);-ms-transform: 번역(-50%);-o-transform: 번역(-50%);변형: 번역(-50%);}

이렇게 해서 레이아웃이 완성되고, 다음 주요 작업은 캔버스에 이미지를 그리는 것입니다.

먼저 다양한 변수를 정의합니다.

 var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');var ball1 = document.getElementById('ball1');//그림 개체 var ball2 = document.getElementById('ball2' );//그림 개체 var ball3 = document.getElementById('ball3');//그림 개체 var ball4 = document.getElementById('ball4');//그림 개체 var ballList = [ball1, ball2, ball3, ball4];//그림 개체 배열 var ballNum = 4;//가샤폰 기계에 있는 공의 수 var awardList = [ ];//가샤폰 기계의 작은 공 모음 var 타이머;//타이머 var award = document.getElementById('awardBall') var message = document.getElementById('message');

가샤폰 기계의 각 가샤폰은 객체이므로 가샤폰 객체를 정의해야 합니다.

 function Ball(index, img) { this.r = 30;//공의 반경 this.x = this.rand(canvas.width - this.r * 2);//공의 초기 가로좌표 this. y = this .rand(canvas.height - this.r * 2);//공의 초기 수직 좌표 this.color = index;//아래 첨자로 표시되는 공의 색상 this.img = img; //공 재질 do { this .speedX = this.rand(20) - 10; } while (this.speedX < 5);//공의 가로좌표 속도 변경 do { this.speedY = this.rand(20) - 10 } while (this.speedY < 5; );//공의 수직 좌표에 따라 속도가 변경됩니다.}

들어오는 가샤폰 객체의 값 인덱스는 공의 색상으로 숫자 1~4로 표시되며, img는 가샤폰을 그리는 데 사용되는 이미지 객체입니다.

이전 단계에서는 가샤폰에 속성을 추가했습니다. 다음 단계는 가샤폰에 메서드를 추가하는 것입니다.

 Ball.prototype = { rand: function (num) {//Random number return Math.random() * num; }, run: function () {//볼 모션 함수 this.x += this.speedX; += this.speedY; if (this.x > canvas.width - this.r * 2) {//공이 오른쪽 경계에 닿으면 가로좌표 속도가 음수가 됩니다. this.speedX = -this.speedX } if (this; .엑스 < 0) {//공이 왼쪽 경계에 닿고 가로좌표 속도가 양수가 됩니다. this.speedX = Math.abs(this.speedX) } if (this.y > canvas.height - this.r * 2) { //공이 아래쪽 경계에 닿으면 세로 좌표 속도는 음수가 됩니다. this.speedY = -this.speedY } if (this.y < 0) {//공이 위쪽 경계에 닿으면 세로 좌표 속도는 양수가 됩니다. .speedY = Math.abs(this.speedY); } ctx.drawImage(this.img, this.x, this.y, 60, 60);//공 그리기}}

주요 목적은 가샤폰 객체의 프로토타입에 모션 기능을 추가하는 것입니다. 모션 기능의 기능은 가샤폰이 속도에 따라 움직이고 경계에 닿을 때 반동하도록 하는 것입니다.

다음 단계는 가샤폰을 가샤폰 기계에 넣는 것입니다.

 function init() {//초기화 for (let i = 0; i < ballNum; i++) {//다양한 색상의 공을 무작위로 생성 let index = Math.floor(4 * Math.random()); = new Ball(index, ballList[index]);//새 공 객체} window.clearInterval(timer);//타이머 지우기 타이머 = setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//캔버스를 지웁니다(let i = 0; i < awardList.length; i++) { awardList[i].run() }//공을 움직이게 만드세요}, 15) ;

이런 식으로 가샤폰 기계에는 이미 작은 공이 들어있습니다.

가샤폰을 시작하는 주요 과정은 버튼을 클릭하는 것입니다. 가샤폰 기계는 가샤폰 계란의 수를 줄이고 해당 가샤폰 계란을 얻습니다.

 function play() { if (awardList.length === 0) {//상금 풀에 공이 없습니다. warning('다시 시작하세요!') message.innerText = '추첨하려면 클릭하세요' } else { window.clearInterval(timer);//타이머 지우기 let r = awardList.pop();//상금 풀에서 공 줄이기 타이머 = setInterval(function () { ctx.clearRect(0, 0, canvas.width, canvas.height);//캔버스를 지웁니다(let i = 0; i < awardList.length; i++) { awardList[i].run() }//공을 움직이게 만드세요}, 15) ; 스위치(r.color) {//공 낙하 애니메이션 사례 0: award.setAttribute('class', 'dropBall1') 사례 1: award.setAttribute('class', 'dropBall2'); 사례 2: award.setAttribute('class', 'dropBall3'); 사례 3: award.setAttribute('class', 'dropBall4'); //가샤폰이 성공하고 award.setAttribute('class', ''); switch (r.color) { case 0: message.innerText = 'Purple ball break; 1: message.innerText = '녹색 공!'; 사례 2: message.innerText = '빨간 공!

여기서 가샤폰의 떨어지는 애니메이션은 CSS 애니메이션의 키 프레임을 사용하여 완성됩니다.

 .dropBall1 {내용: ;위치: 절대;왼쪽: 0;위: 0;너비: 60px;높이: 60px;디스플레이: 블록;배경: url(../img/1.png) 반복 없음;배경 크기 : 포함;애니메이션: 앞으로 1초 이지 아웃 삭제; -webkit-animation: 앞으로 1초 이지 아웃 삭제;}.dropBall2 {내용: ;위치: 절대;왼쪽: 0;위: 0;너비: 60px;높이: 60px;디스플레이: 블록;배경: url(../img/2.png) 반복 없음;배경 크기: 포함 ;animation: 1초 이지 아웃 앞으로 삭제;-webkit-animation: 1초 이지 아웃 앞으로 삭제;}.dropBall3 {content: ;position: 절대;왼쪽: 0;상단: 0;너비: 60px;높이: 60px;디스플레이: 블록;배경: url(../img/3.png) 반복 없음;배경 크기: 포함;애니메이션: 드롭 1초 용이성 -아웃 전달;-webkit-animation: 1초 이지 아웃 전달;}.dropBall4 {content: ;position: 절대;왼쪽: 0;상단: 0;너비: 60px;높이: 60px;디스플레이: 블록;배경: url(../img/4.png) no-repeat;배경 크기: 포함;애니메이션: 앞으로 1초 이지 아웃 드롭; -webkit-animation: drop 1seasing-out forward;}@keyframes drop { 0% { 변환: scale(0.7) } 50% { 변환: scale(1); } 51% { 변환:translateY(100px) }}@-webkit-keyframes drop { 0% { -webkit-transform: scale (0.7); } 50% { -webkit-transform: 규모(1) } 51% { -webkit-transform: 번역Y(0px) } 100% { -webkit-transform: 번역Y(100px) }}

물론, 가샤폰 머신을 실행하려면 마지막에 init(); 를 추가해야 합니다. 이 시점에서 이 간단한 가샤폰 머신이 완성되고 효과를 미리 볼 수 있습니다.

이 데모는 상대적으로 간단하지만 여전히 주목해야 할 몇 가지 사항과 최적화할 수 있는 일부 영역이 있습니다.

메모

img 객체

HTML의 img 태그는 다음과 같습니다.

 <img src=img/1.png id=ball1 클래스=imgSrc><img src=img/2.png id=ball2 클래스=imgSrc><img src=img/3.png id=ball3 클래스=imgSrc><img src=img/4.png id=ball4 클래스=imgSrc>

스타일은 display: none;으로 작성됩니다. 이는 js에서 img 객체를 얻기 위해 작성되었습니다. 물론 이러한 img 태그를 html로 작성하지 않고 js 파일에 직접 작성할 수도 있습니다.

 var img = 새 이미지() img.src = 'img/1.png';

이런 방식으로 img 객체를 얻을 수도 있고 가샤폰을 그리는 데에도 사용할 수 있습니다.

타이머가 호출되기 전에 코드에서 타이머가 지워지는 이유는 타이머가 지워지지 않으면 타이머가 계속 계산되어 애니메이션이 점점 더 이상해지기 때문입니다.

캔버스에 그림을 그릴 때 이미지가 선명하지 않거나 확대될 수 있는 현상은 캔버스 태그의 너비, 높이 속성을 스타일의 너비, 높이 속성과 동일하게 설정하면 해결됩니다.

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.