pixi实现十几种粒子喷射模拟重力弹射动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：pixi实现十几种粒子喷射模拟重力弹射动画效果代码，点击更换预设就可切换到其他的动画效果。

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

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

<head>

    <meta charset="UTF-8">





    <style>

        * {
          -webkit-touch-callout: none; /* iOS Safari */
          -webkit-user-select: none; /* Safari */
          -khtml-user-select: none; /* Konqueror HTML */
          -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
          supported by Chrome, Edge, Opera and Firefox */
        }
        body, html {
          font-family: Roboto, sans-serif;
          padding: 0;
          margin: 0;
          height: 100vh;
          line-height: 21px;
          font-size: 16px;
          overflow: hidden;
        }
        @media only screen and (max-width : 1024px) {
          body, html {
            font-size: 14px;
            line-height: 19px;
          }
          .small {
            font-size: 13px;
          }
          .intro select {
            font-size: 14px;
          }
        }
        input {
          font-family: Fira Sans;
        }
        .small {
          font-size: 14px;
        }
        .red {
          color: #880000;
        }
        .cascade-label {
          position: absolute;
          border: 2px solid black;
          border-radius: 20px;
          width: 30px;
          height: 30px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: white;
          color: black;
          font-size: 20px;
          z-index: 50;
          visibility: hidden;
          /*display: none;*/
        }
        #help-container {
          position: fixed;
          display: none;
          padding: 5vh;
          background: white;
          border: 3px solid #888;
          height: 100vh;      
          box-sizing: border-box;
          overflow: auto;
          z-index: 500;
        }
        #intro-container {
          display: grid;
          grid-template-rows: 8fr auto 2fr;
          grid-template-columns: minmax(2vw, 1fr) 20fr minmax(2vw, 1fr);
          position: fixed;
          width: 100vw;
          height: 100vh;
        }
        @media only screen and (max-width : 1024px) {
          #intro-container {
            grid-template-columns: 1rem auto 1rem;
            grid-template-rows: 8fr auto 1rem;
          }
        }
        .intro {
          grid-row: 2;
          grid-column: 2;
          border: 3px solid #AAA;
          color: #666;
          background: white;
          width: 100%;
          box-sizing: border-box;
          padding: 2rem 3rem;
        }
        @media only screen and (max-width : 1024px) {
          .intro {
            padding: 1rem;
          }
        }
        .intro button {
          margin: 1rem 0;
          background-color: #800;
          color: white;
          font-size: 1rem;
          height: 2rem;
          line-height: 2rem;
          padding: 0 1rem;
          border-radius: 20px;
          border: 0;
          cursor: pointer;
        }
        #help-button {
          text-shadow: 2px 2px 8px #888888;
          box-shadow: 2px 2px #888888;
          cursor: pointer;
          color: white;
          display: flex;
          justify-content: center; 
          align-items: center;
          position: absolute;
          bottom: 2vh;
          left: 2vh;
          width: 30px;
          height: 30px;
          border-radius: 30px;
          border: 2px solid white;
        }
        .intro select {
          font-size: 18px;
        }
    </style>


</head>


<body>
    <div data-cascade-label='1' class="cascade-label">1</div>
    <div data-cascade-label='2' class="cascade-label">2</div>
    <div data-cascade-label='3' class="cascade-label">3</div>
    <div data-cascade-label='4' class="cascade-label">4</div>
    <div id="pixi"></div>

    <canvas id='container' style='position:absolute;' width='1024' height='768'>
  </canvas>
    <input style="display: none;" id="input" type='text' value='Cascades' class='input' />

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.5.1.5.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/zepto.1.2.0.js"></script>

    <script>
        (function ($) {
          $.extend($.fn,
          {
            fadeIn: function (ms)
            {
              if (typeof ms === 'undefined') ms = 500;
        
              $(this).css(
              {
                display: 'block',
                opacity: 0 }).
              animate({
                opacity: 1 },
              ms);
        
              return this;
            },
        
            fadeOut: function (ms)
            {
              if (typeof ms === 'undefined') ms = 500;
        
              $(this).css(
              {
                opacity: 1 }).
              animate({
                opacity: 0 },
              ms, 'linear', function ()
              {
                $(this).css('display', 'none');
              });
        
              return this;
            } });
        
        })(Zepto);
        
        const creator = new URLSearchParams(window.location.search).get('creator');
        const viewer = new URLSearchParams(window.location.search).get('viewer');
        
        const debug = new URLSearchParams(window.location.search).get('debug');
        
        
        const circle64 = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFyGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNi4wLWMwMDIgNzkuMTY0MzUyLCAyMDIwLzAxLzMwLTE1OjUwOjM4ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDIxLTA0LTE1VDE4OjU3OjUxKzAxOjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIxLTA0LTE1VDE4OjU3OjUxKzAxOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyMS0wNC0xNVQxODo1Nzo1MSswMTowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpjN2ZlN2NjYy1iODgzLTdhNDUtOThiYy0yNDY3OWQyODk2MjAiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY.........完整代码请登录后点击上方下载按钮下载查看