jquery实现canvas粒子流变换形状流动动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：jquery实现canvas粒子流变换形状流动动画效果代码

下面为部分代码预览，完整代码请点击下载或在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;background-color:#000000;
            
        }
        .container{
            width:100％;height:100%;margin:0;padding:0;background-color:#000000;
            
        }
    </style>
</head>

<body>
    <div id="jsi-particle-container" class="container"></div>
    <script>
        var RENDERER = {
         PARTICLE_COUNT: 1000,
         PARTICLE_RADIUS: 1,
         MAX_ROTATION_ANGLE: Math.PI / 60,
         TRANSLATION_COUNT: 500,
         init: function(strategy) {
             this.setParameters(strategy);
             this.createParticles();
             this.setupFigure();
             this.reconstructMethod();
             this.bindEvent();
             this.drawFigure();
         },
         setParameters: function(strategy) {
             this.$window = $(window);
             this.$container = $('#jsi-particle-container');
             this.width = this.$container.width();
             this.height = this.$container.height();
             this.$canvas = $('<canvas />').attr({
                 width: this.width,
                 height: this.height
             }).appendTo(this.$container);
             this.context = this.$canvas.get(0).getContext('2d');
             this.center = {
                 x: this.width / 2,
                 y: this.height / 2
             };
             this.rotationX = this.MAX_ROTATION_ANGLE;
             this.rotationY = this.MAX_ROTATION_ANGLE;
             this.strategyIndex = 0;
             this.translationCount = 0;
             this.theta = 0;
             this.strategies = strategy.getStrategies();
             this.particles = [];
         },
         createParticles: function() {
             for (var i = 0; i < this.PARTICLE_COUNT; i++) {
                 this.particles.push(new PARTICLE(this.center));
             }
         },
         reconstructMethod: function() {
             this.setupFigure = this.setupFigure.bind(this);
             this.drawFigure = this.drawFigure.bind(this);
             this.changeAngle = this.changeAngle.bind(this);
         },
         bindEvent: function() {
             this.$container.on('click', this.setupFigure);
             this.$container.on('mousemove', this.changeAngle);
         },
         changeAngle: function(event) {
             var offset = this.$container.offset(),
                 x = event.clientX - offset.left + this.$window.scrollLeft(),
                 y = event.clientY - offset.top + this.$window.scrollTop();
             this.rotationX = (this.center.y - y) / this.center.y * this.MAX_ROTATION_ANGLE;
             this.rotationY = (this.center.x - x) / this.center.x * this.MAX_ROTATION_ANGLE;
         },
         setupFigure: function() {
             for (var i = 0, length = this.particles.length; i < length; i++) {
                 this.particles[i].setAxis(this.strategies[this.strategyIndex]());
             }
             if (++this.strategyIndex == this.strategies.length) {
                 this.strategyIndex = 0;
             }
             this.translationCount = 0;
         },
         drawFigure: function() {
             requestAnimationFrame(this.drawFigure);
             this.context.fillStyle = 'rgba(0, 0, 0, 0.2)';
             this.context.fillRect(0, 0, this.width, this.height);
             for (var i = 0, length = this.particles.length; i < length; i++) {
                 var axis = this.particles[i].getAxis2D(this.theta);
                 this.context.beginPath();
                 this.context.fillStyle = axis.color;
                 this.context.arc(axis.x, axis.y, this.PARTICLE_RADIUS, 0, Math.PI * 2, false);
                 this.context.fill();
             }
             this.theta++;
             this.theta %= 360;
             for (var i = 0, length = this.particles.length; i < length; i++) {
                 this.particles[i].rotateX(this.rotationX);
                 this.particles[i].rotateY(this.rotationY);
             }
             this.translationCount++;
             this.translationCount %= this.TRANSLATION_COUNT;
             if (this.translationCount == 0) {
                 this.setupFigure();
             }
         }
     };
     var STRATEGY = {
         SCATTER_RADIUS: 150,
         CONE_ASPECT_RATIO: 1.5,
         RING_COUNT: 5,
         getStrategies: function() {
             var strategies = [];
             for (var i in this) {
                 if (this[i] == arguments.callee || typeof this[i] != 'function') {
                     continue;
                 }
                 strategies.push(this[i].bind(this));
             }
             return strategies;
         },
         createSphere: function() {
             var cosTheta = Math.random() * 2 - 1,
                 sinTheta = Math.sqrt(1 - cosTheta * cosTheta),
                .........完整代码请登录后点击上方下载按钮下载查看