做有态度的前端团队

网易FEG前端团队

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

最近有项目需要用到粒子浮动效果,套用组内已有的粒子浮动组件,效果明显达不到预期。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();
    });


})();

手机阅读请扫描下方二维码:

none
上一篇:flexbox布局实践1   下一篇:Augmented Reality

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif