如何实现可动画HTML元素作为图片遮罩并同步动画效果？

核心问题原因 #

你之前用mask-image关联SVG元素时，浏览器会把SVG当作静态图像资源处理，只会渲染初始状态，不会执行SVG内部的动画（包括animejs操控的DOM动画），所以遮罩无法跟随动画变化。

解决方案步骤 #

1. 改用内联SVG <mask> 实现动态遮罩

把动画的SVG盒子放到内联SVG的<mask>定义中，让遮罩成为DOM的一部分，这样animejs可以直接操控mask内的元素，遮罩会同步响应动画。

示例HTML结构：

<!-- 隐藏的SVG定义，存放遮罩 -->
<svg style="position: absolute; width: 0; height: 0;">
  <defs>
    <mask id="logo-mask">
      <!-- 要做动画的SVG盒子，填充必须为白色（mask中白色区域可见） -->
      <rect id="animated-box" x="0" y="0" width="200" height="200" fill="#ffffff" />
    </mask>
  </defs>
</svg>

<!-- 你的Logo图片，通过mask属性关联遮罩 -->
<img id="site-logo" src="initial-logo.png" style="mask: url(#logo-mask); width: 200px; height: 200px;" />

2. 用animejs操控mask内的盒子元素

直接把动画目标指向mask里的#animated-box，这样动画会直接作用于遮罩的可见区域，实现同步效果。

示例动画代码：

// 初始动画：旋转+缩放到0
anime({
  targets: '#animated-box',
  rotate: '1turn', // 旋转一圈
  scale: [1, 0], // 从1缩放到0
  duration: 1200,
  easing: 'easeInOutCubic',
  update: function(anim) {
    // 监测缩放进度，当接近0时切换logo
    if (anim.progress >= 98 && anim.targets[0]._gsTransform.scaleX < 0.02) {
      const logoEl = document.getElementById('site-logo');
      // 切换新logo
      logoEl.src = 'new-logo.png';
      // 反向动画：从0缩放回1，同时复位旋转
      anime({
        targets: '#animated-box',
        scale: [0, 1],
        rotate: 0,
        duration: 1200,
        easing: 'easeInOutCubic'
      });
    }
  }
});

3. 关键注意事项

• mask内的元素必须填充白色（#fff）：SVG遮罩遵循“白色显示，黑色隐藏，灰色半透明”的规则，所以要确保动画盒子的fill属性为白色。
• 保持Logo与遮罩尺寸一致：Logo的宽高要和mask内盒子的宽高匹配，避免遮罩错位。
• 兼容性处理：如果需要兼容旧版浏览器，可以给mask属性添加-webkit-前缀，即-webkit-mask: url(#logo-mask); mask: url(#logo-mask);。

内容的提问来源于stack exchange，提问作者MindaMan