JavaScript小球弹跳动画-优快云博客

JavaScript小球掉落弹起

效果图:

在这里插入图片描述

小球对象类:

export default class Ball{
    elem;
    speed=1;
    y=-50;
    constructor(){
        this.elem=this.createElem();
    }
    // 单例模式，确保只有一个元素
    createElem(){
        if(this.elem) return this.elem;
        let div=document.createElement("div");
        Object.assign(div.style,{
            width:"50px",
            height:"50px",
            backgroundColor:Ball.randomColor(),
            borderRadius:"50%",
            position:"absolute",
            top:"-50px"
        });
        return div;
    }
    // 随机颜色
    static randomColor(){
        var col="#";
        for(var i=0;i<6;i++){
            col+=Math.floor(Math.random()*16).toString(16);
        }
        return col;
    }
    appendTo(select){
        // 对象的构造函数就是该对象的类别
        if(select.constructor===String)document.querySelector(select).appendChild(this.elem);
        else if(select instanceof HTMLElement) select.appendChild(this.elem);
    }
    setX(x){
        this.elem.style.left=x+"px";
    }
    // 控制小球的上下跳跃， 当小球遇到边界（上下），就重新设定参数回到最顶上，循环往下落。
    update(){
        if(this.y>400) this.speed=-this.speed;
        this.speed+=0.2;
        this.y+=this.speed;
        this.elem.style.top=this.y+"px";
    }
}

Utils方法库使用的随机数方法：

    static random(min,max){
        return Math.floor(Math.random()*(max-min))+min;
    }

html实例化小球对象代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <script type="module">
      import Ball from "./js/Ball.js";
      import Utils from "./js/Utils.js";
      // 判断某个对象是不是HTML标签元素： console.log(document.body instanceof HTMLElement)
      // fps 帧频  60fps  1000
      var ids,
        arr = [],
        time = 30;
      init();
      function init() {
        createBall();
        animation();
      }

      function createBall() {
        var ball = new Ball();
        ball.appendTo("body");
        //工具类中的随机数控制小球的落点的横坐标
        ball.setX(Utils.random(0, 1440));
        arr.push(ball);
      }

      function animation() {
        requestAnimationFrame(animation);
        // window.requestAnimationFrame()方法告诉浏览器执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画，
        // 该方法使用一个回调函数，作为参数，这个回调函数会在浏览器重绘之前调用。
        allUpdate();
        intervalCreate();
      }
      //   随机控制小球数量
      function intervalCreate() {
        time--;
        if (time > 0) return;
        time = Utils.random(20, 40);
        for (var i = 0; i < Utils.random(1, 4); i++) {
          createBall();
        }
      }
      //   遍历所有的小球，开始移动
       
      function allUpdate() {
        for (var i = 0; i < arr.length; i++) {
          arr[i].update();
        }
      }
    </script>
  </body>
</html>