gsap实现canvas随机圈圈排列出现动画效果代码
代码语言:html
所属分类:动画
代码描述:gsap实现canvas随机圈圈排列出现动画效果代码
代码标签: gsap canvas 随机 圈圈 排列 出现 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> canvas { display: block; cursor: pointer; } </style> </head> <body > <canvas></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script> <script > const MAX_CIRCLE_COUNT = 200 const MAX_ATTEMPT_COUNT = 10 const SF_MAX_RADIUS = 0.2 // // main // let ctx let ref let tween const canvas = document.querySelector('canvas') const circles = [] // [x,y,r,rx,ry][] function init() { canvas.width = innerWidth canvas.height = innerHeight ref = Math.min(canvas.width, canvas.height) / 2.5 ctx = canvas.getContext('2d') ctx.translate(canvas.width / 2, canvas.height / 2) set_circles() tween?.kill() tween = gsap.from(circles, { 0: 0, 1: 0, 2: 0, stagger: { amount: 2.5 }, ease: 'bounce', onUpdate: () => { ctx.clearRect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height) circles.forEach(draw_circle) } }) } function set_circles() { circles.length = 0 for (let i = 0; i < MAX_CIRCLE_COUNT; ++i) { const circle = spawn() circle && circles.push(circle) } } const dist = (c0, c1) => .........完整代码请登录后点击上方下载按钮下载查看
网友评论0