react+gsap实现小熊气球上升漂浮点击破掉爆炸动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：react+gsap实现小熊气球上升漂浮点击破掉爆炸动画效果代码

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

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

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



  
  
<style>
*,
*:after,
*:before {
	box-sizing: border-box;
}

body {
	background: hsl(210 80% 80%);
	overflow: hidden;
}

#app {
	display: grid;
	place-items: center;
	min-height: 100vh;
	font-family: 'Google Sans', sans-serif, system-ui;
	align-content: center;
}

.cloud {
	position: absolute;
	top: 100%;
	left: calc(var(--x, 0.5) * 100%);
	translate: -50% 0;
	transform: rotateY(calc(var(--flipped, 0) * 180deg));
	width: calc(var(--size) * 1vmin);
	animation: float calc(var(--speed, 0) * 1s) calc(var(--delay, 0) * 1s) linear reverse infinite;
	z-index: var(--z, 1);
}

.balloon {
  cursor: pointer;
}

.balloon-bear {
  overflow: visible !important;
  position: fixed;
  top: 100%;
  left: calc(var(--x, 50) * 100%);
  translate: -50% 0;
  transform: rotateY(calc(var(--flipped, 0) * 180deg));
  width: calc(var(--size) * 1vmin);
/*   animation: float calc(var(--speed, 0) * 1s) linear; */
  z-index: var(--z, 1);
}

@-webkit-keyframes float {
  to {
    translate: -50% calc(-100vh + -100%);
  }
}

@keyframes float {
  to {
    translate: -50% calc(-100vh + -100%);
  }
}

[data-balloon-bear-static] {
	--x: 0.5;
	--size: 50;
	--flipped: 0;
	--hue: 10;
	-webkit-animation: none;
	        animation: none;
	top: 50%;
	translate: -50% -50%;
	z-index: 5;
}

.balloon-bear__arm {
  transform-box: fill-box;
  transform-origin: 40% 20%;
  rotate: 10deg;
  -webkit-animation: swing-arm 0.5s infinite alternate linear;
          animation: swing-arm 0.5s infinite alternate linear;
}

@-webkit-keyframes swing-arm {
  0% {
    rotate: 3deg;
  }
  100% {
    rotate: -3deg;
  }
}

@keyframes swing-arm {
  0% {
    rotate: 3deg;
  }
  100% {
    rotate: -3deg;
  }
}

.balloon-bear__eye {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  rotate: 50deg;
  -webkit-animation: blink 6s -2s infinite;
          animation: blink 6s -2s infinite;
}

.balloon-bear__balloon,
.balloon-bear__strap {
  fill: hsl(var(--hue, 10) 100% 50%);
}


@-webkit-keyframes blink {
  0%, 46%, 48%, 50%, 100% {
    scale: 1 1;
  }
  47%, 49% {
    scale: 1 0.01;
  }
}


@keyframes blink {
  0%, 46%, 48%, 50%, 100% {
    scale: 1 1;
  }
  47%, 49% {
    scale: 1 0.01;
  }
}
</style>

  
  
</head>

<body>
  <div id="app"></div>

  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/babel.7.18.13.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.18.2.0.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.18.2.0.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.11.0.js"></script>
      <script type="text/babel">

const { useEffect, useRef, useState} = window.React;
  const { render } = window.ReactDOM;
const POP = new Audio('//repo.bfw.wiki/bfwrepo/sound/61885dc4e1ba4.mp3')

const Cloud = ({ id, x, size, flipped, speed, delay, z }) => {
	return (
		<svg
		  className="cloud"
		  viewBox="0 0 855 544"
		  fill="none"
		  xmlns="http://www.w3.org/2000/svg"
		  style={{
		  	'--x': x,
		  	'--speed': speed,
		  	'--size': size,
		  	'--delay': delay,
		  	'--flipped': flipped,
		  	'--z': z
		  }}
		>
		  <path
		    d="M458 0C499.817 0 537.472 17.8242 563.779 46.291C567.659 46.0977 571.567 46 575.5 46C692.308 46 787 132.409 787 239C787 248.31 786.277 257.465 784.881 266.422C826.391 284.906 855 323.894 855 369C855 431.961 799.259 483 730.5 483C707.731 483 686.39 477.403 668.027 467.631C629.401 514.036 568.285 544 499.5 544C448.311 544 401.37 527.405 364.783 499.79C348.99 505.743 331.875 509 314 509C256.452 509 206.789 475.243 183.732 426.449C171.112 430.064 157.782 432 144 432C64.4712 432 0 367.529 0 288C0 208.471 64.4712 144 144 144C146.961 144 149.902 144.09 152.819 144.266C173.069 89.2441 225.952 50 288 50C306.708 50 324.583 53.5674 340.982 60.0596C367.119 23.6885 409.793 0 458 0Z"
		    fill="white"
		  />
		</svg>
	)
}

const BalloonBear = ({ id, x, hue, speed, onFinish, size, flipped, main, z }) => {
  const balloonRef = React.useRef(null)
  const bearRef = React.useRef(null)
  React.useEffect(() => {
    if (!main) {
      gsap.to(bearRef.current, {
        y: -window.innerHeight * 1.5,
        duration: speed,
        ease: 'none',
        onComplete: () => {
          if (onFinish) onFinish(id);
        }
      })
      balloonRef.current.addEventListener('click', () => {
        console.info('pop')
        gsap.set(balloonRef.current, { transformOrigin: '50% 50%' })
        POP.pause()
        POP.currentTime = 0
        POP.play()
        gsap.timeline()
          .to(balloonRef.current, {
            scale: 2,
            opacity: 0,
            duration: 0.1,
            transformOrigin: '50% 50%',
          })
          .to(bearRef.current, {
            y: '100vh',
            yPercent: -100,
            duration: 1,
            onComplete: () => {
              if (onFinish) onFinish(id)
            }
          })
      })
    }
  }, [])
	return (
		<svg
      ref={bearRef}
		  className="balloon-bear"
		  data-balloon-bear-static={main}
		  xmlns="http://www.w3.org/2000/svg"
		  fill="none"
		  viewBox="0 0 885 1059"
		  style={{
		  	'--x': x,
		  	'--hue': hue,
		  	'--speed': speed,
		  	'--size': size,
		  	'--flipped': flipped,
		  	'--z': z
		  }}
		>
		  <g className="balloon-bear__arm">
		    <rect
		      width={115}
		      height={52}
		      x="527.5"
		      y="961.5"
		      fill="#AF7128"
		      stroke="#000"
		      strokeWidth={6}
		      rx={26}
		      transform="rotate(-90 527.5 961.5)"
		    />
		    <path
		      fill="#000"
		      d="M551.674 948.205a3 3 0 1 0-6 0h6Zm0 12v-12h-6v12h6ZM564.34 948.205a3 3 0 1 0-6 0h6Zm0 12v-12h-6v12h6Z"
		    />
		  </g>
		  <path
		    fill="#AF7128"
		    d="M505.653 673.433c-8.572-14.183-6.748-32.879 5.47.........完整代码请登录后点击上方下载按钮下载查看