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