JavaScript
语言：
JaveScriptBabelCoffeeScript
确定
(function() {
this.Easing = (function() {
function Easing() {}
Easing.easeOutCubic = function(t) {
return 4 * t * t * t;
};
Easing.easeInOutCubic = function(t) {
if (t < .5) {
return 4 * t * t * t;
} else {
return (t - 1) * (2 * t - 2) * (2 * t - 2) + 1;
}
};
return Easing;
})();
this.Point = (function() {
function Point(x1, y1) {
this.x = x1;
this.y = y1;
}
return Point;
})();
this.Circle = (function() {
function Circle(c1, r, color1, duration) {
this.c = c1;
this.r = r;
this.color = color1;
this.duration = duration;
this.offset = new Point(3, 3);
}
Circle.prototype.updateShadowOffset = function(lightPoint, maxD) {
return this.offset = new Point((this.c.x - lightPoint.x) / maxD * 200 + 3, (this.c.y - lightPoint.y) / maxD * 200 + 3);
};
Circle.prototype.movecenter = function(p1, p2, startTime, maxD) {
var t;
t = new Date().getTime() - startTime;
if (t >= this.duration) {
return;
}
t /= this.duration;
t = Easing.easeInOutCubic(t);
this.c.x = p1.x + t * (p2.x - p1.x);
this.c.y = p1.y + t * (p2.y - p1.y);
this.updateShadowOffset(p2, maxD);
return requestAnimationFrame((function(_this) {
return function() {
return _this.movecenter(p1, p2, startTime, maxD);
};
})(this));
};
return Circle;
})();
this.Hypnotic = (function() {
function Hypnotic(id, numCircles) {
var color, diagonal, i, j, ref, self, step, timeStep;
this.numCircles = numCircles;
this.canvas = document.getElementById(id);
this.canvas.width = this.canvas.clientWidth;
this.canvas.height = this.canvas.clientHeight;
this.ctx = this.canvas.getContext('2d');
diagonal = Math.sqrt(this.canvas.width * this.canvas.width + this.canvas.height * this.canvas.height);
step = diagonal / this.numCircles;
timeStep = 5000 / this.numCircles;
this.circles = [];
for (i = j = 1, ref = this.numCircles; 1 <= ref ? j <= ref : j >= ref; i = 1 <= ref ? ++j : --j) {
color = i % 2 === 0 ? '#FFFFFF' : '#4BB5C1';
this.circles.push(new Circle(new Point(0, this.canvas.height / 2), step * i, color, timeStep * i));
}
this.circles.reverse();
self = this;
$('#' + id).mousemove(function(e) {
var c, k, len, now, offset, ref1, results, x, y;
offset = $(this).offset();
x = e.pageX - offset.left;
y = e.pageY - offset.top;
now = new Date().getTime();
ref1 = self.circles;
results = [];
for (k = 0, len = ref1.length; k < len; k++) {
c = ref1[k];
results.push(c.movecenter(c.c, new Point(x, y), new Date().getTime(), Math.max(self.canvas.width, self.canvas.height)));
}
return results;
});
$('#' + id).on('touchmove', function(e) {
var c, k, len, ref1, results, touch;
touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
ref1 = self.circles;
results = [];
for (k = 0, len = ref1.length; k < len; k++) {
c = ref1[k];
results.push(c.movecenter(c.c, new Point(touch.pageX, touch.pageY), new Date().getTime(), Math.max(self.canvas.width, self.canvas.height)));
}
return results;
});
$('#' + id).mouseleave(function(e) {
return self.recenter();
});
}
Hypnotic.prototype.recenter = function() {
var c, j, len, ref, results;
ref = this.circles;
results = [];
for (j = 0, len = ref.length; j < len; j++) {
c = ref[j];
results.push(c.movecenter(c.c, new Point(this.canvas.width / 2, this.canvas.height / 2), new Date().getTime(), Math.max(this.canvas.width, this.canvas.height)));
}
return results;
};
Hypnotic.prototype.run = function() {
this.draw();
return this.recenter();
};
Hypnotic.prototype.draw = function() {
var c, j, len, ref;
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
ref = this.circles;
for (j = 0, len = ref.length; j < len; j++) {
c = ref[j];
this.ctx.moveTo(c.c.x, c.c.y);
this.ctx.fillStyle = c.color;
this.ctx.shadowColor = 'rgba(0,0,0,0.2)';
this.ctx.shadowOffsetX = c.offset.x;
this.ctx.shadowOffsetY = c.offset.y;
this.ctx.beginPath();
this.ctx.arc(c.c.x, c.c.y, c.r, 0, Math.PI * 2);
this.ctx.fill();
}
return requestAnimationFrame(((function(_this) {
return function() {
return _this.draw();
};
})(this)));
};
return Hypnotic;
})();
$(function() {
var anim;
anim = new Hypnotic('fg', 20);
return anim.run();
});
}).call(this);
