JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var cw = canvas.width = window.innerWidth,
cx = cw / 2;
var ch = canvas.height = window.innerHeight,
cy = ch / 2;
var requestId = null;
//var rad = Math.PI / 180;
var balls = [];
var numBalls = 100;
var spring = .01;
var friction = .98;
var easing = 1 / 10;
var offset = 200;
var m = {
x: -offset,
y: -offset
}
function Ball() {
this.r = 150; //randomIntFromInterval(90, 200);
this.Pos = {
// the initial position
x: Math.random() * cw,
y: Math.random() * ch
}
this.pos = {
// active position
x: this.Pos.x,
y: this.Pos.y
}
this.color = Grd(this.pos.x, this.pos.y, this.r)
this.vel = {
x: 0,
y: 0
}
// flag used to swap between ease & spring
this.flag = true;
this.draw = function() {
ctx.fillStyle = Grd(this.pos.x, this.pos.y, this.r);
ctx.beginPath();
ctx.arc(this.pos.x, this.pos.y, this.r, 0, 2 * Math.PI);
ctx.fill();
}
this.ease = function(m) {
var dx = m.x - this.pos.x;
var dy = m.y - this.pos.y;
this.angle = Math.atan2(dy, dx);
this.vel.x = (m.x - this.pos.x) * easing;
this.vel.y = (m.y - this.pos.y) * easing;
if (Math.abs(m.x - this.pos.x) < 1) {
this.pos.x = m.x;
this.flag = false;
}
this.pos.x += this.vel.x;
this.pos.y += this.vel.y;
}
this.spring = function() {
var distX = this.Pos.x - this.pos.x;
var distY = this.Pos.y - this.pos.y;
var accX = distX * spring;
var accY = distY * spring;
this.vel.x += accX;
this.vel.y += accY;
this.vel.x *= friction;
this.vel.y *= friction;
this.pos.x += this.vel.x;
this.pos.y += this.vel.y;
if (dist(this.Pos, this.pos) < 1) {
this.flag = true;
}
}
this.update = function(m) {
if (dist(this.Pos, m) < offset && this.flag) {
this.ease(m);
} else {
this.spring();
}
}
}
// create the balls
for (var i = 0; i < numBalls; i++) {
balls.push(new Ball());
}
function Draw() {
requestId = window.requestAnimationFrame(Draw);
ctx.clearRect(0, 0, cw, ch);
for (var i = 0; i < balls.length; i++) {
balls[i].update(m);
balls[i].draw();
}
ctx.globalCompositeOperation = "difference";
}
//Draw();
var Init = function() {
if (requestId) {
window.cancelAnimationFrame(requestId);
requestId = null;
}
cw = canvas.width = window.innerWidth,
cx = cw / 2;
ch = canvas.height = window.innerHeight,
cy = ch / 2;
balls.length = 0;
for (var i = 0; i < numBalls; i++) {
balls.push(new Ball());
}
Draw();
}
window.setTimeout(function() {
Init();
window.addEventListener('resize', Init, false);
}, 15);
var timeout;
canvas.addEventListener("mousemove", function(evt) {
// ignore mouse if not moving
clearTimeout(timeout);
timeout = setTimeout(function() {
m = {
x: -offset,
y: -offset
}
}, 600);
// but if it moves:
m = oMousePos(canvas, evt);
}, false);
// useful fynctions
function dist(p1, p2) {
var dx = p2.x - p1.x;
var dy = p2.y - p1.y;
return Math.sqrt(dx * dx + dy * dy);
}
function oMousePos(canvas, evt) {
var ClientRect = canvas.getBoundingClientRect();
return { //objeto
x: Math.round(evt.clientX - ClientRect.left),
y: Math.round(evt.clientY - ClientRect.top)
}
}
function randomIntFromInterval(mn, mx) {
return ~~(Math.random() * (mx - mn + 1) + mn);
}
function Grd(x, y, r) {
grd = ctx.createRadialGradient(x, y, 0, x, y, r);
grd.addColorStop(0, 'white');
grd.addColorStop(0.5, 'hsl(50,50%, 50%)');
grd.addColorStop(1, 'black');
return grd;
}
如果觉得《android 实现果冻动画效果 HTML5/Canvas粘滑的果冻动画特效》对你有帮助,请点赞、收藏,并留下你的观点哦!