jquery实现农村里树木下烟花绽放动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：jquery实现农村里树木下烟花绽放动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #101010;
}
.container{
    position: absolute;
    width: 500px;
    height: 500px;
    top: 50%;
    left: 50%;
    margin-top: -250px;
    margin-left: -250px;
}
canvas{
    position: absolute;
    top: 0;
    left: 0;
}
</style>




</head>

<body >
  <div id="jsi-fireworks-container" class="container"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
      <script>
var RENDERER = {
  LEAF_INTERVAL_RANGE: { min: 100, max: 200 },
  FIREWORK_INTERVAL_RANGE: { min: 20, max: 200 },
  SKY_COLOR: 'hsla(210, 60%, %luminance%, 0.2)',
  STAR_COUNT: 100,

  init: function () {
    this.setParameters();
    this.reconstructMethod();
    this.createTwigs();
    this.createStars();
    this.render();
  },
  setParameters: function () {
    this.$container = $('#jsi-fireworks-container');
    this.width = this.$container.width();
    this.height = this.$container.height();
    this.distance = Math.sqrt(Math.pow(this.width / 2, 2) + Math.pow(this.height / 2, 2));
    this.contextFireworks = $('<canvas />').attr({ width: this.width, height: this.height }).appendTo(this.$container).get(0).getContext('2d');
    this.contextTwigs = $('<canvas />').attr({ width: this.width, height: this.height }).appendTo(this.$container).get(0).getContext('2d');

    this.twigs = [];
    this.leaves = [new LEAF(this.width, this.height, this)];
    this.stars = [];
    this.fireworks = [new FIREWORK(this.width, this.height, this)];

    this.leafInterval = this.getRandomValue(this.LEAF_INTERVAL_RANGE) | 0;
    this.maxFireworkInterval = this.getRandomValue(this.FIREWORK_INTERVAL_RANGE) | 0;
    this.fireworkInterval = this.maxFireworkInterval;
  },
  reconstructMethod: function () {
    this.render = this.render.bind(this);
  },
  getRandomValue: function (range) {
    return range.min + (range.max - range.min) * Math.random();
  },
  createTwigs: function () {
    this.twigs.push(new TWIG(this.width, this.height, 0, 0, Math.PI * 3 / 4, 0));
    this.twigs.push(new TWIG(this.width, this.height, this.width, 0, -Math.PI * 3 / 4, Math.PI));
    this.twigs.push(new TWIG(this.width, this.height, 0, this.height, Math.PI / 4, Math.PI));
    this.twigs.push(new TWIG(this.width, this.height, this.width, this.height, -Math.PI / 4, 0));
  },
  createStars: function () {
    for (var i = 0, length = this.STAR_COUNT; i < length; i++) {
      this.stars.push(new STAR(this.width, this.height, this.contextTwigs, this));
    }
  },
  render: function () {
    requestAnimationFrame(this.render);

    var maxOpacity = 0,
    contextTwigs = this.contextTwigs,
    contextFireworks = this.contextFireworks;

    for (var i = this.fireworks.length - 1; i >= 0; i--) {
      maxOpacity = Math.max(maxOpacity, this.fireworks[i].getOpacity());
    }
    contextTwigs.clearRect(0, 0, this.width, this.height);
    contextFireworks.fillStyle = this.SKY_COLOR.replace('%luminance', 5 + maxOpacity * 15);
    contextFireworks.fillRect(0, 0, this.width, this.height);

    for (var i = this.fireworks.length - 1; i >= 0; i--) {
      if (!this.fireworks[i].render(contextFireworks)) {
        this.fireworks.splice(i, 1);
      }
    }
    for (var i = this.stars.length - 1; i >= 0; i--) {
      this.stars[i].render(contextTwigs);
    }
    for (var i = this.twigs.length - 1; i >= 0; i--) {
      this.twigs[i].render(contextTwigs);
    }
    for (var i = this.leaves.length - 1; i >= 0; i--) {
      if (!this.leaves[i].render(contextTwigs)) {
        this.leaves.splice(i, 1);
      }
    }
    if (--this.leafInterval == 0) {
      this.leaves.push(new LEAF(this.width, this.height, this));
      this.leafInterval = this.getRandomValue(this.LEAF_INTERVAL_RANGE) | 0;
    }
    if (--this.fireworkInterval == 0) {
      this.fireworks.push(new FIREWORK(this.width, this.height, this));
      this.maxFireworkInterval = this.getRandomValue(this.FIREWORK_INTERVAL_RANGE) | 0;
      this.fireworkInterval = this.maxFireworkInterval;
    }
  } };

var TWIG = function (width, height, x, y, angle, theta) {
  this.width = width;
  this.height = height;
  this.x = x;
  this.y = y;
  this.angle = angle;
  this.theta = theta;
  this.rate = Math.min(width, height) / 500;
};
TWIG.prototype = {
  SHAKE_FREQUENCY: Math.PI / 300,
  MAX_LEVEL: 4,
  COLOR: 'hsl(120, 60%, 1%)',

  renderBlock: function (context, x, y, length, level, angle) {
    context.save();
    context.translate(x, y);
    context.rotate(this.angle + angle * (level + 1));
    context.scale(this.rate, this.rate);
    context.beginPath();
    context.moveTo(0, 0);
    context.lineTo(0, -length);
    context.stroke();
    context.fill();

    if (level == this.MAX_LEVEL) {
      length = length / (1 - level / 10);

      context.save();
      context.beginPath();
      context.scale(1 - level / 10, 1 - level / 10);
      context.moveTo(0, -length);
      context.quadraticCurveTo(30, -length - 20, 0, -length - 80);
      context.quadraticCurveTo(-30, -length - 20, 0, -length);
      context.stroke();
      context.fill();
      context.restore();
      context.restore();
    } else {
      for (var i = -1; i <= 1; i += 2) {
        context.save();
        context.translate(0, -40);
        context.rotate((Math.PI / 3 - Math.PI / 20 * level) * i);
        context.scale(1 - level / 10, 1 - level / 10);
        context.beginPath();
        context.moveTo(0, 0);
        context.lineTo(0, -length * 0.8);
        context.quadraticCurveTo(30, -length * 0.8 - 20, 0, -length * 0.8 - 80);
        context.quadraticCurveTo(-30, -length * 0.8 - 20, 0, -length * 0.8);
        context.stroke();
        context.fill();
        context.restore();
      }
      context.restore();
      level++;
      this.renderBlock(context, x + 40 * Math.sin(this.angle + angle * level), y - 40 * Math.cos(this.angle + angle * level), length, level, angle);
    }
  },
  render: function (context) {
    context.fillStyle = this.COLOR;
    context.strokeStyle = this.COLOR;
    context.lineWidth = 3;
    this.renderBlock(context, this.x, this.y, 40, 0, Math.PI / 48 * Math.sin(this.theta));
    this.theta += this.SHAKE_FREQUENCY;
    this.theta %= Math.PI * 2;
  } };

var LEAF = function (width, height, renderer) {
  this.width = width;.........完整代码请登录后点击上方下载按钮下载查看