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

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: '.........完整代码请登录后点击上方下载按钮下载查看