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

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

代码语言：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..........完整代码请登录后点击上方下载按钮下载查看