jquery实现五彩烟花喷射动画效果代码-html代码-BFW代码库

jquery实现五彩烟花喷射动画效果代码

代码语言：html

所属分类：动画

代码描述：jquery实现五彩烟花喷射动画效果代码

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

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>

<style>
html, body{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
}
.container{
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #000000;
}
</style>

</head>
<body>

<div id="jsi-fountain-container" class="container"></div>

<script>
var RENDERER = {
        GRAVITY : 0.05,
        BASE_RATE : 0.6,
        OFFSET_RATE : 1 / 50,
        PARTICLE_COUNT : 30,
        
        init : function(){
                this.setParameters();
                this.setup();
                this.reconstructMethods();
                this.bindEvent();
                this.render();
        },
        setParameters : function(){
                this.$window = $(window);
                this.$container = $('#jsi-fountain-container');
                this.$canvas = $('<canvas />');
                this.context = this.$canvas.appendTo(this.$container).get(0).getContext('2d');
                this.particles = [];
                this.fountains = [];
                this.resizeIds = [];
        },
        setup : function(){
                this.particles.length = 0;
                this.fountains.length = 0;
                this.resizeIds.length = 0;
                this.width = this.$container.width();
                this.height = this.$container.height();
                this.$canvas.attr({width : this.width, height : this.height});
                this.velocity = 1;
                
                while(true){
                        var distance = 0,
                                velocity = this.velocity;
                                
                        while(velocity >= 0){
                                velocity -= this.GRAVITY;
                                distance += velocity;
                        }
                        if(distance > Math.min(this.height * (this.BASE_RATE - this.OFFSET_RATE), 500)){
                                this.velocity--;
                                break;
                        }
                        this.velocity++;
                }
                this.gradient = this.context.createLinearGradient(0, this.height * this.BASE_RATE, 0, this.height);
                this.gradient.addColorStop(0, 'hsla(210, 80%, 5%, 0.5)');
                this.gradient.addColorStop(0.1, 'hsla(210, 80%, 5%, 0.8)');
                this.gradient.addColorStop(1, 'hsla(210, 80%, 5%, 1)');
                this.createElements();
        },
        createElements : function(){
                for(var i = 0, count = this.PARTICLE_COUNT * this.width / 500  * this.height / 500; i < count; i++){
                        this.particles.push(new PARTICLE(this));
                }
                for(var i = -2; i <= 2; i++){
                        this.fountains.push(new FOUNTAIN(this, this.width / 2 + i * Math.max(250, this.width / 5), this.height * (this.BASE_RATE - this.OFFSET_RATE), i));
                }
        },
        watchWindowSize : function(){
                while(this.resizeIds.length > 0){
                        clearTimeout(this.resizeIds.pop());
                }
                this.tmpWidth = this.$window.width();
                this.tmpHeight = this.$window.height();
                this.resizeIds.push(setTimeout(this.jdugeToStopResize, this.RESIZE_INTERVAL));
        },
        jdugeToStopResize : function(){
                var width = this.$window.width(),
                        height = this.$window.height(),
                        stopped = (width == this.tmpWidth && height == this.tmpHeight);
                        
                this.tmpWidth = width;
                this.tmpHeight = height;
                
                if(stopped){
                        this.setup();
                }
        },
        reconstructMethods : function(){
                this.watchWindowSize = this.watchWindowSize.bind(this);
                this.jdugeToStopResize = this.jdugeToStopResize.bind(this);
                this.render = this.render.bind(this);
        },
        bindEvent : function(){
                this.$window.on('resize', this.wat.........完整代码请登录后点击上方下载按钮下载查看