1.弹弹球

最新推荐文章于 2024-09-11 15:33:18 发布

konglingbin66

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量398

点赞数

分类专栏： web动画探索文章标签：动画 html5 javascript css

本文链接：https://blog.csdn.net/konglingbin66/article/details/127749748

版权

web动画探索专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍如何使用HTML和JavaScript实现一个躁动的弹球动画。通过CSS和HTML创建球的外观，利用JavaScript处理球的碰撞反弹效果。动画原理基于人眼无法察觉的快速移动，通过定时器实现每秒多个帧的平滑移动。文章还讨论了如何处理边界碰撞、速度分解，并提出了进一步的优化和扩展思考，如响应窗口大小变化、鼠标点击创建消失的小球以及多个随机运动的小球。

摘要由CSDN通过智能技术生成

1.动画——躁动的弹球

2.分析需求——庖丁解牛

a.这个动画需要个球

这个需求，可以通过CSS和HTML搞定

b.这个球很不安分，喜欢弹来弹去，不知疲倦，不撞南墙不回头，不见黄河不死心。

这个需求需要借助CSS配合JS来实现，当弹球碰到窗口的时候会改变球的运动轨迹。

3.实现弹弹球——球都没有，弹个球啊

说来也简单，就是通过一个div元素来显示弹球。

4.实现弹弹球——web上哪里有球，都是css和html

5.动画原理——球是怎么动起来的

人的眼睛的反应速度是 1/24秒，也就是说，如果小球不是连续移动的，而是1/24秒动一次，甚至更快（我们一般1/30秒，或1/60秒，动一次），那么人眼是反应不过来的，会认为小球是连续运动的，而不是每隔1/24秒移动一次。这就是动画的原理——每隔1/24秒，移动一次小球。变化间隔比1/24秒长（刷新慢），那么会看到画面闪烁，也就是卡顿，如果比1/24秒短（刷新快），动画质量会更高，但是性能消耗也越大。1秒分割成的段数，也叫做帧数，我们可以说每秒24帧。

6.如何移动——从设计思想到程序，是关键

7.速度分解——复习初中物理

小球之所以表现为弹来弹去，是因为碰到了web窗口的边界，然后改变了运动的方向。速度是矢量，包括了方向和大小，最终的运动方向，其实可以分解为两个方向的叠加，也就是x和y方向上分量速度叠加，不同大小的Vx，Vy可以叠加出千变万化的各种速度大小和方向。如果方向反向，就表现为反弹（Vx 变为 –Vx，Vy变为 –Vy)，如果速度减小就会最终停止运动（这里，我们并不需要停止运动）。

8.移动细节——动画是细节的艺术

9.信息准备

10.付诸实践——把所有的计算变成行动

11.更多思考

a.当我们改变窗口大小的时候，如何让小球动画不受影响

b.能否将动画变成，点击鼠标，创建小球，然后运动一段时间后消失

c.如果有多个小球，如何让小球的速度和方向随机呢

12 代码

注意，代码中引用了Jquery-1.12.4.js, 该文件可到官网下载

html

<html>
  <head>
    <meta charset="utf-8"/>
    <title>bouncing ball</title>
    <link rel="stylesheet" href="ball.css"/>
  </head>
  <body>
    <div class="ball"></div>
    <script src=jquery-1.12.4.js></script>
    <script src="ball.js"></script>
  </body>
</html>

css

.ball{
  position: fixed;
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%;
  top:0;
  left:0;
}

jQuery(function($){
  var vx= 10,
      vy = 10,
      $ball = $('.ball'),
      $win = $(window),
      r = parseInt($ball.css('width')),
      maxWidth = $win.width() -r,
      maxHeight = $win.height() -r,
      posX = parseInt($ball.css('left')),
      posY = parseInt($ball.css('top'));

  function move(){
    posX += vx;
    posY += vy;
    if(posX > maxWidth){
      posX = maxWidth;
      vx = -vx;
    }else if(posX <0 ){
      posX = 0;
      vx = -vx;
    }
    if(posY > maxHeight){
      posY = maxHeight;
      vy = -vy;
    }else if(posY <0 ){
      posY = 0;
      vy = -vy;
    }
    console.log("(x,y)="+posX +","+posY);
    $ball.css({
      left:posX+"px",
      top:posY+"px"
    });
  }

  window.setInterval(move,1000/60);

});