zoukankan      html  css  js  c++  java
  • 动画原理——释放和弹性

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

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

    1.释放

    现在假设我们写一个动画,将它运动到指定的地方,先设置一个速度,运用三角函数,我们计算x的速度,计算y的速度,判断距离。到达终点时停止。

    这种方法在有些情况适用,但某些情况下,我们想让物体运动的自然一些。

    在一些运动,我们知道目标,且一开始速度很快,后面逐渐变慢。也就是说,它的速度和距离是成正比的。看下图。

    01-easing-1.html

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Easing 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(),
              easing = 0.05,
              targetX = canvas.width / 2, 
              targetY = canvas.height / 2;
    
          (function drawFrame () {
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            var vx = (targetX - ball.x) * easing,
                vy = (targetY - ball.y) * easing;
    
            ball.x += vx;
            ball.y += vy;
            ball.draw(context);
          }());
        };
        </script>
      </body>
    </html>
    View Code

     增加拖拽

    02-easing-2.html

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Easing 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>
        <aside>Press and drag circle with mouse.</aside>
    
        <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'),
              mouse = utils.captureMouse(canvas),
              ball = new Ball(),
              easing = 0.05,
              targetX = canvas.width / 2,
              targetY = canvas.height / 2,
              isMouseDown = false;
    
          canvas.addEventListener('mousedown', function () {
            if (utils.containsPoint(ball.getBounds(), mouse.x, mouse.y)) {
              isMouseDown = true;
              canvas.addEventListener('mouseup', onMouseUp, false);
              canvas.addEventListener('mousemove', onMouseMove, false);
            }
          }, false);
    
          function onMouseUp () {
            isMouseDown = false;
            canvas.removeEventListener('mouseup', onMouseUp, false);
            canvas.removeEventListener('mousemove', onMouseMove, false);
          }
    
          function onMouseMove () {
            ball.x = mouse.x;
            ball.y = mouse.y;
          }
    
          (function drawFrame () {
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            if (!isMouseDown) {
              var vx = (targetX - ball.x) * easing,
                  vy = (targetY - ball.y) * easing;
              ball.x += vx;
              ball.y += vy;
            }
            ball.draw(context);
          }());
        };
        </script>
      </body>
    </html>
    View Code

    按之前的想法速度是接近0的但不会为了,我们要加一个停止条件

    03-easing-off.html

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Easing Off</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>
        <textarea id="log"></textarea>
    
        <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'),
              log = document.getElementById('log'),
              ball = new Ball(),
              easing = 0.05,
              targetX = canvas.width / 2,
              animRequest;
    
          ball.y = canvas.height / 2;
    
          (function drawFrame () {
            animRequest = window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            var dx = targetX - ball.x;
    
            if (Math.abs(dx) < 1) {
              ball.x = targetX;
              /* ERRATA: 'cancelRequestAnimationFrame' renamed to 'cancelAnimationFrame' to reflect an update to the W3C Animation-Timing Spec.
               * See utils.js for the update to check for cross-browser compatibility.
               */
              window.cancelAnimationFrame(animRequest);
              log.value = "Animation done!";
            } else {
              var vx = dx * easing;
              ball.x += vx;
            }
            ball.draw(context);
          }());
        };
        </script>
      </body>
    </html>
    View Code

    移动到鼠标,是先获取鼠标的位置,并作为运动的目标点。

    04-ease-to-mouse.html

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Ease to Mouse</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>
        <aside>Move mouse on canvas element.</aside>
    
        <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'),
              mouse = utils.captureMouse(canvas),
              ball = new Ball(),
              easing = 0.05;
    
          (function drawFrame () {
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            var vx = (mouse.x - ball.x) * easing,
                vy = (mouse.y - ball.y) * easing;
    
            ball.x += vx;
            ball.y += vy;
            ball.draw(context);
          }());
        };
        </script>
      </body>
    </html>
    View Code

    补充一下,释放(easing)不只是使用与运动,它是一种由快变慢的效果,还适用于旋转(如大转盘),颜色等。

    2.弹性

     一维弹簧效果

    弹簧效果离中心点的距离和加速度成正比。实际的加速度应该是距离*系数。

    05-spring-1.html

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Spring 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(),
              spring = 0.03,
              targetX = canvas.width / 2,
              vx = 0;
    
          ball.y = canvas.height / 2;
    
          (function drawFrame () {
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            var dx = targetX - ball.x,
                ax = dx * spring;
    
            vx += ax;
            ball.x += vx;
            ball.draw(context);
          }());
        };
        </script>
      </body>
    </html>
    View Code

    比较真实的弹簧效果

    在实际生活有摩擦力或是阻力,物体不会无休止的运动,下面将阻力的考虑在内。

    06-spring-2.html

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Spring 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(),
              spring = 0.03,
              friction = 0.95,
              targetX = canvas.width / 2,
              vx = 0;
    
          ball.y = canvas.height / 2;
    
          (function drawFrame () {
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            var dx = targetX - ball.x,
                ax = dx * spring;
    
            vx += ax;
            vx *= friction;
            ball.x += vx;
            ball.draw(context);
          }());
        };
        </script>
      </body>
    </html>
    View Code

    这里只是简单的用阻力来控制速度无限接近0,需要补充一个到目标停止计算的条件类似如下

    if (Math.abs(vx) > 0.001) {
     vx += ax;
     vx *= friction;
     ball.x += vx;
    }

    二维考虑y方向

    07-spring-3.html

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Spring 3</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(),
              spring = 0.03,
              friction = 0.95,
              targetX = canvas.width / 2,
              targetY = canvas.height / 2,
              vx = 0,
              vy = 0;
    
          (function drawFrame () {
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            var dx = targetX - ball.x,
                dy = targetY - ball.y,
                ax = dx * spring,
                ay = dy * spring;
    
            vx += ax;
            vy += ay;
            vx *= friction;
            vy *= friction;
            ball.x += vx;
            ball.y += vy;
            ball.draw(context);
          }());
        };
        </script>
      </body>
    </html>
    View Code

    在目标移动的情况

    考虑移动到鼠标位置的弹簧效果,将目标设置为鼠标位置即可。

    08-spring-4.html

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Spring 4</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>
        <aside>Move mouse on canvas element.</aside>
    
        <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'),
              mouse = utils.captureMouse(canvas),
              ball = new Ball(),
              spring = 0.03,
              friction = 0.95,
              vx = 0,
              vy = 0;
    
          (function drawFrame () {
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            var dx = mouse.x - ball.x,
                dy = mouse.y - ball.y,
                ax = dx * spring,
                ay = dy * spring;
    
            vx += ax;
            vy += ay;
            vx *= friction;
            vy *= friction;
            ball.x += vx;
            ball.y += vy;
            ball.draw(context);
          }());
        };
        </script>
      </body>
    </html>
    View Code

    考虑弹簧线

    给弹簧效果加条弹簧线,让其更真实一点。

    用api画一条圆心到鼠标位置的线就可以了。

    考虑重力时,只需再加上重力加速度。

    09-spring-5.html

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Spring 5</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>
        <aside>Move mouse on canvas element.</aside>
    
        <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'),
              mouse = utils.captureMouse(canvas),
              ball = new Ball(),
              spring = 0.03,
              friction = 0.9,
              gravity = 2,
              vx = 0,
              vy = 0;
    
          (function drawFrame () {
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            var dx = mouse.x - ball.x,
                dy = mouse.y - ball.y,
                ax = dx * spring,
                ay = dy * spring;
    
            vx += ax;
            vy += ay;
            vy += gravity;
            vx *= friction;
            vy *= friction;
            ball.x += vx;
            ball.y += vy;
            context.beginPath();
            context.moveTo(ball.x, ball.y);
            context.lineTo(mouse.x, mouse.y);
            context.stroke();
            ball.draw(context);
          }());
        };
        </script>
      </body>
    </html>
    View Code

    链式效果

    链式效果的是对单个效果的发散,第一个球的目标为鼠标,第二个球的目标为第一个球的中心,依次类推。

    10-chain.html

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Chain</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>
        <aside>Move mouse on canvas element.</aside>
    
        <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'),
              mouse = utils.captureMouse(canvas),
              ball0 = new Ball(),
              ball1 = new Ball(),
              ball2 = new Ball(),
              spring = 0.03,
              friction = 0.9,
              gravity = 2;
    
          function move (ball, targetX, targetY) {
            ball.vx += (targetX - ball.x) * spring;
            ball.vy += (targetY - ball.y) * spring;
            ball.vy += gravity;
            ball.vx *= friction;
            ball.vy *= friction;
            ball.x += ball.vx;
            ball.y += ball.vy;
          }
    
          (function drawFrame () {
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            move(ball0, mouse.x, mouse.y);
            move(ball1, ball0.x, ball0.y);
            move(ball2, ball1.x, ball1.y);
    
            //draw spring
            context.beginPath();
            context.moveTo(mouse.x, mouse.y);
            context.lineTo(ball0.x, ball0.y);
            context.lineTo(ball1.x, ball1.y);
            context.lineTo(ball2.x, ball2.y);
            context.stroke();
    
            //draw balls
            ball0.draw(context);
            ball1.draw(context);
            ball2.draw(context);
          }());
        };
        </script>
      </body>
    </html>
    View Code

    用数组管理

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Chain Array</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>
        <aside>Move mouse on canvas element.</aside>
    
        <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'),
              mouse = utils.captureMouse(canvas),
              balls = [],
              numBalls = 10,
              spring = 0.03,
              friction = 0.9,
              gravity = 2;
    
          while (numBalls--) {
            balls.push(new Ball(20));
          }
    
          function move (ball, targetX, targetY) {
            ball.vx += (targetX - ball.x) * spring;
            ball.vy += (targetY - ball.y) * spring;
            ball.vy += gravity;
            ball.vx *= friction;
            ball.vy *= friction;
            ball.x += ball.vx;
            ball.y += ball.vy;
          }
    
          function draw (ballB, i) {
            //if first ball, move to mouse
            if (i === 0) {
              move(ballB, mouse.x, mouse.y);
              context.moveTo(mouse.x, mouse.y);
            } else {
              var ballA = balls[i-1];
              move(ballB, ballA.x, ballA.y);
              context.moveTo(ballA.x, ballA.y);
            }
            context.lineTo(ballB.x, ballB.y);
            context.stroke();
            ballB.draw(context);
          }
    
          (function drawFrame () {
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            context.beginPath();
            balls.forEach(draw);
          }());
        };
        </script>
      </body>
    </html>
    View Code

    多个弹簧

    12-multi-spring.html

    12-multi-spring.html
    View Code

    与目标保持一定距离

    利用三角函数,根据鼠标位置计算出将要运动到的目标。之后同上。

    13-offset-spring.html

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Offset Spring</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>
        <aside>Move mouse on canvas element.</aside>
    
        <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'),
              mouse = utils.captureMouse(canvas),
              ball = new Ball(),
              spring = 0.03,
              friction = 0.9,
              springLength = 100,
              vx = 0,
              vy = 0;
    
          (function drawFrame () {
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            var dx = ball.x - mouse.x,
                dy = ball.y - mouse.y,
                angle = Math.atan2(dy, dx),
                targetX = mouse.x + Math.cos(angle) * springLength,
                targetY = mouse.y + Math.sin(angle) * springLength;
    
            vx += (targetX - ball.x) * spring;
            vy += (targetY - ball.y) * spring;
            vx *= friction;
            vy *= friction;
            ball.x += vx;
            ball.y += vy;
            context.beginPath();
            context.moveTo(ball.x, ball.y);
            context.lineTo(mouse.x, mouse.y);
            context.stroke();
            ball.draw(context);
          }());
        };
        </script>
      </body>
    </html>
    View Code

    双重弹簧

    综合运用:用到保持距离,一般弹簧效果,移动目标等

    14-double-spring.html

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Double Spring</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>
        <aside>Press and drag circles with mouse.</aside>
    
        <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'),
              mouse = utils.captureMouse(canvas),
              ball0 = new Ball(20),
              ball1 = new Ball(20),
              ball0_dragging = false,
              ball1_dragging = false,
              spring = 0.03,
              friction = 0.9,
              springLength = 100,
              vx = 0,
              vy = 0;
    
          ball0.x = Math.random() * canvas.width;
          ball0.y = Math.random() * canvas.height;
    
          ball1.x = Math.random() * canvas.width;
          ball1.y = Math.random() * canvas.height;
    
          canvas.addEventListener('mousedown', function () {
            if (utils.containsPoint(ball0.getBounds(), mouse.x, mouse.y)) {
              ball0_dragging = true;
            }
            if (utils.containsPoint(ball1.getBounds(), mouse.x, mouse.y)) {
              ball1_dragging = true;
            }
          }, false);
    
          canvas.addEventListener('mouseup', function () {
            if (ball0_dragging || ball1_dragging) {
              ball0_dragging = false;
              ball1_dragging = false;
            }
          }, false);
    
          canvas.addEventListener('mousemove', function () {
            if (ball0_dragging) {
              ball0.x = mouse.x;
              ball0.y = mouse.y;
            }
            if (ball1_dragging) {
              ball1.x = mouse.x;
              ball1.y = mouse.y;
            }
          }, false);
    
          function springTo (ballA, ballB) {
            var dx = ballB.x - ballA.x,
                dy = ballB.y - ballA.y,
                angle = Math.atan2(dy, dx),
                targetX = ballB.x - Math.cos(angle) * springLength,
                targetY = ballB.y - Math.sin(angle) * springLength;
    
            ballA.vx += (targetX - ballA.x) * spring;
            ballA.vy += (targetY - ballA.y) * spring;
            ballA.vx *= friction;
            ballA.vy *= friction;
            ballA.x += ballA.vx;
            ballA.y += ballA.vy;
          }
    
          (function drawFrame () {
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            if (!ball0_dragging) {
              springTo(ball0, ball1);
            }
            if (!ball1_dragging) {
              springTo(ball1, ball0);
            }
            context.beginPath();
            context.moveTo(ball0.x, ball0.y);
            context.lineTo(ball1.x, ball1.y);
            context.stroke();
            ball0.draw(context);
            ball1.draw(context);
          }());
        };
        </script>
      </body>
    </html>
    View Code

    三重

    好复杂……

    15-triple-spring.html

    <!doctype html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Triple Spring</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>
        <aside>Press and drag circles with mouse.</aside>
    
        <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'),
              mouse = utils.captureMouse(canvas),
              ball0 = new Ball(20),
              ball1 = new Ball(20),
              ball2 = new Ball(20),
              ball0_dragging = false,
              ball1_dragging = false,
              ball2_dragging = false,
              spring = 0.03,
              friction = 0.9,
              springLength = 100,
              vx = 0,
              vy = 0;
    
          ball0.x = Math.random() * canvas.width;
          ball0.y = Math.random() * canvas.height;
    
          ball1.x = Math.random() * canvas.width;
          ball1.y = Math.random() * canvas.height;
    
          ball2.x = Math.random() * canvas.width;
          ball2.y = Math.random() * canvas.height;
    
          canvas.addEventListener('mousedown', function () {
            if (utils.containsPoint(ball0.getBounds(), mouse.x, mouse.y)) {
              ball0_dragging = true;
            }
            if (utils.containsPoint(ball1.getBounds(), mouse.x, mouse.y)) {
              ball1_dragging = true;
            }
            if (utils.containsPoint(ball2.getBounds(), mouse.x, mouse.y)) {
              ball2_dragging = true;
            }
          }, false);
    
          canvas.addEventListener('mouseup', function () {
            if (ball0_dragging || ball1_dragging || ball2_dragging) {
              ball0_dragging = false;
              ball1_dragging = false;
              ball2_dragging = false;
            }
          }, false);
    
          canvas.addEventListener('mousemove', function () {
            if (ball0_dragging) {
              ball0.x = mouse.x;
              ball0.y = mouse.y;
            }
            if (ball1_dragging) {
              ball1.x = mouse.x;
              ball1.y = mouse.y;
            }
            if (ball2_dragging) {
              ball2.x = mouse.x;
              ball2.y = mouse.y;
            }
          }, false);
    
          function springTo (ballA, ballB) {
            var dx = ballB.x - ballA.x,
                dy = ballB.y - ballA.y,
                angle = Math.atan2(dy, dx),
                targetX = ballB.x - Math.cos(angle) * springLength,
                targetY = ballB.y - Math.sin(angle) * springLength;
    
            ballA.vx += (targetX - ballA.x) * spring;
            ballA.vy += (targetY - ballA.y) * spring;
            ballA.vx *= friction;
            ballA.vy *= friction;
            ballA.x += ballA.vx;
            ballA.y += ballA.vy;
          }
    
          (function drawFrame () {
            window.requestAnimationFrame(drawFrame, canvas);
            context.clearRect(0, 0, canvas.width, canvas.height);
    
            if (!ball0_dragging) {
              springTo(ball0, ball1);
              springTo(ball0, ball2);
            }
            if (!ball1_dragging) {
              springTo(ball1, ball0);
              springTo(ball1, ball2);
            }
            if (!ball2_dragging) {
              springTo(ball2, ball0);
              springTo(ball2, ball1);
            }
            context.beginPath();
            context.moveTo(ball0.x, ball0.y);
            context.lineTo(ball1.x, ball1.y);
            context.lineTo(ball2.x, ball2.y);
            context.lineTo(ball0.x, ball0.y);
            context.stroke();
            ball0.draw(context);
            ball1.draw(context);
            ball2.draw(context);
          }());
        };
        </script>
      </body>
    </html>
    View Code
  • 相关阅读:
    RequestMapping_PathVariable注解
    RequestMapping_Ant 路径
    RequestMapping_请求参数&请求头
    RequestMapping_请求方式
    RequestMapping注解_修饰类
    18)C++对C的增强
    17)C++开始--命名空间
    16)未理解透
    15)文件函数例子
    14)文件操作
  • 原文地址:https://www.cnblogs.com/winderby/p/4260319.html
Copyright © 2011-2022 走看看