JavaScript实现微信聊天烟花效果

微信8.0烟花效果实现

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>demo</title>
</head>
<style>html,body {width: 100%;height: 100vh; overflow:hidden;margin:0;padding:0}#start{position:fixed;bottom:0;left:0;right:0;margin:auto;}</style><body><button id="start">点击开始</button><script>var raf = (function () {var TIME = Math.floor(1000 / 60);var frame, cancel;var frames = {};var lastFrameTime = 0;if (typeof requestAnimationFrame === 'function' && typeof cancelAnimationFrame === 'function') {frame = function (cb) {var id = Math.random();frames[id] = requestAnimationFrame(function onFrame(time) {if (lastFrameTime === time || lastFrameTime + TIME - 1 < time) {lastFrameTime = time;delete frames[id];cb();} else {frames[id] = requestAnimationFrame(onFrame);}});return id;};cancel = function (id) {if (frames[id]) {cancelAnimationFrame(frames[id]);}};} else {frame = function (cb) {return setTimeout(cb, TIME);};cancel = function (timer) {return clearTimeout(timer);};}return { frame: frame, cancel: cancel };}());function toDecimal(str) {return parseInt(str, 16);}function hexToRgb(str) {var val = String(str).replace(/[^0-9a-f]/gi, '');if (val.length < 6) {val = val[0] + val[0] + val[1] + val[1] + val[2] + val[2];}return {r: toDecimal(val.substring(0, 2)),g: toDecimal(val.substring(2, 4)),b: toDecimal(val.substring(4, 6))};}function updateFetti(context, fetti) {var progress = (fetti.tick++) / fetti.totalTicks;if (progress > 1) {return;}fetti.x += Math.cos(fetti.angle2D) * fetti.velocity; // 左下角fetti.y += Math.sin(fetti.angle2D) * fetti.velocity + fetti.gravity; // 左下角fetti.velocity *= fetti.decay;fetti.tiltAngle += 0.1;fetti.tiltSin = Math.sin(fetti.tiltAngle);fetti.tiltCos = Math.cos(fetti.tiltAngle);fetti.random = Math.random() + 7;var x1 = fetti.x;var y1 = fetti.y;var x2 = fetti.x + (fetti.random * fetti.tiltCos); // 左上角var y2 = fetti.y + (fetti.random * fetti.tiltSin); // 左上角var x3 = x2 + fetti.random;var y3 = y2;var x4 = fetti.x + fetti.random;var y4 = fetti.y;context.fillStyle = 'rgba(' + fetti.color.r + ', ' + fetti.color.g + ', ' + fetti.color.b + ', ' + (1 - progress) + ')';context.beginPath();context.moveTo(Math.floor(x1), Math.floor(y1));context.lineTo(Math.floor(x2), Math.floor(y2));context.lineTo(Math.floor(x3), Math.floor(y3));context.lineTo(Math.floor(x4), Math.floor(y4));context.closePath();context.fill();return fetti.tick < fetti.totalTicks;}function getCanvas(zIndex) {var canvas = document.createElement('canvas');canvas.style.position = 'fixed';canvas.style.top = '0px';canvas.style.left = '0px';canvas.style.pointerEvents = 'none';canvas.style.zIndex = zIndex;return canvas;}function setCanvasWindowSize(canvas) {canvas.width = document.documentElement.clientWidth;canvas.height = document.documentElement.clientHeight;}const canvas = getCanvas(200);setCanvasWindowSize(canvas);document.body.appendChild(canvas);var context = canvas.getContext('2d');const colors = ['#26ccff','#a25afd','#ff5e7e','#88ff5a','#fcff42','#ffa62d','#ff36ff','#7f7522','#2e3a1f','#181d4b','#0c212b','#d71345'];var arr = []for (let i = 0; i < 20; i++) {arr.push({"x":  0,"y": document.documentElement.clientHeight/3,"velocity": (45 * 0.5) + (Math.random() * 20),"angle2D": 3 / 2 * Math.PI + Math.random() * 1 / 4 * Math.PI,"tiltAngle":  Math.random() * Math.PI,"color": hexToRgb(colors[Math.floor(Math.random() * 12)]),"tick": 0,"totalTicks": 200,"decay": 0.9,"random": 0,"tiltSin": 0,"tiltCos": 0,"gravity": 3,"scalar": 1})}var animationFrame = null;function update() {context.clearRect(0, 0, canvas.width, canvas.height);arr = arr.filter(item => {return updateFetti(context, item);});if (arr.length) {animationFrame = raf.frame(update);}}start.onclick = () => {if(!animationFrame) {animationFrame = raf.frame(update);} else {for (let i = 0; i < 20; i++) {arr.push({"x": 0,"y":document.documentElement.clientHeight/3,"velocity": (45 * 0.5) + (Math.random() * 20),"angle2D": 3 / 2 * Math.PI + Math.random() * 1 / 4 * Math.PI,"tiltAngle":  Math.random() * Math.PI,"color": hexToRgb(colors[Math.floor(Math.random() * 12)]),"tick": 0,"totalTicks": 200,"decay": 0.9,"random": 0,"tiltSin": 0,"tiltCos": 0,"gravity": 3,"scalar": 1})}}}</script>
</body></html>

JavaScript实现微信聊天烟花效果相关推荐

jquery 背景特效实现_html5实现的仿网页版微信聊天界面效果源码
码农那点事儿关注我们,一起学习进步这是一款基于html5实现的仿网页版微信聊天界面效果源码,可实现微信网页版聊天界面效果,在编辑框编辑文字之后按Ctrl+Enter键即可提交文字到聊天对话框上.整 ...
HTML5实现微信聊天气泡效果
最近做一个HybridApp,前端有一个群聊的功能,于是就想模仿微信的聊天界面,先看效果图: HTML代码: <!DOCTYPE html> <html lang="en& ...
仿微信聊天气泡效果实现，有源代码（一）
微信聊天窗口的信息效果类似iphone上的短信效果,以气泡的形式展现,在Android上,实现这种效果主要用到ListView和BaseAdapter,配合布局以及相关素材,就可以自己做出这个效果,素 ...
仿微信聊天气泡效果实现
微信聊天窗口的信息效果类似iphone上的短信效果,以气泡的形式展现,在Android上,实现这种效果主要用到ListView和BaseAdapter,配合布局以及相关素材,就可以自己做出这个效果,素 ...
帮我用js写一个微信聊天那种气泡效果
当然可以! 下面是一个使用 JavaScript 实现微信聊天气泡效果的示例代码: .bubble {position: relative;background: #f1f1f1;border-rad ...
元素浮动布局，微信聊天框
元素浮动布局,微信聊天框知识导入: 文字的浮动布局浮动元素会脱离网页文档,与其他元素发生重叠,但是与文字内容不会发生重叠即文字环绕效果由此要注意:浮动元素是不占据空间的, 容器浮动:多个容器达到 ...
Android仿微信聊天语言点击喇叭动画效果
微信聊天界面点击语音时,喇叭的动画效果,下面上代码,该类是控制背景变化的工具类,不涉及语音录制和播放. 图片资源: package xxx;import android.os.Handler; imp ...
UIImageView 显示不规则图片，类似微信聊天气泡图片展示效果
微信聊天气泡,图片充满显示,效果: -(void)layoutSubviews { [super layoutSubviews]; CAShapeLayer * _maskLayer = [CASha ...
manjaro deepin 闪屏_微信聊天“闪屏”特效，整蛊效果100分！
❐ 今天技能君给大家分享一个微信聊天的玩法,让消息变成闪瞎眼的闪屏特效表情包,魔性十足,绝对能让你眼前一亮!哈哈哈哈哈! 分割线微信闪屏消息支持苹果和安卓手机使用在「运了个营」公众号回复&quo ...

JavaScript实现微信聊天烟花效果

JavaScript实现微信聊天烟花效果相关推荐

最新文章

热门文章