html53d效果代码（HTML5 直播疯狂点赞动画实现代码 附源码）

<li class="praise_bubble">
  <li class="bubble b1 bl1"></li>
</li>

.praise_bubble{
  width:100px;
  height:200px;
  position:relative;
  background-color:#f4f4f4;
}
.bubble{
    position: absolute;
    left:50%;
    bottom:0;
}

.bl1{
    animation:bubble_y 4s linear 1 forwards ; 
 }
@keyframes bubble_y {
    0% {
        margin-bottom:0;
    }
    100% {
        margin-bottom:200px;
    }
}

@keyframes bubble_y {
    0% {
        margin-bottom:0;
    }
    75%{
        opacity:1;
    }
    100% {
        margin-bottom:200px;
        opacity:0;
    }
}

.bl1{
    animation:bubble_big 0.5s linear 1 forwards; 
 }
@keyframes bubble_big_1 {
    0% {
        transform: scale(.3);
    }
    100% {
        transform: scale(1);
    }
  }

@keyframes bubble_1 {
    0% {
    }
    25% {
        margin-left:-8px;
    }
    50% {
        margin-left:8px
    }
    75% {
        margin-left:-15px
    }
    100% {
        margin-left:15px
    }
}

let praiseBubble = document.getElementById("praise_bubble");
let last = 0;
function addPraise() {
    const b =Math.floor(Math.random() * 6) + 1;
    const bl =Math.floor(Math.random() * 11) + 1; // bl1~bl11
    let d = document.createElement("li");
    d.className = `bubble b${b} bl${bl}`;
    d.dataset.t = String(Date.now());
    praiseBubble.appendChild(d);
}
setInterval(() => {
    addPraise();
},300)

.bl2{
    animation:bubble_2 $bubble_time linear .4s 1 forwards,bubble_big_2 $bubble_scale linear .4s 1 forwards,bubble_y $bubble_time linear .4s 1 forwards;   
}

window.requestAnimationFrame(() => {
     // 继续循环处理批次
     render();
 });

<canvas id="thumsCanvas" width="200" height="400" style="width:100px;height:200px">
</canvas>

class ThumbsUpAni{
    constructor(){
        const canvas = document.getElementById('thumsCanvas');
        this.context = canvas.getContext('2d')!;
        this.width = canvas.width;
        this.height = canvas.height;
    }
}

loadImages(){
    const images = [
        'jfs/t1/93992/8/9049/4680/5e0aea04Ec9dd2be8/608efd890fd61486.jpg" alt="html53d效果代码（HTML5 直播疯狂点赞动画实现代码 附源码）" border="0" />

const angle = getRandom(2, 10);
let ratio = getRandom(10,30)*((getRandom(0, 1) ? 1 : -1));
const getTranslateX = (diffTime) => {
    if (diffTime < this.scaleTime) {// 放大期间，不进行摇摆偏移
        return basicX;
    } else {
        return basicX + ratio*Math.sin(angle*(diffTime - this.scaleTime));
    }
};

const getTranslateY = (diffTime) => {
    return image.height / 2 + (this.height - image.height / 2) * (1-diffTime);
};

const basicScale = [0.6, 0.9, 1.2][getRandom(0, 2)];
const getScale = (diffTime) => {
    if (diffTime < this.scaleTime) {
        return +((diffTime/ this.scaleTime).toFixed(2)) * basicScale;
    } else {
        return basicScale;
    }
};

const fadeOutStage = getRandom(14, 18) / 100;
const getAlpha = (diffTime) => {
    let left = 1 - +diffTime;
    if (left > fadeOutStage) {
        return 1;
    } else {
        return 1 - +((fadeOutStage - left) / fadeOutStage).toFixed(2);
    }
};

createRender(){
    return (diffTime) => {
        // 差值满了，即结束了 0 ---》 1
        if(diffTime>=1) return true;
        context.save();
        const scale = getScale(diffTime);
        const translateX = getTranslateX(diffTime);
        const translateY = getTranslateY(diffTime);
        context.translate(translateX, translateY);
        context.scale(scale, scale);
        context.globalAlpha = getAlpha(diffTime);
        // const rotate = getRotate();
        // context.rotate(rotate * Math.PI / 180);
        context.drawImage(
            image,
            -image.width / 2,
            -image.height / 2,
            image.width,
            image.height
        );
        context.restore();
    };
}

const basicScale = [0.6, 0.9, 1.2][getRandom(0, 2)];

scan() {
    this.context.clearRect(0, 0, this.width, this.height);
    this.context.fillStyle = "#f4f4f4";
    this.context.fillRect(0,0,200,400);
    let index = 0;
    let length = this.renderList.length;
    if (length > 0) {
        requestAnimationFrame(this.scan.bind(this));
    }
    while (index < length) {
        const render = this.renderList[index];
        if (!render || !render.render || render.render.call(null, (Date.now() - render.timestamp) / render.duration)) {
            // 结束了，删除该动画
            this.renderList.splice(index, 1);
            length--;
        } else {
            // 当前动画未执行完成，continue
            index++;
        }
    }
}

diffTime = (Date.now() - render.timestamp) / render.duration

start() {
    const render = this.createRender();
    const duration = getRandom(1500, 3000);
    this.renderList.push({
        render,
        duration,
        timestamp: Date.now(),
    });
    if (!this.scanning) {
        this.scanning = true;
        requestFrame(this.scan.bind(this));
    }
    return this;
}

thumbsUp(num: number) {
      if (num <= this.praiseLast) return;
      this.thumbsStart = this.praiseLast;
      this.praiseLast = num;
      if (this.thumbsStart + 500 < num)
        this.thumbsStart = num - 500;
      const diff = this.praiseLast - this.thumbsStart;
      let time = 100;
      let isFirst = true;
      if (this.thumbsInter != 0) {
        return;
      }
      this.thumbsInter = setInterval(() => {
        if (this.thumbsStart >= this.praiseLast) {
          clearInterval(this.thumbsInter);
          this.thumbsInter = 0;
          return;
        }
        this.thumbsStart++;
        this.thumbsUpAni.start();
        if (isFirst) {
          isFirst = false;
          time = Math.round(5000 / diff);
        }
      }, time);
    },