HTML5 Canvas를 사용하여 키보드 및 마우스 애니메이션을 만드는 예 공유_html5 튜토리얼 기술

공의 움직임을 키보드로 제어

우리 모두가 알고 있듯이, 우리가 보는 애니메이션은 사실 정적인 이미지가 빠르게 전환되는 일련의 과정으로, 시각적 잔상으로 인해 육안으로는 '움직이는 이미지'와 같은 시각적 효과를 줍니다. 이것을 이해하고 나면 캔버스에 애니메이션 효과를 그리는 것은 비교적 간단해집니다. 먼저 특정 정적 그래픽을 지운 다음 다른 위치에서 다시 그리면 정적 그래픽이 특정 궤적에 따라 이동하여 애니메이션 효과를 생성할 수 있습니다.

다음으로 캔버스에 단단한 공을 그린 다음 키보드의 화살표 키를 사용하여 공의 움직임을 제어하여 역동적인 효과를 만들어냅니다. 샘플 코드는 다음과 같습니다.

JavaScript 코드클립보드에 콘텐츠 복사

4. "UTF-8">
"moveBall(event)">
"myCanvas" width=
8. "400px" height="300px" style="테두리: 1px 단색 빨간색;"> 귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.
11. <스크립트 유형="텍스트/자바스크립트">
12. //캔버스 객체 가져오기(캔버스)
13. var canvas = document.getElementById("myCanvas");
//구체 클래스를 나타냅니다.
기능
16. 공(x, y, 반경, 속도){
this
17. .x = x || 10; //구체의 x 좌표, 기본값은 10
this
18. .y = y || 10; //구체의 y 좌표, 기본값은 10
this
19. .radius = radius || 10 //구체의 반경, 기본값은 10
이
20. .speed = 속도 || 5 //공의 이동 속도, 기본값은 5  
//위로 이동
이
23. .moveUp = 함수(){
이것
24. .y -= 이것.speed;  if
(
25. this.y < .radius){ //상한 초과 방지
                                                                                                                              
26.                                                         };
 
27. //오른쪽으로 이동
28. 이것
.moveRight =
29. 함수
(){
31. 이것.x = 이것
.speed;
32. var maxX = canvas.width - this.radius;
33. if(this.x > maxX){
 
34. //오른쪽 경계 초과 방지  이것
.x = maxX;
35. }
36. };
37.  
38. //왼쪽으로 이동
39. 이.moveLeft = 함수(){
40. 이.x -= 이.speed;
 
41. if(this.x < .radius){ //왼쪽 경계 초과 방지
42.  이것
.x =
43. 이것.radius;                                                          };
44.  
//아래로 이동
47. 이.moveDown =
함수
48. (){ 이.y =
이
49. .speed; var maxY = canvas.height - this
.radius;
50. if(this.y > maxY){
51. //하한값 초과 방지
이것
52. .y = maxY                                                        
};
53. }
55. //공 그리기
57. 함수
drawBall(ball){
58.  if
(
59. typeof ctx != "정의되지 않음"
){
60. ctx.beginPath() ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false)
ctx.fill()
}
62. }
64. //캔버스 지우기
65. 함수clearCanvas(){
66.  if(typeof ctx != "정의되지 않음"){
67. ctx.clearRect(0, 0, 400, 300)
68. }
69. }
71. var ball = new Ball()
72. //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 여부를 간단히 감지합니다.
73. if(canvas.getContext){ 
74. //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
75. var ctx = canvas.getContext("2d")
76. drawBall(공)
77. }
79. //onkeydown 이벤트에 대한 콜백 핸들러 함수
80. //사용자의 키에 따라 공의 움직임을 제어합니다.
81. 함수 moveBall(이벤트){
82. 스위치(event.keyCode){
83.  case 37: //왼쪽 화살표 키  
84. ball.moveLeft()
85. 휴식
86.  case 38: //상향 키  
87. ball.moveUp()
88. 휴식
89.  case 39: //오른쪽 화살표 키  
90. ball.moveRight()
91. 휴식
92.  case 40: //아래쪽 화살표 키
93. ball.moveDown()
94. 휴식
95.  default: //다른 키 조작이 응답하지 않습니다
96. 반환
97. }
98.  
99. clearCanvas(); //캔버스를 먼저 지웁니다
100. drawBall(ball) //최신 공 그리기
101. }

실제 효과를 확인하려면 HTML5를 지원하는 브라우저를 사용하여 다음 웹페이지를 열어주세요(이동하려면 화살표 키를 사용하세요).
캔버스를 사용하여 움직이는 공을 그립니다.

광대 웃는 얼굴
몇 가지 API만 이해하고 필요한 애니메이션 매개변수를 사용하면 움직임에 반응할 수 있는 흥미로운 웹 애니메이션을 만들 수 있습니다.
첫 번째 단계는 얼굴 특징을 그리는 것입니다

이 광대는 귀와 눈썹이 없어 장기 3개만 남았는데, 눈 2개를 따로 그려야 하므로 총 4부분입니다. 먼저 코드를 살펴보겠습니다.

왼쪽 눈 그리기 코드

JavaScript 코드클립보드에 콘텐츠 복사

1. var leftEye = new Kinetic.Line({
2. x: 150,
3. 포인트: [0, 200, 50, 190, 100, 200, 50, 210],
4. 장력 : 0.5,
5. 종료됨: 사실,
6. 획: '흰색',
7. 스트로크 폭: 10
8. })

오른쪽 눈 그리기 코드

JavaScript 코드클립보드에 콘텐츠 복사

1. var rightEye = new Kinetic.Line({
2. x: sw - 250,
3. 포인트: [0, 200, 50, 190, 100, 200, 50, 210],
4. 장력 : 0.5,
5. 종료됨: 사실,
6. 획: '흰색',
7. 스트로크 폭: 10
8. })

코 그리기 코드

JavaScript 코드클립보드에 콘텐츠 복사

1. var nose = new Kinetic.Line({
2. 포인트: [240, 280, sw/2, 300, sw-240,280],
3. 장력 : 0.5,
4. 종료됨: 사실,
5. 획: '흰색',
6. 스트로크 폭: 10
7. })

입 그리기 코드

JavaScript 코드클립보드에 콘텐츠 복사

1. var 입 = new Kinetic.Line({
2. 포인트: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
3. 장력 : 0.5,
4. 종료됨: 사실,
5. 획: '빨간색',
6. 스트로크 폭: 10
7. })

단지 몇 줄의 코드에 불과하다는 사실이 밝혀지면 실망스러울까요? 네, 이제 웹게임 애니메이션 프로그래머가 될 수 있다는 자신감이 생기기 시작하신 것 같아요!

위 코드에 대해 간단히 설명해주세요. Kinetic은 우리가 사용하는 js 툴킷입니다. 페이지 상단에서 다음과 같이 참조해야 합니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. var 입 = new Kinetic.Line({
2. 포인트: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
3. 장력 : 0.5,
4. 종료됨: 사실,
5. 획: '빨간색',
6. 스트로크 폭: 10
7. })

나머지는 몇 가지 핵심 포인트, 선의 탄력성, 색상, 너비 등입니다. 이는 이해하기 쉽습니다.

두 번째 단계는 사진을 움직이게 하는 것입니다

이 애니메이션이 매력적인 이유는 마우스 움직임에 반응하고 사용자와 상호작용할 수 있다는 점입니다. 이것이 성공적인 애니메이션의 가장 중요한 측면입니다. 자세히 관찰해보면 광대의 얼굴 생김새의 변화는 단지 눈이 커지고, 입이 커지고, 코가 커지는 것일 뿐인데, 특이한 점은 이 변화가 순간적인 변화가 아니라, 과도기적입니다. 가장 걱정되는 부분이 있습니다. 다행스럽게도 이러한 알고리즘 기술은 매우 성숙하여 이에 대해 생각할 필요가 없습니다. 이러한 애니메이션 엔진 라이브러리는 이러한 기술을 매우 간단하고 편리한 인터페이스로 캡슐화했습니다. 물건을 옮기는 방법을 살펴 보겠습니다.

왼쪽 눈 애니메이션

JavaScript 코드클립보드에 콘텐츠 복사

1. var leftEyeTween = new Kinetic.Tween({
2. 노드: leftEye,
3. 기간: 1,
4. 완화: Kinetic.Easings.ElasticEaseOut,
5. y: -100,
6. 포인트: [0, 200, 50, 150, 100, 200, 50, 200]
7. })

오른쪽 눈 애니메이션

JavaScript 코드클립보드에 콘텐츠 복사

1. var rightEyeTween = new Kinetic.Tween({
2. 노드: rightEye,
3. 기간: 1,
4. 완화: Kinetic.Easings.ElasticEaseOut,
5. y: -100,
6. 포인트: [0, 200, 50, 150, 100, 200, 50, 200]
7. })

코 애니메이션

JavaScript 코드클립보드에 콘텐츠 복사

1. var noseTween = new Kinetic.Tween({
2. 노드: 코,
3. 기간: 1,
4. 완화: Kinetic.Easings.ElasticEaseOut,
5. y: -100,
6. 포인트: [220, 280, sw/2, 200, sw-220,280]
7. })

입 애니메이션

JavaScript 코드클립보드에 콘텐츠 복사

1. varmouthTween = new Kinetic.Tween({
2. 노드: 입,
3. 기간: 1,
4. 완화: Kinetic.Easings.ElasticEaseOut,
5. 포인트: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
6. })

코드는 매우 간단하며 변수 이름은 설명이 필요하지 않습니다. 경험이 적은 프로그래머가 이러한 코드를 이해하는 것은 어렵지 않을 것입니다. 기본적으로 모든 코드 조각을 사용하면 애니메이션 작업의 감쇠 모드와 지속 시간을 지정하는 몇 가지 지점을 제공할 수 있습니다.

완전한 애니메이션 코드

JavaScript 코드클립보드에 콘텐츠 복사

1.   
2.   
3.      
4.        
5.      
6.      
7.     
   "container">
     
8.     "/js/lib/dynamic-v5.0.1.min.js">   
9.     <스크립트 지연="지연">   
10.       var sw = 578;   
11.       var sh = 400;   
12.       var stage = new Kinetic.Stage({   
13.         컨테이너: '컨테이너',   
14.         너비: 578,   
15.         키: 400   
16.       });   
17.       var layer = new Kinetic.Layer({   
18.         y: -30    
19.       });   
20.   
21.       var leftEye = new Kinetic.Line({   
22.         x: 150,   
23.         포인트: [0, 200, 50, 190, 100, 200, 50, 210],   
24.         텐션: 0.5,   
25.         종료: 사실,   
26.         획: '흰색',   
27.         스트로크 폭: 10        
28.       });   
29.   
30.       var rightEye = new Kinetic.Line({   
31.         x: sw - 250,   
32.         포인트: [0, 200, 50, 190, 100, 200, 50, 210],   
33.         텐션: 0.5,   
34.         종료: 사실,   
35.         획: '흰색',   
36.         스트로크 폭: 10      
37.       });   
38.   
39.       var nose = new Kinetic.Line({   
40.         포인트: [240, 280, sw/2, 300, sw-240,280],   
41.         텐션: 0.5,   
42.         종료: 사실,   
43.         획: '흰색',   
44.         스트로크 폭: 10   
45.       });   
46.   
47.       var 입 = new Kinetic.Line({   
48.         포인트: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],   
49.         텐션: 0.5,   
50.         종료: 사실,   
51.         획: '빨간색',   
52.         스트로크 폭: 10   
53.       });   
54.   
55.       layer.add(leftEye)   
56.            .add(rightEye)   
57.            .add(nose)   
58.            .add(입);   
59.   
60.       stage.add(layer);   
61.   
62.       // 트윈   
63.   
64.       var leftEyeTween = new Kinetic.Tween({   
65.         노드: leftEye,   
66.         기간: 1,   
67.         완화: Kinetic.Easings.ElasticEaseOut,   
68.         y: -100,   
69.         포인트: [0, 200, 50, 150, 100, 200, 50, 200]   
70.       });    
71.   
72.       var rightEyeTween = new Kinetic.Tween({   
73.         노드: rightEye,   
74.         기간: 1,   
75.         완화: Kinetic.Easings.ElasticEaseOut,   
76.         y: -100,   
77.         포인트: [0, 200, 50, 150, 100, 200, 50, 200]   
78.       });   
79.   
80.       var noseTween = new Kinetic.Tween({   
81.         노드: 코,   
82.         기간: 1,   
83.         완화: Kinetic.Easings.ElasticEaseOut,   
84.         y: -100,   
85.         포인트: [220, 280, sw/2, 200, sw-220,280]   
86.       });    
87.   
88.       var mouthTween = new Kinetic.Tween({   
89.         노드: 입,   
90.         기간: 1,   
91.         완화: Kinetic.Easings.ElasticEaseOut,   
92.         포인트: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]   
93.       });    
94.   
95.       stage.getContainer().addEventListener('mouseover', 함수() {   
96.         leftEyeTween.play();   
97.         rightEyeTween.play();   
98.         noseTween.play();   
99.         mouthTween.play();   
100.       });   
101.   
102.       stage.getContainer().addEventListener('mouseout', 함수() {   
103.         leftEyeTween.reverse();   
104.         rightEyeTween.reverse();   
105.         noseTween.reverse();   
106.         mouthTween.reverse();   
107.       });   
108.   
109.        
110.      
111.   

데모 보기