android 实现果冻动画效果,HTML5/Canvas粘滑的果冻动画特效

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;

}