HTML5 Canvas を使用してキーボードとマウスのアニメーションを作成する例を共有する_html5 チュートリアル スキル

キーボードでボールの動きを制御します

ご存知のとおり、私たちが見ているアニメーションは、実際には静止画像の素早い切り替えの連続であり、視覚的な残像により肉眼では「動画」のような視覚効果を与えます。これを理解すると、キャンバス上にアニメーション効果を描画することが比較的簡単になります。最初に特定の静的グラフィックをクリアし、それを別の場所に再描画することを繰り返して、静的グラフィックを特定の軌道に従って移動させ、アニメーション効果を生成するだけです。

次に、キャンバス上に固体のボールを描画し、キーボードの矢印キーを使用してボールの動きを制御し、ダイナミックな効果を生み出します。サンプルコードは次のとおりです:

JavaScript コードコンテンツをクリップボードにコピーします

4. "UTF-8">
6. 頭>
7. "moveBall(event)">
10. "myCanvas" width="400px" height="300px" style="border: 1px 単色赤;">
お使いのブラウザは Canvas タグをサポートしていません。
11. キャンバス>
13. "text/javascript">
14. //Canvas オブジェクト (canvas) を取得します
15. var Canvas = document.getElementById("myCanvas");
17. //球のクラスを表します
18. 関数 Ball(x, y ,radius,speed){
19. this.x = x || 10; //球の x 座標、デフォルトは 10
20. this.y = y || 10; //球の y 座標、デフォルトは 10
21. this.radius = radius || //球の半径、デフォルトは 10
22. this.speed = 速度 || // ボールの移動速度、デフォルトは 5
24. //上に移動
25. this.moveUp = 関数(){
26. this.y -= this.speed
27. if(this.y //上限を超えないようにします
28. RM
};
29. //右に移動
31. this
.moveRight =
32. function
(){
33. this
.x =
34. this.speed var
maxX = Canvas.width -
35. this.radius; if(
this
36. .x > maxX){ //正しい境界を超えないようにします
37. この.x = maxX; }
38. };
40. //左に移動
41. this.moveLeft = function(){
42. this.x -= this.speed
43. if(this.x
//左境界を超えないようにします
this
45. .x = this.radius;
};
48. //下に移動
49. this
.moveDown =
50. function(){ this
.y =
51. this.speed var
maxY = Canvas.height -
52. this.radius; if(
this
53. .y > maxY){ //下限を超えないようにします
54. これ.y = maxY;
55. }; }
//ボールを描く
関数
60. drawBall(ball){
if
61. (typeof ctx !=
"未定義"
62. ){ ctx.beginPath(); ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false); >
ctx.fill();
}
64. }
66. //キャンバスをクリア
67. 関数 clearCanvas(){
68. if(typeof ctx != "未定義"){
69. ctx.clearRect(0, 0, 400, 300);
70. }
71. }
73. var ball = new Ball();
74. //HTML5 をサポートしていない一部のブラウザで構文エラーが表示されるのを避けるために、現在のブラウザが Canvas オブジェクトをサポートしているかどうかを単純に検出します
75. if(canvas.getContext){
76. //対応する CanvasRenderingContext2D オブジェクト (ブラシ) を取得します
77. var ctx = Canvas.getContext("2d"); ドローボール (ボール)
78. }
80. //onkeydown イベントのコールバック ハンドラー関数
81. //ユーザーのキーに従ってボールの動きを制御します
82. 関数 moveBall(event){
83. スイッチ(event.keyCode){
84. case 37: //左矢印キー
85. ball.moveLeft();
86. ブレイク;
87. case 38: //上方向キー
ball.moveUp();
89. ブレイク;
case
90. 39: //右矢印キー ball.moveRight();
ブレイク
92. ; case
40:
93. //下矢印キー ball.moveDown();
94. ブレイク
;
95. default:
//その他のキー操作は反応しません
96. 戻る;
}
clearCanvas();
98. //まずキャンバスをクリアします
drawBall(ball);
100. //最新のボールを描画します
}
104. HTML5 をサポートするブラウザを使用して次の Web ページを開いて実際の効果を確認してください (矢印キーを使用して移動します):
キャンバスを使用して可動ボールを描画します
105. 。

ピエロのスマイリーフェイス

いくつかの API を理解するだけで、必要なアニメーション パラメーターを使用して、動きに反応するこの興味深い Web アニメーションを作成できます。

最初のステップは顔の特徴を描くことです
このピエロには耳と眉がないので、器官は 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. クローズ済み: true、
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. クローズ済み: true、
6. ストローク: '白'、
7. ストローク幅: 10
8. });

鼻を描くためのコード

JavaScript コードコンテンツをクリップボードにコピーします

1. var names = new Kinetic.Line({
2. ポイント: [240, 280, sw/2, 300, sw-240,280]、
3. テンション: 0.5、
4. クローズ済み: true、
5. ストローク: '白'、
6. ストローク幅: 10
7. });

口を描くためのコード

JavaScript コードコンテンツをクリップボードにコピーします

1. varmouth = new Kinetic.Line({
2. ポイント: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh]、
3. テンション: 0.5、
4. クローズ済み: true、
5. ストローク: 「赤」、
6. ストローク幅: 10
7. });

それがほんの数行のコードであることがわかったら、がっかりするでしょうか?はい、とても簡単です。あなたは Web ゲーム アニメーション プログラマーになれるという自信を持ち始めていると思います。

上記のコードを簡単に説明します。 Kinetic は私たちが使用する JS ツールキットです。ページの先頭で、次のように参照する必要があります:

JavaScript コードコンテンツをクリップボードにコピーします

1. varmouth = new Kinetic.Line({
2. ポイント: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh]、
3. テンション: 0.5、
4. クローズ済み: true、
5. ストローク: 「赤」、
6. ストローク幅: 10
7. });

その他は、線の弾力性、色、幅など、いくつかの重要なポイントです。これらは理解しやすいです。

2 番目のステップは、画像を動かすことです

このアニメーションが魅力的な理由は、マウスの動きに反応し、ユーザーと対話できることです。これは、アニメーションを成功させるために最も重要な側面です。よく観察すると、ピエロの顔の変化は目が大きくなり、口が大きくなり、鼻が大きくなるだけです。しかし、特別なのは、この変化が瞬間的な変化ではないということです。そこにはいくつかのアルゴリズムが含まれています。これが最も懸念される部分です。幸いなことに、これらのアルゴリズム テクノロジは非常に成熟しており、アニメーション エンジン ライブラリはこれらのテクノロジを非常にシンプルで便利なインターフェイスにカプセル化しています。物事を動かす方法を見てみましょう。

左目のアニメーション

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 namesTween = 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. nbsp;HTML>   
2.   
3.      
4.     
5.       body {   
6.         margin: 0px;   
7.         padding: 0px;   
8.       }  
9.       #container {   
10.         background-color: black;   
11.       }   
12.        
13.      
14.      
15.     
    "container">
      
16. >   
17. >   
18. var sw = 578;   
19. var sh = 400;   
20. var stage = new Kinetic.Stage({
21. コンテナ: 'コンテナ'、
22. 幅: 578,
23. 高さ: 400
24. });   
25. var layer = new Kinetic.Layer({
26. y: -30
27. });   
29. var leftEye = new Kinetic.Line({
30. x: 150,
31. ポイント: [0, 200, 50, 190, 100, 200, 50, 210]、
32. 張力: 0.5、
33. クローズ済み: true、
34. ストローク: '白'、
35. ストローク幅: 10
36. });   
38. var rightEye = new Kinetic.Line({
39. x: sw - 250,
40. ポイント: [0, 200, 50, 190, 100, 200, 50, 210]、
41. 張力: 0.5、
42. クローズ済み: true、
43. ストローク: '白'、
44. ストローク幅: 10
45. });   
47. var nose = new Kinetic.Line({
48. ポイント: [240, 280, sw/2, 300, sw-240,280]、
49. 張力: 0.5、
50. クローズ済み: true、
51. ストローク: '白'、
52. ストローク幅: 10
53. });   
55. var mouth = new Kinetic.Line({
56. ポイント: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
57. 張力: 0.5、
58. クローズ済み: true、
59. ストローク: 「赤」、
60. ストローク幅: 10
61. });   
63. layer.add(leftEye)
64. .add(rightEye)
65. .add(鼻)
66. .add(口);   
68. stage.add(layer);   
70. // トゥイーン
72. var leftEyeTween = new Kinetic.Tween({
73. ノード: leftEye、
74. 期間: 1,
75. イージング: Kinetic.Easings.ElasticEaseOut,
76. y: -100,
77. ポイント: [0, 200, 50, 150, 100, 200, 50, 200]
78. });    
80. var rightEyeTween = new Kinetic.Tween({
81. ノード: rightEye、
82. 期間: 1,
83. イージング: Kinetic.Easings.ElasticEaseOut,
84. y: -100,
85. ポイント: [0, 200, 50, 150, 100, 200, 50, 200]
86. });   
88. var noseTween = new Kinetic.Tween({
89. ノード: 鼻、
90. 期間: 1,
91. イージング: Kinetic.Easings.ElasticEaseOut,
92. y: -100,
93. ポイント: [220, 280, sw/2, 200, sw-220,280]
94. });    
96. var mouthTween = new Kinetic.Tween({
97. ノード: 口、
98. 期間: 1,
99. イージング: Kinetic.Easings.ElasticEaseOut,
100. ポイント: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]
101. });    
103. stage.getContainer().addEventListener('mouseover', function() {
104. leftEyeTween.play();   
105. rightEyeTween.play();   
106. noseTween.play();   
107. mouthTween.play();   
108. });   
110. stage.getContainer().addEventListener('mouseout',function() {
111. leftEyeTween.reverse();   
112. rightEyeTween.reverse();   
113. noseTween.reverse();   
114. mouthTween.reverse();   
115. });   
117.   
118.   
119.   

デモを見る