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