动画原理——摩擦力

书籍名称: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

 

你可能感兴趣的:(动画)