zoukankan      html  css  js  c++  java
  • 动画原理——摩擦力

    书籍名称: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
  • 相关阅读:
    January 25th, 2018 Week 04th Thursday
    January 24th, 2018 Week 04th Wednesday
    January 23rd, 2018 Week 04th Tuesday
    January 22nd, 2018 Week 04th Monday
    January 21st, 2018 Week 3rd Sunday
    January 20th, 2018 Week 3rd Saturday
    January 19th, 2018 Week 3rd Friday
    January 18th, 2018 Week 03rd Thursday
    January 17th, 2018 Week 03rd Wednesday
    January 16th, 2018 Week 03rd Tuesday
  • 原文地址:https://www.cnblogs.com/winderby/p/4255448.html
Copyright © 2011-2022 走看看