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",
      onPointerEnter: purr,
      onPointerLeave: unpurr },
    props), /*#__PURE__*/
    React.createElement("defs", null, /*#__PURE__*/
    React.createElement("clipPath", { id: "left-eye", className: "aj__eye-clip" }, /*#__PURE__*/
    React.createElement("path", {
      d: "M349.597 372.05c-44.769 0-78.974 65.571-70.423 133.518 6.542 37.25 29.739 56.977 70.423 51.316 72.364-20.635 64.56-184.834 0-184.834Z",
      fill: "#C9F180" })), /*#__PURE__*/


    React.createElement("clipPath", { id: "right-eye", className: "aj__eye-clip" }, /*#__PURE__*/
    React.createElement("path", {
      d: "M768.613 465.655c0-61.294-82.495-124.199-142.355-111.185-63.38 13.779-100.249 100.104-98.591 143.971-.164 49.791 33.199 71.933 98.591 74.124 70.926 2.376 142.355-45.615 142.355-106.91Z",
      fill: "#C9F180" }))), /*#__PURE__*/



    React.createElement("path", {
      d: "M697.831 853.021 594.086 956.336l-7.942-29.14 80.626-80.306 30.052 5.88c.342.063.678.147 1.009.251Z",
      fill: "#00E8FC" }), /*#__PURE__*/

    React.createElement("path", {
      d: "m706.815 864.342.785 16.019-91.044 90.681-14.486-5.299a12.4 12.4 0 0 1-7.703-8.384l-.283-1.024 103.744-103.316c5.076 1.431 8.722 5.967 8.987 11.323Z",
      fill: "#2DD881" }), /*#__PURE__*/

    React.createElement("path", {
      d: "m707.598 880.361 1.742 35.34-65.571 65.297-27.212-9.956 91.041-90.681Z",
      fill: "#C9F180" }), /*#__PURE__*/

    React.createElement("path", {
      d: "m666.769 846.89-80.625 80.307-7.954-29.156 56.725-56.499a12.532 12.532 0 0 1 4.629.026l27.225 5.322Z",
      fill: "#F9C846" }), /*#__PURE__*/

    React.createElement("path", {
      d: "m709.341 915.701 1.162 23.699a12.393 12.393 0 0 1-4.784 10.396l-41.773 32.411a12.354 12.354 0 0 1-11.814 1.847l-8.362-3.057 65.571-65.296Z",
      fill: "#FF595F" }), /*#__PURE__*/

    React.createElement("path", {
      d: "m634.916 841.542-56.726 56.499-3.545-13.011c-1.505-5.518.952-11.34 5.938-14.1l50.607-28.043a12.448 12.448 0 0 1 3.726-1.345Z",
      fill: "#8F41B0" }), /*#__PURE_.........完整代码请登录后点击上方下载按钮下载查看