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}:root{--bg:#a219e6}body{background:var(--bg);min-height:100vh;display:grid;place-items:center}.aj{height:35vmin;cursor:-webkit-grab;cursor:grab}
    </style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div id="app"></div>
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.17.1.js"></script>
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.17.1.js"></script>
 
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.9.1.js"></script>
 <script>

</script>
    <script type="module" >
     function _extends() {_extends = Object.assign || function (target) {for (var i = 1; i < arguments.length; i++) {var source = arguments[i];for (var key in source) {if (Object.prototype.hasOwnProperty.call(source, key)) {target[key] = source[key];}}}return target;};return _extends.apply(this, arguments);}

  const { render } = window.ReactDOM;


const ROOT_NODE = document.querySelector('#app');

const AJ = props => {
  const ajRef = React.useRef(null);
  const eyesRef = React.useRef(null);
  const pupilsRef = React.useRef(null);
  const blinkTween = React.useRef(null);
  const purrRef = React.useRef(
  new Audio('//repo.bfw.wiki/bfwrepo/sound/62cd11703217b.mp3'));


  const purr = () => {
    if (blinkTween.current) blinkTween.current.kill();
    gsap.
    timeline().
    to([eyesRef.current, pupilsRef.current], {
      scaleY: 1,
      duration: 0.05 }).

    set(eyesRef.current, { transformOrigin: '50% 65%' }).
    set(pupilsRef.current, { transformOrigin: '50% 74%' }).
    to([eyesRef.current, pupilsRef.current], {
      scaleY: 0.025,
      duration: 0.14 }).

    to(
    purrRef.current,
    {
      onStart: () => {
        purrRef.current.play();
      },
      volume: 1 },

    '>');

  };

  const unpurr = () => {
    gsap.
    timeline().
    to([eyesRef.current, pupilsRef.current], {
      scaleY: 1,
      duration: 0.05 }).

    to(
    purrRef.current,
    {
      volume: 0,
      onComplete: () => {
        gsap.set(eyesRef.current, { transformOrigin: '50% 50%' });
        gsap.set(pupilsRef.current, { transformOrigin: '50% 65%' });
        purrRef.current.pause();
        purrRef.current.currentTime = 0;
        BLINK();
      } },

    '>');

  };

  // const blink = () => {
  //   const delay = random(2, 5)
  //   to(EYES, {
  //     delay,
  //     duration: 0.1,
  //     repeat: 1,
  //     yoyo: true,
  //     scaleY: 0,
  //     onComplete: () => blink(),
  //   })
  // }
  // blink()

  // let blinkTween
  // const BLINK = () => {
  //   const delay = gsap.utils.random(1, 5)
  //   blinkTween = gsap.to(SELECTORS.EYES, {
  //     delay,
  //     scaleY: 0.1,
  //     repeat: 3,
  //     yoyo: true,
  //     duration: 0.05,
  //     onComplete: () => {
  //       BLINK()
  //     },
  //   })
  // }
  // BLINK()

  React.useEffect(() => {
    // Set up transform origins etc.
    const EYES = ajRef.current.querySelectorAll('.aj__eye-clip');
    const PUPILS = ajRef.current.querySelectorAll('.aj__eye-pupil');
    eyesRef.current = EYES;
    pupilsRef.current = PUPILS;
    gsap.set(eyesRef.current, { transformOrigin: '50% 50%' });
    gsap.set(pupilsRef.current, { transformOrigin: '50% 65%' });
    // Set up audio
    purrRef.current.volume = 0;
    purrRef.current.loop = true;
  }, []);

  // Set up a recursive blink with random delays
  const BLINK = () => {
    if (!eyesRef.current || !pupilsRef.current) return;
    const delay = gsap.utils.random(1, 5);
    blinkTween.current = gsap.to([eyesRef.current, pupilsRef.current], {
      delay,
      scaleY: (index, element) =>
      element.classList.contains('aj__eye-clip') ? 0.05 : 0.4,
      duration: 0.05,
      repeat: 3,
      yoyo: true,
      onComplete: () => {
        BLINK();
      } });

  };

  React.useEffect(() => {
    if (BLINK) BLINK();
  }, []);

  return /*#__PURE__*/(
    React.createElement("svg", _extends({
      className: "aj",
      ref: ajRef,
      fill: "none",
      xmlns: "http://www.w3.org/2000/svg",
      viewBox: "0 0 1000 1000",
      onPo.........完整代码请登录后点击上方下载按钮下载查看