zim实现烟花绽放动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：zim实现烟花绽放动画效果代码

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

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

<head>
  <meta charset="UTF-8">

  
</head>

<body >


  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/createjs.1.3.4.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zim_014.js"></script>
      <script  type="module">


// see https://zimjs.com
// and https://zimjs.com/learn
// and https://zimjs.com/docs

new Frame(FIT, 1024, 768, darker, black, ready);
function ready() {

  // We will make an Emitter shoot a streamer
  // A particle is said to decay when it stops moving
  // A particle is said to fizz when the life time is up and it disappears
  // We will capture a decayed event to then set an explosion
  // The explosion is another Emitter that we place at the streamer particle's position
  // We then clone these so that we can run two fireworks at the same time
  // Don't go crazy!  Watch out for performance...

  // make an Emitter() to emit the streamer for the firework
  const shoot = new Emitter({

    // Here we specify the object to emit (the Emitter clones the object)
    // We can pass in a single object or any ZIM VEE value from which each particle will be picked
    // ZIM VEE values are as follows:
    // 1. an Array of values to pick from - eg. ["red", "green", "blue"]
    // 2. a Function that returns a value - eg. function(){return Date.now();}
    // 3. a ZIM RAND object literal - eg. {min:10, max:20, integer:true, negative:true} max is required (not applicable for the obj parameter)
    // 4. any combination of the above - eg. ["red", function(){x>100?["green", "blue"]:"yellow"}] zik is recursive
    // 5. a single value such as a Number, String, zim.Rectangle(), etc. this just passes through unchanged (like we have here)
    // the emitter will use zik() to pick for each particle it emits
    obj: new Circle(2, null, "black", 1),

    // adjust properties randomly for each particle
    // the values for the properties can be any ZIM VEE value
    // can also use this to set a property of a cloned emitter - just put the value you want
    // for example: random:{x:300} would set the x of all the particles to 300
    // see also horizontal and vertical parameters for random positioning...
    random: { color: [blue, green, pink, yellow, orange] },

    // trace will make the particle repeat itself as it travels
    // width and height are important as this specifies the cache dimension for tracing
    // The particles start in the middle of the width and height
    // unless the horizontal or vertical parameter is true - which it is not in this case
    trace: true,
    traceFadeTime: .8,
    width: W,
    height: H,

    // turn on events because we need to know when the particle has decayed
    // so that we can position an explosion at the particle position and explode it!
    events: true,

    // angle 0 is along the positive x axis and is positive going clockwise
    angle: { min: -90 - 15, max: -90 + 15 },

    // we are passing in a RAND object which is recived by ZIM VEE to randomly pick an interval
    interval: { min: 3, max: 5 },

    // the decay usually start at the life-decayTime but here we move it forward
    // this allows time for the streamer to show while the explosion starts
    life: 2,
    decayStart: 1.2,
    decayTime: .05,

    // going to clone a copy and want that one paused for a delay so set this one paused
    startPaused: true,

    fade: true, // default
    gravity: 10, // default
    force: { min: 9, max: 11 },
    layers: "top", // default
    cache: M // (default) on for mobile otherwise off
  }).
  centerReg().
  mov(0, 300);


  // create a second streamer
  // delay the second streamer and create an event for when the streamer has decayed
  const shoot2 = shoot.clone().addTo(); // x and y is cloned as well so will be in correct position
  timeout(2, () => {shoot2.pauseEmitter(false);}); // wait to start second
  shoot2.on("decayed", explode); // decayed is when it stops moving - fizz is when it fades out
  shoot2.on("emitted", playSounds);

  // now th.........完整代码请登录后点击上方下载按钮下载查看