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();
});
})();
手机阅读请扫描下方二维码：
上一篇：flexbox布局实践1
下一篇：Augmented Reality
12345678
1
555
555
555
1
555
1
1
1
1
1
1
1
1
1
1
12345678
555
12345678
12345678
12345678
12345678
achqlybqeslnhskifwaj
12345678
12345678
1
1
1
1
1
1
555
1
1
555
1
1
1
1
555
1
1
1
1
1
1
555
1
1
1
555
1
555
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1