我想在我的网站头部做一部分，其中有一个用SVG制作的盒子，并且有一个JavaScript框架会旋转并对这个盒子进行动画。可是，我想让这个被动画化的盒子成为我实际标志的遮罩，当盒子降到0 时，我可以更换标志。

import { spring, animate } from 'https://esm.sh/animejs';

animate('.head-logo-mask', {
  onBegin: self => console.log('started'),
  rotate: 1440, // Rotates the box 4 times
  scale: [0, 1, 1, 1, 1, 1, 1, 1, 0], // Sets initial scale, moves it up, keeps it, then resets to 0
  duration: 20000, //Duration of the animation in milliseconds (20 seconds)
  loop: true, //Keeps the animation looping
  ease: 'inOutSine', //Uses the inOutSine for a smooth easing. Looks the most like the original lottie file animation.
});

/* Import fonts */
@font-face {
  font-family: MaxwellBold;
  src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/03db4b61551a2936a785500ad4eb7c7f7d39d86d/MAXWELL%20BOLD.ttf")
  format("truetype");
}
@font-face {
  font-family: MaxwellRegular;
  src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/03db4b61551a2936a785500ad4eb7c7f7d39d86d/MAXWELL%20REGULAR.ttf")
  format("truetype");
}
@font-face {
  font-family: MaxwellLight;
  src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/03db4b61551a2936a785500ad4eb7c7f7d39d86d/MAXWELL%20LIGHT.ttf")
  format("truetype");
}
@font-face {
  font-family: Minecraft;
  src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/07345fe43bd27eeec13f46f411d02efb2a5dd2db/assets/MinecraftRegular-Bmg3.otf")
    format("opentype");
}

header {
  display: flex;
  width: 100%;
  background: black;
  padding: 1.1%;
}

/* An adaptive and animated logo that randomly shuffles through a list of logos */
/* Has a spinning box that is a mask for an area where a logo can be. The logo will be of different poses and emotions. */
/* The logo shuffles after 20 seconds of spinning */

.head-logo-wrap{
  position: relative;
  display: flex;
  flex-direction: row;
  text-decoration: none;
}

.head-logo-mask{
  position: absolute;
}

.logo-image{
  width: 3.5vw;
  mask-image: (#logo-box);
  mask-position: bottom;
  mask-size: cover;
}

  /* Sets text styles for the "MindaMan" in the header. */
.head-name{
  font-family: MaxwellBold;
  font-size: 3.5vw;
  color: transparent;
  background: #682a9b;
  /* The extra backgrounds / filters add IE6+ compatability. */
  background: -webkit-linear-gradient(90deg, rgba(104, 42, 155, 1) 0%, rgba(22, 22, 217, 1) 51%, rgba(83, 165, 237, 1) 100%);
  background: -moz-linear-gradient(90deg, rgba(104, 42, 155, 1) 0%, rgba(22, 22, 217, 1) 51%, rgba(83, 165, 237, 1) 100%);
  background: linear-gradient(90deg, rgba(104, 42, 155, 1) 0%, rgba(22, 22, 217, 1) 51%, rgba(83, 165, 237, 1) 100%);
  /* Allows the font to have the gradient rather than just giving a background. */
  background-position: bottom;
  background-size: cover;
  background-clip: text;
}

body{
  margin: 0; /* Fixes the header */
  background: white; /* Resets the background for the body */
  overflow-x: hidden; /* Prevents scrolling on the x-axis */
  flex-wrap: nowrap; /* Prevents wrapping of the elements on the screen */
}



/*footer*/

<script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>

    <title>MindaMan</title>

    <!-- The website stylesheet -->
    <link rel="stylesheet" href="/style.css" />


    <!-- JAVASCRIPT FILES -->
    <!-- The website JavaScript file -->
    <script src="/main.js" type="module"></script>
  </head>

  <header>
    <!-- A wrapper for the whole MindaMan Logo-->
    <a class="head-logo-wrap" href="/">

      <!-- Just the image part of the logo -->
      <div class="head-logo">
        <div class="head-logo-mask"><img src="https://dev.mindaman.com/temporary/logo-box.svg" id="logo-box" style="width: 3.5vw;"></div>
        <img src="https://dev.mindaman.com/temporary/little-critter.png" alt="little-critter" class="logo-image">
      </div>

      <!-- Just the name (text) part of the logo -->
      <div class="head-name">
        MindaMan
      </div> 

    </a>

    <!-- Header Directory (Contains multiple dropnavs for "About", "Directory", and "Shop") -->
    <div class="head-dir">

    </div>

    <!-- 
    Header Social 
    (Dropdown from one icon, contains a link at the bottom for more social links. When each icon is hovered, it extends out to the left with the social media name, and handle. when clicked it redirects)
     -->
    <div class="head-social">

    </div>
  </header>


  <body>
</div>


    <div class="news">
    <div class="welcome"></div>
    <!-- Shows the Twitch Live Stream Embed when Live! otherwise, it shows the most recent VOD. -->
    <div class="twitch"></div>
    <!-- Shows the most recent YouTube Video -->
    <div class="youtube"></div>
    <!-- Has a banner of funnies. -->
    <div class="funnies"></div>
    <!-- Shows the current followings of MindaMan on multiple platforms -->
    <div class="following"></div>
    <!-- Basically an embed or small recreation of social.mindaman.com -->
    <div class="socials"></div>
    <!-- Shows a featured fanart carousel -->
    <div class="fanart"></div>
    <!-- Shows a featured project wheel -->
    <div class="featured-project"></div>
    <!-- Promo to join the critter cave -->
    <div class="discord"></div>


  </body>

（代码需要animejs，可能在这里不起作用。我已经通过npm安装到Visual Studio Code，在那里这段代码运行得很好。）

提供的代码（在正确的扩展下运行时）应该把 head-logo-mask 作为 logo-image 的遮罩，但我不知道该怎么实现。我所达到的最接近的情况是它把SVG作为遮罩使用，但它实际上并不会随着JS旋转或动画。我想让 head-logo-mask 旋转，并由JS控制，同时也作为 logo-image 的遮罩。

有什么想法吗？

解决方案

添加用于旋转的SVG、更新样式并更改JS脚本：

animate('#mask-box', {
  rotate: 1440,
  transformOrigin: '50% 50%', 
  scale: [0, 1, 1, 1, 1, 1, 1, 1, 0],
  duration: 20000,
  loop: true,
  easing: 'easeInOutSine',
});

/* Import fonts */
@font-face {
  font-family: MaxwellBold;
  src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/03db4b61551a2936a785500ad4eb7c7f7d39d86d/MAXWELL%20BOLD.ttf")
  format("truetype");
}
@font-face {
  font-family: MaxwellRegular;
  src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/03db4b61551a2936a785500ad4eb7c7f7d39d86d/MAXWELL%20REGULAR.ttf")
  format("truetype");
}
@font-face {
  font-family: MaxwellLight;
  src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/03db4b61551a2936a785500ad4eb7c7f7d39d86d/MAXWELL%20LIGHT.ttf")
  format("truetype");
}
@font-face {
  font-family: Minecraft;
  src: url("https://rawcdn.githack.com/MindaManOfficial/mindamanofficial.github.io/07345fe43bd27eeec13f46f411d02efb2a5dd2db/assets/MinecraftRegular-Bmg3.otf")
    format("opentype");
}

header {
  display: flex;
  width: 100%;
  background: black;
  padding: 1.1%;
}

/* An adaptive and animated logo that randomly shuffles through a list of logos */
/* Has a spinning box that is a mask for an area where a logo can be. The logo will be of different poses and emotions. */
/* The logo shuffles after 20 seconds of spinning */

.head-logo-wrap{
  position: relative;
  display: flex;
  flex-direction: row;
  text-decoration: none;
}

.head-logo-mask{
  position: absolute;
}

/* .logo-image{
  width: 3.5vw;
  mask-image: (#logo-box);
  mask-position: bottom;
  mask-size: cover;
} */

  /* Sets text styles for the "MindaMan" in the header. */
.head-name{
  font-family: MaxwellBold;
  font-size: 3.5vw;
  color: transparent;
  background: #682a9b;
  /* The extra backgrounds / filters add IE6+ compatability. */
  background: -webkit-linear-gradient(90deg, rgba(104, 42, 155, 1) 0%, rgba(22, 22, 217, 1) 51%, rgba(83, 165, 237, 1) 100%);
  background: -moz-linear-gradient(90deg, rgba(104, 42, 155, 1) 0%, rgba(22, 22, 217, 1) 51%, rgba(83, 165, 237, 1) 100%);
  background: linear-gradient(90deg, rgba(104, 42, 155, 1) 0%, rgba(22, 22, 217, 1) 51%, rgba(83, 165, 237, 1) 100%);
  /* Allows the font to have the gradient rather than just giving a background. */
  background-position: bottom;
  background-size: cover;
  background-clip: text;
}

body{
  margin: 0; /* Fixes the header */
  background: white; /* Resets the background for the body */
  overflow-x: hidden; /* Prevents scrolling on the x-axis */
  flex-wrap: nowrap; /* Prevents wrapping of the elements on the screen */
}

.head-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure the character stays centered within the SVG coordinate system */
.logo-image {
  object-fit: cover;
}

/* important for mask rotation */
#mask-box {
  transform-origin: center;
  transform-box: fill-box;
}
.logo-container {
  overflow: visible !important;
}

<head>
  <script src="https://cdn.jsdelivr.net/npm/animejs/dist/bundles/anime.umd.min.js"></script>
  <script>
    const { animate } = anime;
  </script>

  <title>MindaMan</title>
</head>

<header>
  <a class="head-logo-wrap" href="/">
    <div class="head-logo">
      <svg viewBox="0 0 100 100" class="logo-container" style="width: 3.5vw; height: 3.5vw; overflow: visible;">
        <defs>
          <mask id="logoMask">
            <!-- ID for animation -->
            <image 
              id="mask-box" 
              href="https://dev.mindaman.com/temporary/logo-box.svg" 
              width="100" 
              height="100" 
              x="0" 
              y="0"
            />
          </mask>
        </defs>

        <image 
          class="logo-image" 
          href="https://dev.mindaman.com/temporary/little-critter.png" 
          width="100" 
          height="100" 
          mask="url(#logoMask)" 
        />
      </svg>
    </div>
    <div class="head-name">MindaMan</div>
  </a>
</header>