createjs库easeljs模块，实现粒子浮动效果（有大小、旋转、透明度变化）

作者: 凤玲日期: 2017-02-27

246531

最近有项目需要用到粒子浮动效果，套用组内已有的粒子浮动组件，效果明显达不到预期。so爬了下国外一页面，该页面的粒子浮动效果，使用了createjs库easeljs模块实现。以下（下文）整理了下来。

页面效果：http://f7.163.com/ （参考国外页面：http://asterisk-war.com/）

html代码：

<canvas id="hexaGround"  height="907"></canvas>
<script  charset="utf-8" src="js/lib/easeljs-0.8.1.min.js"></script>
<script  charset="utf-8" src="js/lib/ground.js"></script>

js代码：

(function () {
    var canvas;
    var stage;
    var hexs = [];
 
    var rand_limit = function (min, max) {
        return Math.floor(Math.random() * ((max + 1) - min) + min);
    };
 
    function resizer() {
        canvas.width = $(window).width();
        // canvas.height = $(window).height();
        var count = hexs.length;
        for (i = 0; i < count; i++) {
            var hexagon = hexs[i];
            hexagon.reposition();//重置x轴位置
        }
    }
 
    //ready后执行
    function init() {
        canvas = document.getElementById('hexaGround');
        stage = new createjs.Stage(canvas);
        stage.enableMouseOver(10);//每秒10更新
        canvas.width = $(window).width();
        // canvas.height = $(window).height();
 
        createjs.Ticker.setFPS(35);//设置帧频
        createjs.Ticker.addEventListener('tick', tick);//侦听tick时间后在设定的时间间隔会再调用侦听函数
 
        //画布宽度与创建对象个数的幅度比率。
        var optNumber =  Math.floor(canvas.width / 48);
        //创建各实例对象
        GenerateHexagon(optNumber);
 
        //浏览器窗口变化处理
        var timer = false;
        $(window).on('resize', function () {
            if (timer !== false) {
                clearTimeout(timer);
            }
            timer = setTimeout(function () {
                resizer();
            }, 200);
        });
    }
 
    function tick() {
        updateHexpos();
        stage.update();
    }
     
    //构造函数
    function Hexagon(xpos, ypos, size) {
         
        this.Shape_constructor();
        this.x = xpos;
        this.y = ypos;
        this.vy = 0.2;
        this.alpha = Math.random();
        this.mtx_a = Math.random();
        this.mtx_b = 0;
        this.mtx_c = Math.random();
        this.mtx_d = -1;
        this.vo = 0.008;
        this.va = 0.01;
         
        this.graphics.beginFill('#fff').drawRect(0,0,size,size);//正方形
        // this.graphics.beginFill('#fff').drawPolyStar(0, 0, size, 4, 0, 60);
        this.shadow = new createjs.Shadow("#fff", 0, 0, 14);//阴影(外发光)
 
    }
 
    //类的继承
    createjs.extend(Hexagon, createjs.Shape);
    createjs.promote(Hexagon, "Shape");
 
    //各对象移动设置
    Hexagon.prototype.move = function () {
 
        if (this.alpha < 0.2) {
            this.y -= this.vy;
        } else if (this.alpha > 0.2 && this.alpha < 0.4) {
                this.y -= this.vy * 1.5;
        } else {
                this.y -= this.vy * 2;
        }
        //对象外去时的处理
        if (this.y < -70) {
            this.y = canvas.height + 70;
            this.vy = 0.2;
            this.x = canvas.width * Math.random();
        }
    };
 
    //各对象旋转设置
    Hexagon.prototype.revolve = function () {
 
        this.mtx_a += this.vo;
        var matrix = new createjs.Matrix2D(this.mtx_a, this.mtx_b, this.mtx_c, this.mtx_d, this.x, this.y);
        matrix.decompose(this);
 
        //对象外去时的处理
        if (this.mtx_a < -1 || this.mtx_a > 1) {
            this.vo *= -1;
        }
 
    };
 
    //各对象透明度设置
    Hexagon.prototype.opacity = function () {
        this.alpha += this.va;
 
        // var alphaLimit = (mode == 'top') ? 1 : 0.5;
        var alphaLimit = 1;
 
        if (this.alpha > alphaLimit || this.alpha < 0) {
            this.va *= -1;
        }
    };
 
    //window resize时重置对象x位置
    Hexagon.prototype.reposition = function () {
        this.x = canvas.width * Math.random();
    };
 
    //创建各对象
    function GenerateHexagon(amount) {
 
        for (i = 0; i < amount; i++) {
            var _x = canvas.width * Math.random();
            var _y = canvas.height * Math.random();
            // var _size = rand_limit(10, 50);
            var _size = rand_limit(6, 18);
 
            var hexagon = new Hexagon(_x, _y, _size);
            hexs[i] = hexagon;
            stage.addChild(hexagon);
        }
 
    }
 
    //各对象的场所的更新
    function updateHexpos() {
        var count = hexs.length;
        for (i = 0; i < count; i++) {
            var hexagon = hexs[i];
            hexagon.move();
            hexagon.revolve();
            hexagon.opacity();
        }
    }
 
    $(function () {
        init();
    });
 
 
})();