svg+TweenMax+jquery实现木头燃烧火焰动画效果代码-html代码-BFW代码库

代码语言：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: '+=6', ease: Linear.ease, onComplete: onComplete, onCompleteParams: [this] });
        else
            TweenMax.to(this, 0.5 + (Math.random()), { y: this.guide.length, height: this.endHeight, position: '+=6', ease: Power2.easeIn, onComplete: onComplete, onCompleteParams: [this] });
    };
    Flame.prototype.getPointAlongGuide = function (y, offsetXPercentage) {
        if (this.guide.length) {
            if (y >= this.guide.length)
                y = this.guide.length - 1;
            if (y < 0)
                y = 0;
            var thicknessDifference = this.endThickness - this.startThickness;
            var percentageAlongGuide = (y / this.guide.length) * 100;
            var thickness = this.startThickness + ((thicknessDifference / 100) * percentageAlongGuide);
            var xOffset = ((thickness / 2) / 100) * offsetXPercentage;
            return { x: this.guide[y].x + xOffset, y: this.guide[y].y };
        }
        return { x: 0, y: 0 };
    };
    Flame.prototype.drawPath = function (pathPoints) {
        var points = [];
        for (var i = 0; i < pathPoints.length; i++) {
            var subPoints = [];
            for (var j = 0; j < pathPoints[i].points.length / 2; j++) {
                var p = pathPoints[i].points.slice(j * 2, j * 2 + 2);
                var point = this.getPointAlongGuide(Math.round(p[1]), p[0]);
                subPoints.push(point.x);
                subPoints.push(point.y);
            }
            points.push(pathPoints[i].type + subPoints.join(' '));
        }
        return points.join(' ') + 'Z';
    };
    Flame.prototype.draw = function () {
        if (this.height > 0) {
            var y = Math.round(this.y);
            var height = Math.round(this.height);
            var heightChunks = height / 6;
            //                  let xInc = 5;
            //                  let yInc = 0.1;
            //                  let x = xInc;
            //                  let y = yInc;
            //                  let flamePoints = [];
            //                  for(let i = 0; i < 20; i++)
            //                  {
            //                          flamePoints.push(x);
            //                          flamePoints.push(y);
            //                          x += xInc;
            //                          y += yInc;
            //                  } 
            //                  for(let i = 0; i < 20; i++)
            //                  {
            //                          flamePoints.push(x);
            //                          flamePoints.push(y);
            //                          x -= xInc;
            //                          y += yInc;
            //                  } 
            //                  for(let i = 0; i < 20; i++)
            //                  {
            //                          flamePoints.push(x);
            //                          flamePoints.push(y);
            //                          x -= xInc;
            //                          y -= yInc;
            //                  } 
            //                  for(let i = 0; i < 20; i++)
            //                  {
            //                          flamePoints.push(x);
            //                          flamePoints.push(y);
            //                          x += xInc;
            //                          y -= yInc;
            //                  } 
            //                  //console.log(flamePoints)
            // I want to change this bit, this array could be generated in a loop.
            var body = this.particle ? [{ type: 'M', points: [0, y] },
                { type: 'L', points: [10, y - heightChunks * 0.2,
                        20, y - heightChunks * 0.4,
                        30, y - heightChunks * 0.6,] }] : [
                { t.........完整代码请登录后点击上方下载按钮下载查看