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

不念不忘少年蓝@ 2022-10-16 01:57 202阅读 0赞

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粘滑的果冻动画特效

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

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

相关 html画布动画,HTML5画布CANVAS动画。

相关基于 HTML5 Canvas 实现的文字动画特效

相关 HTML5 Canvas动画效果实现原理

相关 HTML5 Canvas动画效果实现原理

相关 html5的canvas旋转动画

相关 7款超华丽的HTML5 Canvas文字动画特效

相关 html5之canvas动画

相关 HTML5特效动画

相关 html5 canvas实现雷达扫描动画特效