easeljs实现炫酷多彩粒子圈圈构成奥运五环动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：easeljs实现炫酷多彩粒子圈圈构成奥运五环动画效果代码

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

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

<head>

    <meta charset="UTF-8">




    <style>
        * {
          margin: 0;
          padding: 0;
          border: 0;
        }
        
        body {
          background: #efefef;
        }
    </style>



</head>

<body>
    <canvas id="world"></canvas>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/easeljs-0.7.1.js"></script>

    <script>
        /*-----------------------------------
            グローバル変数
        -----------------------------------*/
        var cj = createjs,
            stage,
            particles = [],
            centerX,
            centerY,
            particleNum = window.innerWidth / 6,
            color = ["blue","black","red","yellow","green"];
            speed = Math.PI / 60,
            RADIUS = window.innerWidth / 7,//輪の半径
            margin = RADIUS / 10;
            SPEED_MIN = RADIUS / 2,
            SPEED_MAX = RADIUS;
        
        
        /*-----------------------------------
            メイン
        -----------------------------------*/
        function init(){
            var rotateCenterX,
                rotateCenterY,
                circle,
                radius = RADIUS;
            //ステージ生成
            stage = new cj.Stage("world");
            stage.canvas.width　= window.innerWidth;
            stage.canvas.height　= window.innerHeight;
        
        
            for(var i = 1;i <= 3;i++){
                circle = new Circle(i,1,radius,color[i - 1]);
                circle.create();
                
            }
            
            circle = new Circle(1,2,radius,color[3]);  
            circle.create();
            
            circle = new Circle(2,2,radius,color[4]); 
            circle.create();
          
        
            //ステージ更新
            stage.update();
        }
        cj.Ticker.timingMode = cj.Ticker.RAF;
        cj.Ticker.addEventListener("tick",tick);
        
        
        /*-----------------------------------
            自動更新される関数
        -----------------------------------*/
        function tick(){
            for(var i = 0;i < particles.length;i++){
                var particle = particles[i];
                particle.move();
            }
        
            //ステージ更新
            stage.update();
        }
        
        
        /*-----------------------------------
            パーティクルを定義
        -----------------------------------*/
        function Particle(cx,cy,_angle,_radius,_color){
            this.initialize();
        
            //半径
            this.radius = getRandomNum(10,20);
            
            getColor(this,_color);
                    
            this.graphics.drawCircle(0,0,getRandomNum(1,10))
            .endFill();
            //中心位置
            this.centerX = cx;
            this.centerY = cy;
            //角度
            this.angle = _angle;
            //角速度
            if(getRandomNum(1,10) % 2 == 0){
                this.speed =  Math.PI / (getRandomNum(SPEED_MIN,SPEED_MAX));
            }else{
                //逆回転
                this.speed =  - Math.PI / (getRandomNum(SPEED_MIN,SPEED_MAX));
            }
            
            //回転の中心
            this.rotateCenterX = cx + _radius;
            this.rotateCenterY = cy;
            
            //重なったところの合成方法
            this.compositeOperation = "darker";    
        }
        
        //継承
        Particle.prototype = new cj.Shape();
        
        /*-----------------------------------
            パーティクル移動位置
        -----------------------------------*/
        Particle.prototype.move = function(){
            this.angle += this.speed;
            
            //回転中心位置を回転させる
            this.rotateCenterX = this.centerX + (RADIUS - margin) * Math.cos(this.angle / 5);
            this.rotateCenterY = this.centerY + (RADIUS - margin) * Math.sin(this.angle / 5);
            
            //回転の軌跡上を三角関数の軌跡を描く
            this.x = this.rotateCenterX + this.radius * Math.cos(this.angle / 360) * Math.cos(this.angle);
            this.y = this.rotateCenterY + this.radius * Math.sin(this.angle / 360) * Math.sin(this.angle);
        
        };
        
        /*-----------------------------------
            輪
        -----------------------------------*/
        function Circle(cx,cy,r,_color){
            if(cy == 1){//輪の上段
                this.centerX = r + 2 * r * (cx - 1) + ((window.innerWidth / 2) - 3 * r);
                this.centerY = r * cy + ((window.innerHeight / 2) - 1.5 * r);
            }else{//輪の下段
                this.centerX = r + 2 * r * (cx - 1) + r + ((window.innerWidth / 2) - 3 * r);
                this.centerY = r * cy + ((window.innerHeight / 2) - 1.5 * r);
            }
            
            this.radius = r;
            this.color = _color;
        }
        
        /*-----------------------------------
            輪の軌道上にパーティクルを生成
        -----------------------------------*/
        Circle.prototype.create = function(){
            var rotateCenterX = this.centerX + this.radius,
                rotateCenterY = this.centerY;
            
            for(var j = 1;j < particleNum;j++){
                var angle = j * 15 * 10;
                
                //パーティクル生成
                var particle = new Particle(this.centerX,this.centerY,angle,this.radius,this.color);
                particles.push(particle);
                //ステージに追加
                stage.addChild(particle);
            }
        
        };
        
        /*-----------------------------------
            範囲を決めて乱数生成
        .........完整代码请登录后点击上方下载按钮下载查看