gsap+MotionPathPlugin实现鼠标拖动生成泡泡气泡水泡漂浮破碎交互动画代码-html代码-BFW代码库

gsap+MotionPathPlugin实现鼠标拖动生成泡泡气泡水泡漂浮破碎交互动画代码

代码语言：html

所属分类：动画

代码描述：gsap+MotionPathPlugin实现鼠标拖动生成泡泡气泡水泡漂浮破碎交互动画代码

代码标签： gsap MotionPathPlugin 鼠标拖动生成泡泡气泡水泡漂浮破碎交互

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
html, body {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

body {
  background:hsl(200,99%,6%);
}
</style>


  
  
</head>

<body translate="no">
  <canvas></canvas>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MotionPathPlugin.min.js"></script>
      <script  >
console.clear()

const c = document.querySelector('canvas')
const ctx = c.getContext('2d')
let cw = c.width = innerWidth
let ch = c.height = innerHeight
const bubbles = []
const debounce = gsap.to(window, {duration:0.07}) //control the rate at which new bubbles can be made
const img = new Image()
const m = {x:0, y:0}

img.src = '//repo.bfw.wiki/bfwrepo/images/bubbles.webp'
img.onload = ()=>{
  for (i=0; i<20; i++) { //make a few bubbles to start
    m.x = gsap.utils.random(150, cw-150, 1)
    m.y = gsap.utils.random(150, ch-150, 1)
    makeBubble(true)
  }
}

window.onpointerdown = window.onpointermove = (e)=>{ //the rest are made on pointer move/tap
  m.x = e.x
  m.y = e.y
  makeBubble()
} 
  
function makeBubble(auto){
  if (debounce.progress()==1 || auto) {
    debounce.play(0)
    
    const dist = gsap.utils.random(100, 200)
    const scale = gsap.utils.random(0.6, 0.8)
    const b = {
      dur:gsap.utils.random(3, 7),
      spriteDur:gsap.utils.random(0.12, 0.5),
     .........完整代码请登录后点击上方下载按钮下载查看