svg+TweenMax+jquery实现木头燃烧火焰动画效果代码
代码语言:html
所属分类:动画
代码描述:svg+TweenMax+jquery实现木头燃烧火焰动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html, body { width: 100%; height: 100%; margin: 0; padding: 0; font-family: 'Catamaran', sans-serif; } body { background: #222; background: linear-gradient(to bottom, #111, #222); } .container { margin: 0; padding: 0; height: 100%; width: 100%; overflow: hidden; text-align: center; } svg { z-index: 10; height: 100%; } .stick { transform: translatex(100px) translatey(360px); } .flame { mix-blend-mode: screen; } </style> </head> <body> <div class="container"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg" width="400" height="800" preserveAspectRatio viewBox="0 0 400 800"></svg> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/snap.svg-min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script > TweenMax.lagSmoothing(0); console.clear(); var Flame = /** @class */ (function () { function Flame(svg, start, end, width, particle) { this.id = String(Math.round(Math.random() * 999999999999999)); this.group = svg.group(); this.group.addClass('flame'); this.startPoint = start; this.endPoint = end; this.startThickness = width + Math.round(Math.random() * 50); this.endThickness = 10 + Math.round(Math.random() * 10); this.guidePosition = Math.random() * 100; this.frequency = 0.01 + Math.random() * 0.008; this.amplitude = 40 + Math.random() * 40; this.height = 500; this.endHeight = 100 + Math.round(Math.random() * 400); this.y = Math.random() * 100; this.particle = particle; var colors = ['#F9ECA9', '#EFC900', '#D79700', '#D0BB48']; this.body = this.group.path().attr({ fill: this.particle ? '#F9ECA9' : colors[Math.floor(Math.random() * colors.length)], opacity: this.particle ? 1 : 0.8, stroke: 'none' }); this.updateGuide(); } Flame.prototype.remove = function () { this.group.remove(); }; Flame.prototype.updateGuide = function () { this.guide = []; var height = this.startPoint.y - this.endPoint.y; var widthChange = this.startPoint.x - this.endPoint.x; var y = this.startPoint.y; while (y-- >= this.endPoint.y) { var x = this.startPoint.x + (widthChange - (widthChange / height) * y); var wave = Math.sin(y * this.frequency + this.guidePosition); this.guide.push({ y: y, x: x + (wave * this.amplitude / 2 + this.amplitude / 2) }); } }; Flame.prototype.start = function (onComplete) { if (this.particle) TweenMax.to(this, (0.2 + Math.random()), { y: this.guide.length, height: this.endHeight, position: '.........完整代码请登录后点击上方下载按钮下载查看
网友评论0