投稿
  1. Web176教程首页
  2. Canvas教程

Canvas 高级动画

terry • • Canvas教程 • 阅读 340

本节课，我们学习Canvas 高级动画。

在上一章，我们制作了基础动画以及逐步了解了让物件移动的方法。在这一部分，我们将会对运动有更深的了解并学会添加一些符合物理的运动以让我们的动画更加高级。

绘制小球

我们将会画一个小球用于动画学习，所以首先在画布上画一个球。下面的代码帮助我们建立画布。

<canvas id="canvas" width="600" height="300"></canvas>

跟平常一样，我们需要先画一个 context（画布场景）。为了画出这个球，我们又会创建一个包含一些相关属性以及 draw() 函数的 ball 对象，来完成绘制。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var ball = {
  x: 100,
  y: 100,
  radius: 25,
  color: 'blue',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

ball.draw();

这里并没有什么特别的。小球实际上是一个简单的圆形，在arc() 函数的帮助下画出。

添加速率

现在我们有了一个小球，正准备添加一些基本动画，正如我们上一章所学的。

又是这样，window.requestAnimationFrame() 再一次帮助我们控制动画。小球依旧依靠添加速率矢量进行移动。在每一帧里面，我们依旧用clear 清理掉之前帧里旧的圆形。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var raf;

var ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 2,
  radius: 25,
  color: 'blue',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
  raf = window.requestAnimationFrame(draw);
}

canvas.addEventListener('mouseover', function(e){
  raf = window.requestAnimationFrame(draw);
});

canvas.addEventListener('mouseout', function(e){
  window.cancelAnimationFrame(raf);
});

ball.draw();

边界

若没有任何的碰撞检测，我们的小球很快就会超出画布。我们需要检查小球的 x 和 y 位置是否已经超出画布的尺寸以及是否需要将速度矢量反转。为了这么做，我们把下面的检查代码添加进 draw 函数：

if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
  ball.vy = -ball.vy;
}
if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
  ball.vx = -ball.vx;
}

首个预览

让我们看看现今它变得如何。移动你的鼠标到画布里开启动画。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>移动你的鼠标到画布里开启动画 | Web176教程web176.com</title>
        <meta name="robots" content="noindex, nofollow">
        <style>
            body {
              padding: 0;
              margin: 0;
            }

            svg:not(:root) {
              display: block;
            }

            .playable-code {
              background-color: #f4f7f8;
              border: none;
              border-left: 6px solid #558abb;
              border-width: medium medium medium 6px;
              color: #4d4e53;
              height: 100px;
              width: 90%;
              padding: 10px 10px 0;
            }

            .playable-canvas {
              border: 1px solid #4d4e53;
              border-radius: 2px;
            }

            .playable-buttons {
              text-align: right;
              width: 90%;
              padding: 5px 10px 5px 26px;
            }
        </style>
        
        
    </head>
    <body>
        
            <canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>

        
        
            <script>
                var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var raf;

var ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 2,
  radius: 25,
  color: 'blue',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;

  if (ball.y + ball.vy > canvas.height ||
      ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > canvas.width ||
      ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }

  raf = window.requestAnimationFrame(draw);
}

canvas.addEventListener('mouseover', function(e) {
  raf = window.requestAnimationFrame(draw);
});

canvas.addEventListener('mouseout', function(e) {
  window.cancelAnimationFrame(raf);
});

ball.draw();

            </script>
        
    </body>
</html>

加速度

为了让动作更真实，你可以像这样处理速度，例如：

ball.vy *= .99;
ball.vy += .25;

这会逐帧减少垂直方向的速度，所以小球最终将只会在地板上弹跳。

看下DEMO：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>高级动画 - second_demo - code sample | Web176教程web176.com</title>
        <meta name="robots" content="noindex, nofollow">
        <style>
            body {
              padding: 0;
              margin: 0;
            }

            svg:not(:root) {
              display: block;
            }

            .playable-code {
              background-color: #f4f7f8;
              border: none;
              border-left: 6px solid #558abb;
              border-width: medium medium medium 6px;
              color: #4d4e53;
              height: 100px;
              width: 90%;
              padding: 10px 10px 0;
            }

            .playable-canvas {
              border: 1px solid #4d4e53;
              border-radius: 2px;
            }

            .playable-buttons {
              text-align: right;
              width: 90%;
              padding: 5px 10px 5px 26px;
            }
        </style>
        
        
    </head>
    <body>        
    <canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>        
        
    <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    var raf;

    var ball = {
    x: 100,
    y: 100,
    vx: 5,
    vy: 2,
    radius: 25,
    color: 'blue',
    draw: function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.fill();
    }
    };


    ball.vy *= .99;
    ball.vy += .25;

    function draw() {
    ctx.clearRect(0,0, canvas.width, canvas.height);
    ball.draw();
    ball.x += ball.vx;
    ball.y += ball.vy;
    ball.vy *= .99;
    ball.vy += .25;

    if (ball.y + ball.vy > canvas.height ||
        ball.y + ball.vy < 0) {
        ball.vy = -ball.vy;
    }
    if (ball.x + ball.vx > canvas.width ||
        ball.x + ball.vx < 0) {
        ball.vx = -ball.vx;
    }

    raf = window.requestAnimationFrame(draw);
    }

    canvas.addEventListener('mouseover', function(e){
    raf = window.requestAnimationFrame(draw);
    });

    canvas.addEventListener('mouseout', function(e){
    window.cancelAnimationFrame(raf);
    });
    ball.draw();
    </script>
        
    </body>
</html>

长尾效果

现在，我们使用的是 clearRect 函数帮我们清除前一帧动画。若用一个半透明的 fillRect 函数取代之，就可轻松制作长尾效果。

ctx.fillStyle = 'rgba(255,255,255,0.3)';
ctx.fillRect(0,0,canvas.width,canvas.height);

看下DEMO：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>高级动画 - third_demo - code sample | Web176教程web176.com</title>
        <meta name="robots" content="noindex, nofollow">
        <style>
            body {
              padding: 0;
              margin: 0;
            }

            svg:not(:root) {
              display: block;
            }

            .playable-code {
              background-color: #f4f7f8;
              border: none;
              border-left: 6px solid #558abb;
              border-width: medium medium medium 6px;
              color: #4d4e53;
              height: 100px;
              width: 90%;
              padding: 10px 10px 0;
            }

            .playable-canvas {
              border: 1px solid #4d4e53;
              border-radius: 2px;
            }

            .playable-buttons {
              text-align: right;
              width: 90%;
              padding: 5px 10px 5px 26px;
            }
        </style>
        
        
    </head>
    <body>
        
      <canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>

        
        
      <script>
      var canvas = document.getElementById('canvas');
      var ctx = canvas.getContext('2d');
      var raf;

      var ball = {
        x: 100,
        y: 100,
        vx: 5,
        vy: 2,
        radius: 25,
        color: 'blue',
        draw: function() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
          ctx.closePath();
          ctx.fillStyle = this.color;
          ctx.fill();
        }
      };

      
      ctx.fillStyle = 'rgba(255,255,255,0.3)';
      ctx.fillRect(0,0,canvas.width,canvas.height);

      function draw() {
        ctx.fillStyle = 'rgba(255,255,255,0.3)';
        ctx.fillRect(0,0,canvas.width,canvas.height);
        ball.draw();
        ball.x += ball.vx;
        ball.y += ball.vy;
        ball.vy *= .99;
        ball.vy += .25;

        if (ball.y + ball.vy > canvas.height ||
            ball.y + ball.vy < 0) {
          ball.vy = -ball.vy;
        }
        if (ball.x + ball.vx > canvas.width ||
            ball.x + ball.vx < 0) {
          ball.vx = -ball.vx;
        }

        raf = window.requestAnimationFrame(draw);
      }

      canvas.addEventListener('mouseover', function(e){
        raf = window.requestAnimationFrame(draw);
      });

      canvas.addEventListener('mouseout', function(e){
        window.cancelAnimationFrame(raf);
      });

      ball.draw();

      </script>
        
    </body>
</html>

添加鼠标控制

为了更好地控制小球，我们可以用 mousemove (en-US)事件让它跟随鼠标活动。下面例子中，click 事件会释放小球然后让它重新跳起。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var raf;
var running = false;

var ball = {
  x: 100,
  y: 100,
  vx: 5,
  vy: 1,
  radius: 25,
  color: 'blue',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

function clear() {
  ctx.fillStyle = 'rgba(255,255,255,0.3)';
  ctx.fillRect(0,0,canvas.width,canvas.height);
}

function draw() {
  clear();
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;

  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
    ball.vy = -ball.vy;
  }
  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
    ball.vx = -ball.vx;
  }

  raf = window.requestAnimationFrame(draw);
}

canvas.addEventListener('mousemove', function(e){
  if (!running) {
    clear();
    ball.x = e.offsetX;
    ball.y = e.offsetY;
    ball.draw();
  }
});

canvas.addEventListener('click',function(e){
  if (!running) {
    raf = window.requestAnimationFrame(draw);
    running = true;
  }
});

canvas.addEventListener('mouseout', function(e){
  window.cancelAnimationFrame(raf);
  running = false;
});

ball.draw();

用你的鼠标移动小球，点击可以释放。看下DEMO吧。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>高级动画 - 添加鼠标控制 - code sample | Web176教程web176.com</title>
        <meta name="robots" content="noindex, nofollow">
        <style>
            body {
              padding: 0;
              margin: 0;
            }

            svg:not(:root) {
              display: block;
            }

            .playable-code {
              background-color: #f4f7f8;
              border: none;
              border-left: 6px solid #558abb;
              border-width: medium medium medium 6px;
              color: #4d4e53;
              height: 100px;
              width: 90%;
              padding: 10px 10px 0;
            }

            .playable-canvas {
              border: 1px solid #4d4e53;
              border-radius: 2px;
            }

            .playable-buttons {
              text-align: right;
              width: 90%;
              padding: 5px 10px 5px 26px;
            }
        </style>
        
        
    </head>
    <body>
        
            <canvas id="canvas" style="border: 1px solid" width="600" height="300"></canvas>

        
        
            <script>
            var canvas = document.getElementById('canvas');
            var ctx = canvas.getContext('2d');
            var raf;
            var running = false;

            var ball = {
              x: 100,
              y: 100,
              vx: 5,
              vy: 1,
              radius: 25,
              color: 'blue',
              draw: function() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
                ctx.closePath();
                ctx.fillStyle = this.color;
                ctx.fill();
              }
            };

            function clear() {
              ctx.fillStyle = 'rgba(255,255,255,0.3)';
              ctx.fillRect(0,0,canvas.width,canvas.height);
            }

            function draw() {
              clear();
              ball.draw();
              ball.x += ball.vx;
              ball.y += ball.vy;

              if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
                ball.vy = -ball.vy;
              }
              if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
                ball.vx = -ball.vx;
              }

              raf = window.requestAnimationFrame(draw);
            }

            canvas.addEventListener('mousemove', function(e){
              if (!running) {
                clear();
                ball.x = e.offsetX;
                ball.y = e.offsetY;
                ball.draw();
              }
            });

            canvas.addEventListener('click',function(e){
              if (!running) {
                raf = window.requestAnimationFrame(draw);
                running = true;
              }
            });

            canvas.addEventListener('mouseout', function(e){
              window.cancelAnimationFrame(raf);
              running = false;
            });

            ball.draw();

            </script>
        
    </body>
</html>

Breakout

本短文仅仅解释了一小部分的创建高级动画的技巧。其实还有更多！试试添加一个球拍，一些砖块，然后将这个例子弄成一个 Breakout（译者注：打砖块游戏）如何？

作者：terry，如若转载，请注明出处：https://www.web176.com/canvas/7612.html

赞 (0)
打赏 支付宝 支付宝 微信 微信
terryterry
0 0
上一篇 2022年12月22日 下午3:11
下一篇 2022年12月22日 下午3:57

相关推荐

发表回复

登录后才能评论