canvas模仿直播视频点赞的喷射动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas模仿直播视频点赞的喷射动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background-color: rgba(255, 137, 164, 0.2); background-size: cover; background-repeat: no-repeat; } .liker { position: absolute; top: 0%; left: 50%; transform: translate(-50%, 0%); } .liker span { position: absolute; font-family: monospace; color: #F92A82; bottom: -70px; left: 50%; transform: translateX(-50%); } .btn { width: 50px; display: flex; justify-content: center; align-items: center; height: 50px; border-radius: 50%; border: none; position: absolute; cursor: pointer; left: 50%; transform: translate(-50%, -10%); background-color: #FF4D80; color: #fff; outline: none; transition: 0.3s ease; box-shadow: 0 3px 10px #F92A82; } .btn svg { fill: #fff; } .btn:hover { background-color: #F92A82; } </style> </head> <body> <div class="liker"> <canvas class="hearts-canvas"></canvas> <button class="btn"> <svg width="24" height="24" viewBox="0 0 24 24"> <path d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"></path> </svg> </button> <span>点击查看</span> </div> <script> class HeartsFlow { constructor(data) { this.el = document.querySelector(data.canvasEl); this.w = 200; this.h = 400; this.ctx = this.el.getContext('2d'); this.colors = [ '255, 137, 164', //'#FF89A4', '239, 121, 138', //'#EF798A', '255, 77, 128', //'#FF4D80', '249, 42, 130' //'#F92A82' ]; this.heartsAmount = data.amount; this.heartsList = []; this.isAnimate = false; this.raf = null; this.animate = this.animate.bind(this); this.paintHeart = this.paintHeart.bind(this); this.stopAnimation = this.stopAnimation.bind(this); this.init(); } getRandomColor() { return this.colors[Math.floor(Math.random() * this.colors.length)]; } getRandom(min, max) { return Math.floor(Math.random() * (max - min) + min); } setHeartsList() { let arr = []; for (let i = 0; i < this.heartsAmount; i++) { let currentSize = this.getRandom(10, 15); let dt = { x: this.w / 2, y: this.h, bx: this.w / 2, by: this.h, pos: this.h, _osp: this.getRandom(200, 400) / 100, osp: this.getRandom(11, 12) / 10, vsp: this.getRandom(currentSize, currentSize + i * 2) / 1000, size: currentSize, color: this.getRandomColor(), alfa: 1 }; arr.push(dt.........完整代码请登录后点击上方下载按钮下载查看
网友评论0