html5 js字母索引,HTML5/SVG tweenjs+easeljs 文本/字母本粒子化动效

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

(function() {

var Circle, canvas, chars, circle, ctx, stage,

bind = function(fn, me) {

return function() {

return fn.apply(me, arguments);

};

};

canvas = document.getElementById("canvas");

ctx = canvas.getContext("2d");

stage = new createjs.Stage(canvas);

stage.autoClear = false;

createjs.Ticker.setFPS(20);

chars = ["A", "B", "C"];

Circle = (function() {

function Circle() {

this.moveCircle = bind(this.moveCircle, this);

this.circleContainer = new createjs.Container();

this.setPath();

this.setCircle();

}

Circle.prototype.setPath = function(id) {

if (id == null) {

id = "A";

}

this.path = document.getElementById(id);

this.pathLength = this.path.getTotalLength() >> 0;

};

Circle.prototype.drawCircle = function() {

var circle, colorDig;

circle = new createjs.Shape();

colorDig = Math.random() * 360 >> 0;

circle.compositeOperation = "lighter";

circle.graphics.beginFill("hsl(" + colorDig + ", 95%, 56%)").drawCircle(50, 50, 1);

return circle;

};

Circle.prototype.setMotion = function(circle) {

createjs.Tween.get(circle).to({

x: circle.goalX + Math.random() * 10,

y: circle.goalY + Math.random() * 10

}, 1000, createjs.Ease.cubicInOut);

};

Circle.prototype.setCircle = function() {

var circle, i, index, j;

for (i = j = 0; j < 2000; i = ++j) {

index = Math.random() * this.pathLength;

circle = this.drawCircle();

circle.set({

x: Math.random() * canvas.width,

y: Math.random() * canvas.height,

goalX: this.path.getPointAtLength(index).x,

goalY: this.path.getPointAtLength(index).y

});

this.setMotion(circle);

this.circleContainer.addChild(circle);

stage.addChild(this.circleContainer);

}

};

Circle.prototype.moveCircle = function(id) {

var circle, index, j, pathIndex, ref;

this.setPath(id);

for (index = j = 0, ref = this.circleContainer.numChildren; 0 <= ref ? j < ref : j > ref; index = 0 <= ref ? ++j : --j) {

pathIndex = Math.random() * this.pathLength;

circle = this.circleContainer.getChildAt(index);

circle.set({

goalX: this.path.getPointAtLength(pathIndex).x,

goalY: this.path.getPointAtLength(pathIndex).y

});

this.setMotion(circle);

}

};

return Circle;

})();

circle = new Circle();

setInterval(function() {

return circle.moveCircle(chars[Math.random() * 3 >> 0]);

}, 1500);

createjs.Ticker.addEventListener("tick", function() {

stage.update();

ctx.fillStyle = "rgba(0, 0, 0, 0.1)";

ctx.fillRect(0, 0, canvas.width, canvas.height);

});

}).call(this);