设为首页收藏本站
开启辅助访问

在路上

 找回密码
 立即注册
在路上 › 站点首页 ›学习 › 查看内容

JavaScript动画 —— 弹动动画

2016-12-20 13:15| 发布者: zhangjf| 查看: 2975| 评论: 0

摘要: 缓动和弹动都是那对象从已有位置移动到目标位置的方法。但是缓动是指物体滑动到目标点就停下来；而弹动是指物体来回反弹一段时间后，最终停在目标点的运动。 弹动，大多数时候，物体的加速度与它到目标点的距离是 ...

缓动和弹动都是那对象从已有位置移动到目标位置的方法。但是缓动是指物体滑动到目标点就停下来；而弹动是指物体来回反弹一段时间后，最终停在目标点的运动。

弹动，大多数时候，物体的加速度与它到目标点的距离是成比例的。

来看一个在现实中弹动的例子：在橡皮筋的一头系上一个小球，另一头固定起来。小球的目标点就是它初始静止悬空的那个位置点。将小球拉开一小段距离然后松开，刚松手那一瞬间，它的速度为0，但是橡皮筋给它施加了外力，把它拉向目标点；如果小球尽可能地拉远，橡皮筋对它施加的外力就会变得越大。松手后，小球会急速飞过目标点。但是，当它飞过目标点以后，橡皮筋又把它往回拉，使其加速度减小，它飞得越远，橡皮筋施加的力就越大；最终，它的速度降为0，又掉头往回飞。由于受到摩擦力的影响，反复几次后，小球的运动逐渐慢下来，停在目标点上。

一. 一维坐标上的弹动

1 . 首先需要一个变量存储弹性比例系数，取值为0~1，较大的弹性比例常熟会表现出较硬的弹簧效果。

  1. var spring = 0.1,
  2. targetX = canvas.width / 2,
  3. vx = 0;
复制代码

2 . 接下来，计算小球到目标点的距离

  1. var dx = targetX - ball.x;
复制代码

3 . 计算加速度。在这个例子中，我们设置小球的加速度与距离成正比，即加速度 = 小球到目标点的距离 × 弹性比例系数。

  1. var ax = dx * spring;
复制代码

4 . 把加速度累加到速度上，然后把速度累加到小球的当前位置上：

  1. vx += ax;
  2. ball.x += vx;
复制代码

在开始写代码前，先模拟一下整个过程，假设ball.x = 0，初速度vx = 0，目标点的位置targetX = 100，弹性比例系数spring = 0.1。下面是执行过程：

(1) 第一轮，加速度ax = (100 - 0) * 0.1 = 10，把ax加载vx上得速度vx = 10，把vx加在小球的当前位置上得到ball.x = 10；

(2) 第二轮，加速度ax = (100 - ball.x) * 0.1 = 9，由此得到vx = 10 + 9 = 19，ball.x = 10 + 19 = 29；

(3) 第三轮，ax = 7.1， vx = 26.1，ball.x = 55.1；

(4) 第四轮， ax = 4.49，vx = 30.59，ball.x = 85.69;

(5) 第五轮， ax = 1.431，vx = 44.9，ball.x = 130.69:

(6) 第六轮，ax = -3.069，vx = 41.831，ball.x = 88.859；

... ...

随着小球一帧一帧地靠近目标，加速度变得越来越小，但是速度一直在增加；

五轮过后，小球越过了目标点后，加速度变成反向加速度，并且逐渐增加，导致速度逐渐减小，最终速度为0后，反向加速度达到极大值。此时速度将变成反向速度。

html代码如下：

  1. <canvas id="canvas" width="600" height="100"></canvas>
复制代码

JavaScript代码如下：

  1. // requestAnimationFrame的兼容性写法
  2. window.requestAnimFrame = (function(){
  3. return window.requestAnimationFrame ||
  4. window.webkitRequestAnimationFrame ||
  5. window.mozRequestAnimationFrame ||
  6. window.oRequestAnimationFrame ||
  7. window.msRequestAnimationFrame ||
  8. function( callback ){
  9. window.setTimeout(callback, 1000 / 60);
  10. };
  11. })();
  13. // cancelAnimationFrame的兼容性写法
  14. window.cancelAnimationFrame = (function () {
  15. return window.cancelAnimationFrame ||
  16. window.webkitCancelAnimationFrame ||
  17. window.mozCancelAnimationFrame ||
  18. window.oCancelAnimationFrame ||
  19. function (timer) {
  20. window.clearTimeout(timer);
  21. };
  22. })();
  24. // 创建画球函数
  25. function Ball() {
  26. this.x = 0;
  27. this.y = 0;
  28. this.radius = 10;
  29. this.fillStyle = "#f85455";
  30. this.draw = function(cxt) {
  31. cxt.fillStyle = this.fillStyle;
  32. cxt.beginPath();
  33. cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, true);
  34. cxt.closePath();
  35. cxt.fill();
  36. }
  37. }
  39. var canvas = document.getElementById("canvas"),
  40. context = canvas.getContext("2d"),
  41. ball = new Ball(),
  42. spring = 0.1,
  43. targetX = canvas.width / 2,
  44. vx = 0;
  45. ball.x = 20;
  46. ball.y = 20;
  48. // 缓动动画函数
  49. var animRequest = null;
  50. (function drawFrame() {
  51. animRequest = window.requestAnimationFrame(drawFrame, canvas);
  52. context.clearRect(0, 0, canvas.width, canvas.height);
  53. // 小球当前位置与目标点的距离
  54. var dx = targetX - ball.x;
  55. // 小球的加速度
  56. var ax = dx * spring;
  57. // 小球的速度
  58. vx += ax;
  59. // 计算出小球当前的位置
  60. ball.x += vx;
  61. ball.draw(context);
  62. })();
复制代码

实现的效果如下：

See the Pen EVNWqL by dengzhirong (@dengzhirong) on CodePen.

但是！但是，问题是小球永远都不会停下来，因为小球的摆动幅度不变。而我们希望实现的例子中，小球的弹动会越来越慢，直到停止下来。在实际生活中，小球的弹动势能大多是由于摩擦力的存在而转化成内能，最后使小球停下。所以，在这里，我们也模拟摩擦力，创建摩擦力系数friction，取值范围为0~1。

  1. var friction = 0.95;
复制代码

然后把vx * friction，得到当前的速度vx。

  1. vx * = friction;
复制代码

最终效果如下：

See the Pen GpNmRR by dengzhirong (@dengzhirong) on CodePen.

【备注：请按F5刷新，或者点击“Result”面板上悬浮的"Return"按钮后查看效果】

二. 二维坐标上的弹动

上面一个例子是让小球在x轴上运动。如果我们想让小球同时在x轴和y轴上运动，就需要引入二维坐标上的弹动。事实上很简单，只需要把目标点、速度和加速度扩展到二维坐标系上即可。

代码与上面例子雷同不再重复，直接上效果：

See the Pen ojYWgm by dengzhirong (@dengzhirong) on CodePen.

【备注：请按F5刷新，或者点击“Result”面板上悬浮的"Return"按钮后查看效果】

与前一个例子唯一不同的是增加了一条y轴。但是现在小球看起来仍然像是一维运动，虽然小球同时在x轴和y轴上运动，但它仍然是一条直线。原因是它的初速度为0，也仅受一个把它拉向目标点的外力，所以它沿着直线运动。为了动画更丰富一点，可以尝试修改vx、vy或者不同x、y轴的friction值。自己尝试一下吧。

三. 目标点移动的弹动

目标点移动，我们很容易就想到把鼠标当成目标点。在上一篇介绍缓动动画时，有一个小球跟随鼠标的缓动动画。让小球跟随鼠标弹动同样很简单，只要把targetX和targetY替换为当前坐标即可。效果很炫酷，但是代码基本没变。只要在前面的例子中改动如下两行：

  1. var dx = targetX - ball.x;
  2. var dy = targetY - ball.y;
复制代码

修改为：

  1. var dx = mouse.x - ball.x;
  2. var dy = mouse.y - ball.y;
复制代码

当然，我们还需要写一个获得当前鼠标位置的函数，可以参考我写的博文《JavaScript动画详解(一) —— 循环与事件监听》

完整代码如下：

HTML代码：

  1. <canvas id="canvas" width="400" height="400"></canvas>
复制代码

JavaScript代码：

  1. // requestAnimationFrame的兼容性写法
  2. window.requestAnimFrame = (function(){
  3. return window.requestAnimationFrame ||
  4. window.webkitRequestAnimationFrame ||
  5. window.mozRequestAnimationFrame ||
  6. window.oRequestAnimationFrame ||
  7. window.msRequestAnimationFrame ||
  8. function( callback ){
  9. window.setTimeout(callback, 1000 / 60);
  10. };
  11. })();
  13. // cancelAnimationFrame的兼容性写法
  14. window.cancelAnimationFrame = (function () {
  15. return window.cancelAnimationFrame ||
  16. window.webkitCancelAnimationFrame ||
  17. window.mozCancelAnimationFrame ||
  18. window.oCancelAnimationFrame ||
  19. function (timer) {
  20. window.clearTimeout(timer);
  21. };
  22. })();
  24. // 获得当前鼠标位置
  25. function getMouse(ev) {
  26. var mouse = {
  27. x: 0,
  28. y: 0
  29. };
  30. var event = ev || window.event;
  31. if(event.pageX || event.pageY) {
  32. x = event.x;
  33. y = event.y;
  34. }else {
  35. var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
  36. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  37. x = event.clientX + scrollLeft;
  38. y = event.clientY + scrollTop;
  39. }
  40. mouse.x = x;
  41. mouse.y = y;
  43. return mouse;
  44. }
  46. // 创建画球函数
  47. function Ball() {
  48. this.x = 0;
  49. this.y = 0;
  50. this.radius = 10;
  51. this.fillStyle = "#f85455";
  52. this.draw = function(cxt) {
  53. cxt.fillStyle = this.fillStyle;
  54. cxt.beginPath();
  55. cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, true);
  56. cxt.closePath();
  57. cxt.fill();
  58. }
  59. }
  61. var canvas = document.getElementById("canvas"),
  62. context = canvas.getContext("2d"),
  63. ball = new Ball(),
  64. spring = 0.05,
  65. vx = 0,
  66. vy = 0,
  67. targetX = 0,
  68. targetY = 0,
  69. friction = 0.95;
  70. ball.x = 20;
  71. ball.y = 20;
  72. var mouse = {x: 0, y: 0};
  74. canvas.addEventListener("mousemove", function(ev) {
  75. mouse = getMouse(ev);
  76. targetX = mouse.x;
  77. targetY = mouse.y;
  78. console.log(targetX + " , " + targetY);
  79. }, false);
  80. // 缓动动画函数
  81. var animRequest = null;
  82. (function drawFrame() {
  83. animRequest = window.requestAnimationFrame(drawFrame, canvas);
  84. context.clearRect(0, 0, canvas.width, canvas.height);
  85. // 小球当前位置与目标点的距离
  86. var dx = targetX - ball.x;
  87. var dy = targetY - ball.y;
  88. // 小球的加速度
  89. var ax = dx * spring;
  90. var ay = dy * spring;
  91. // 小球的速度
  92. vx += ax;
  93. vy += ay;
  94. vx *= friction;
  95. vy *= friction;
  96. // 计算出小球当前的位置
  97. ball.x += vx;
  98. ball.y += vy;
  99. ball.draw(context);
  100. })();
复制代码

效果如下：

See the Pen LpbyGq by dengzhirong (@dengzhirong) on CodePen.

【备注：把鼠标移上去试试~】

好吧，上面这个例子不够带劲儿，希望使小球看起来像是栓在橡皮筋上，此时只要在上面的基础上再小球圆心与当前鼠标位置画线即可。

  1. context.beginPath();
  2. context.strokeStyle = "#71A4AD";
  3. context.moveTo(ball.x, ball.y);
  4. context.lineTo(mouse.x, mouse.y);
  5. context.stroke();
复制代码

效果如下：

See the Pen NGbjRd by dengzhirong (@dengzhirong) on CodePen.

四. 总结

弹动和缓动非常类似，都是使用循环函数逐帧绘制从当前位置到目标位置的运动效果。不同的是缓动是指速度与距离成比例，而弹动是加速度与距离成比例关系。但是要模拟出更加真实的弹动，可能需要加入类似摩擦力系数的因子，把速度逐渐降下，直到停止运动。

相关文章：

1 . 《JavaScript动画详解(二) —— 缓动动画》

2 . 《JavaScript动画详解(一) —— 循环与事件监听》

收藏 邀请
上一篇：Java实现拖拽上传下一篇：Poi实现Excel导出工具类封装

最新评论

相关分类

小黑屋|在路上 ( 蜀ICP备15035742号-1 )  

;

GMT+8, 2025-7-8 11:15

Copyright 2015-2025 djqfx

返回顶部