动画原理——摩擦力

最新推荐文章于 2018-01-03 09:56:51 发布

weixin_30352645

最新推荐文章于 2018-01-03 09:56:51 发布

阅读量230

点赞数

原文链接：http://www.cnblogs.com/winderby/p/4255448.html

版权

书籍名称：HTML5-Animation-with-JavaScript

书籍源码：https://github.com/lamberta/html5-animation1

1.有摩擦力的情况

摩擦力在物体发生相对运动时产生，是运动方向的反向加速度。

代码表示意思如下

  if (speed > friction) {
          speed -= friction;
        } else {
          speed = 0;
        }

06-friction-1.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Friction 1</title>
    <link rel="stylesheet" href="../include/style.css">
  </head>
  <body>
    <header>
      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
    </header>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script src="../include/utils.js"></script>
    <script src="./classes/ball.js"></script>
    <script>
    window.onload = function () {
      var canvas = document.getElementById('canvas'),
          context = canvas.getContext('2d'),
          ball = new Ball(),
          vx = Math.random() * 10 - 5,
          vy = Math.random() * 10 - 5,
          friction = 0.1;

      ball.x = canvas.width / 2;
      ball.y = canvas.height / 2;

      (function drawFrame () {
        window.requestAnimationFrame(drawFrame, canvas);
        context.clearRect(0, 0, canvas.width, canvas.height);

        var speed = Math.sqrt(vx * vx + vy * vy),
            angle = Math.atan2(vy, vx);

        if (speed > friction) {
          speed -= friction;
        } else {
          speed = 0;
        }
        vx = Math.cos(angle) * speed;
        vy = Math.sin(angle) * speed;
        ball.x += vx;
        ball.y += vy;
        ball.draw(context);
      }());
    };
    </script>
  </body>
</html>

View Code

2.简单的方法

摩擦力实际就是速度逐渐变小，在动画程序中，我们可以简单的使每一帧的速度都变小。类似如下代码

vx *= 0.9;
vy *= 0.9;

06-friction-2.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Friction 2</title>
    <link rel="stylesheet" href="../include/style.css">
  </head>
  <body>
    <header>
      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
    </header>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script src="../include/utils.js"></script>
    <script src="./classes/ball.js"></script>
    <script>
    window.onload = function () {
      var canvas = document.getElementById('canvas'),
          context = canvas.getContext('2d'),
          ball = new Ball(),
          vx = Math.random() * 10 - 5,
          vy = Math.random() * 10 - 5,
          friction = 0.95;

      ball.x = canvas.width / 2;
      ball.y = canvas.height / 2;

      (function drawFrame () {
        window.requestAnimationFrame(drawFrame, canvas);
        context.clearRect(0, 0, canvas.width, canvas.height);

        vx *= friction;
        vy *= friction;
        ball.x += vx;
        ball.y += vy;
        ball.draw(context);
      }());
    };
    </script>
  </body>
</html>

View Code

3.将摩擦力运用到飞船程序中

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Ship Sim Friction</title>
    <link rel="stylesheet" href="../include/style.css">
    <style>
      #canvas {
        background-color: #000000;
      }
    </style>
  </head>
  <body>
    <header>
      Example from <a href="http://amzn.com/1430236655?tag=html5anim-20"><em>Foundation HTML5 Animation with JavaScript</em></a>
    </header>
    <canvas id="canvas" width="400" height="400"></canvas>
    <aside>Press left and right arrow keys to rotate ship, up to add thrust.</aside>

    <script src="../include/utils.js"></script>
    <script src="./classes/ship.js"></script>
    <script>
    window.onload = function () {
      var canvas = document.getElementById('canvas'),
          context = canvas.getContext('2d'),
          ship = new Ship(),
          vr = 0,
          vx = 0,
          vy = 0,
          thrust = 0,
          friction = 0.97;

      ship.x = canvas.width / 2;
      ship.y = canvas.height / 2;

      window.addEventListener('keydown', function (event) {
        switch (event.keyCode) {
        case 37:      //left
          vr = -3;
          break;
        case 39:      //right
          vr = 3;
          break;
        case 38:      //up
          thrust = 0.05;
          ship.showFlame = true;
          break;
        }
      }, false);

      window.addEventListener('keyup', function () {
        vr = 0;
        thrust = 0;
        ship.showFlame = false;
      }, false);

      (function drawFrame () {
        window.requestAnimationFrame(drawFrame, canvas);
        context.clearRect(0, 0, canvas.width, canvas.height);

        ship.rotation += vr * Math.PI / 180;
        var angle = ship.rotation,
            ax = Math.cos(angle) * thrust,
            ay = Math.sin(angle) * thrust,
            left = 0,
            right = canvas.width,
            top = 0,
            bottom = canvas.height;

        vx += ax;
        vy += ay;
        vx *= friction;
        vy *= friction;
        ship.x += vx;
        ship.y += vy;

        //screen wrapping
        if (ship.x - ship.width / 2 > right) {
          ship.x = left - ship.width / 2;
        } else if (ship.x + ship.width / 2 < left) {
          ship.x = right + ship.width / 2;
        }
        if (ship.y - ship.height / 2 > bottom) {
          ship.y = top - ship.height / 2;
        } else if (ship.y < top - ship.height / 2) {
          ship.y = bottom + ship.height / 2;
        }
        ship.draw(context);
      }());
    };
    </script>
  </body>
</html>

View Code

转载于:https://www.cnblogs.com/winderby/p/4255448.html

weixin_30352645

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
动画原理——摩擦力

书籍名称：HTML5-Animation-with-JavaScript书籍源码：https://github.com/lamberta/html5-animation11.有摩擦力的情况摩擦力在物体发生相对运动时产生，是运动方向的反向加速度。代码表示意思如下 if (speed > friction) { speed -= friction;...
复制链接

扫一扫