react+gsap实现可爱黑猫宠物交互眨眼睛打呼效果代码-html代码-BFW代码库

react+gsap实现可爱黑猫宠物交互眨眼睛打呼效果代码

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看