• 1.弹弹球

    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

    1. <html>
    2.   <head>
    3.     <meta charset="utf-8"/>
    4.     <title>bouncing balltitle>
    5.     <link rel="stylesheet" href="ball.css"/>
    6.   head>
    7.   <body>
    8.     <div class="ball">div>
    9.     <script src=jquery-1.12.4.js>script>
    10.     <script src="ball.js">script>
    11.   body>
    12. html>

    css

    1. .ball{
    2.   position: fixed;
    3.   width: 100px;
    4.   height: 100px;
    5.   background: red;
    6.   border-radius: 50%;
    7.   top:0;
    8.   left:0;
    9. }

    js

    1. jQuery(function($){
    2.   var vx= 10,
    3.       vy = 10,
    4.       $ball = $('.ball'),
    5.       $win = $(window),
    6.       r = parseInt($ball.css('width')),
    7.       maxWidth = $win.width() -r,
    8.       maxHeight = $win.height() -r,
    9.       posX = parseInt($ball.css('left')),
    10.       posY = parseInt($ball.css('top'));
    11.  
    12.   function move(){
    13.     posX += vx;
    14.     posY += vy;
    15.     if(posX > maxWidth){
    16.       posX = maxWidth;
    17.       vx = -vx;
    18.     }else if(posX <0 ){
    19.       posX = 0;
    20.       vx = -vx;
    21.     }
    22.     if(posY > maxHeight){
    23.       posY = maxHeight;
    24.       vy = -vy;
    25.     }else if(posY <0 ){
    26.       posY = 0;
    27.       vy = -vy;
    28.     }
    29.     console.log("(x,y)="+posX +","+posY);
    30.     $ball.css({
    31.       left:posX+"px",
    32.       top:posY+"px"
    33.     });
    34.   }
    35.  
    36.   window.setInterval(move,1000/60);
    37.  
    38. });

  • 相关阅读:
    渗透流程
    算法笔记—多数相加
    UE4 回合游戏项目 05- 战斗场景-向指定敌人移动
    如何检测代理IP质量与有效性？
    Linux性能优化--使用性能工具发现问题
    模板学堂丨Zabbix监控告警大屏
    leetcode4-寻找两个中序数组的中位数
    2022-08-22 C++并发编程（十四）
    DatasetDM: Synthesizing Data with Perception Annotations Using Diffusion Models
    阿里一面： Spring 有哪些扩展点？
  • 原文地址：https://blog.csdn.net/konglingbin66/article/details/127749748