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: '+=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,] }] : [
{ type: 'M', points: [0, y] },
{ type: 'L', points: [10, y - heightChunks * 0.2,
20, y - heightChunks * 0.4,
30, y - heightChunks * 0.6,
40, y - heightChunks * 0.8,
50, y - heightChunks * 1,
60, y - heightChunks * 1.2,
70, y - heightChunks * 1.4,
80, y - heightChunks * 1.6,
90, y - heightChunks * 1.8,
90, y - heightChunks * 2,
90, y - heightChunks * 2.2,
80, y - heightChunks * 2.4,
70, y - heightChunks * 2.6,
60, y - heightChunks * 2.8,
50, y - heightChunks * 3,
40, y - heightChunks * 3.1,
30, y - heightChunks * 3.2,
20, y - heightChunks * 3.3,
10, y - heightChunks * 3.4,
0, y - heightChunks * 3.5,
-10, y - heightChunks * 3.4,
-20, y - heightChunks * 3.3,
-30, y - heightChunks * 3.2,
-40, y - heightChunks * 3.1,
-50, y - heightChunks * 3,
-60, y - heightChunks * 2.8,
-70, y - heightChunks * 2.6,
-80, y - heightChunks * 2.4,
-90, y - heightChunks * 2.2,
-90, y - heightChunks * 2,
-90, y - heightChunks * 1.8,
-80, y - heightChunks * 1.6,
-70, y - heightChunks * 1.4,
-60, y - heightChunks * 1.2,
-50, y - heightChunks * 1,
-40, y - heightChunks * 0.8,
-30, y - heightChunks * 0.6,
-20, y - heightChunks * 0.4,
-10, y - heightChunks * 0.2,
0, y - heightChunks * 0,
] },
];
this.body.attr({ d: this.drawPath(body) });
}
};
return Flame;
}());
var StageManager = /** @class */ (function () {
function StageManager(svg) {
this.svg = svg;
this.fire = {};
this.size = { width: 0, height: 0 };
}
StageManager.prototype.init = function () {
var _this = this;
window.addEventListener('resize', function () { return _this.onResize(); }, true);
this.onResize();
this.tick();
};
StageManager.prototype.onResize = function () {
this.size.width = 400;
this.size.height = 800;
this.svg
.attr('width', this.size.width)
.attr('height', this.size.height);
};
StageManager.prototype.addFlame = function () {
var _this = this;
var particle = Math.random() > .8;
var start = { x: this.size.width / 2, y: this.size.height - (40 + Math.random() * 20) };
var end = { x: (this.size.width / 4) + Math.random() * (this.size.width / 2), y: particle ? -20 : this.size.height / 3 };
var width = this.size.width / 4;
var flame .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0