motion-anything 动效占位符和预加载策略

motion-anything 这类动效占位符，核心问题是“用什么状态告诉用户正在加载”，而不是“如何把加载变快”。它适合用在首屏或关键内容的异步请求场景，替代空白页面。如果你正在纠结要不要引入动效占位符，先想清楚两件事：第一，加载完成后的真实内容是否能在布局上尽量稳定；第二，当加载超过预期时，用户会不会被无限动画困住。本页从职责、预加载策略和接入骨架三个方向给出建议。

动效占位符只负责“加载中”这一状态的可视化，不能替代真实内容渲染、错误超时与降级处理。预加载策略应以首帧完整为目标，优先预取关键尺寸与首屏数据，再决定是否播放动效。接入时先定义超时和回退，确认在弱网与禁用动画场景下仍可读。

动效占位符的职责边界

动效占位符适合用于异步组件、图片列表、首屏数据加载等场景。它的价值是让用户感知到系统有响应，减少“白屏是否卡死”的焦虑。但必须明确：它不会减少加载时间，也不能掩盖接口错误。如果请求失败，占位符一直转，只会放大用户困惑。

使用时应保持克制：占位符尺寸应贴近真实内容，高度、圆角、间距先按静态稿还原；动画频率建议低频，避免高亮度闪烁。对于已经禁用动画的系统，需要保留文字提示，例如“内容加载中”。在服务端渲染或静态生成页面中，占位符可能出现“先占位、后替换”的闪烁，需要结合 hydration 时机处理。

预加载策略：先保首屏，再追加

预加载大体可分为资源预加载和数据预加载。资源预加载包括图片、字体、组件 chunk；数据预加载包括接口响应、localStorage 缓存。动效占位符通常与“数据未到”这一状态绑定，所以预加载策略要回答一个问题：在什么时间点启动请求，可以让占位符出现次数最少。

常用做法是：用户触发跳转或滚动前，提前请求关键接口；页面挂载后，先渲染占位符，同时发起非关键资源加载。资源预加载不要全量铺开，优先覆盖首屏所需；例如首屏大图用 link rel='preload' 提示，字体用 font-display: swap 配合预加载。对数量较多的列表项，可以先加载首屏 5-10 条，再按需分页。还需要注意浏览器并发请求上限，占位符动画本身也占用渲染线程，过度复杂会拖慢内容就绪，所以动画层数越少越好。

接入骨架与替换位置

下面是一段通用的加载态占位组件骨架。如果项目里已经通过 motion-anything 引入占位符，请替换掉 LazyFallback 内部的实现，保留超时与回退逻辑。

// 通用骨架：用于异步内容区域
import { useEffect, useState } from 'react';

function LazyFallback({ timeout = 8000 }) {
  const [status, setStatus] = useState('loading');

  useEffect(() => {
    const timer = setTimeout(() => setStatus('timeout'), timeout);
    return () => clearTimeout(timer);
  }, [timeout]);

  if (status === 'timeout') {
    return <div role='status'>加载超时，请刷新重试</div>;
  }

  // 这里替换为 motion-anything 提供的占位符组件
  return <div className='motion-placeholder'>加载中...</div>;
}

export default LazyFallback;

.motion-placeholder {
  border-radius: 8px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: motion-shimmer 1.4s ease infinite;
}

@keyframes motion-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

这两段代码没有绑定具体版本或构建工具，接入时把类名和组件名换成 motion-anything 的对应名称即可。注意：超时值需要结合接口平均耗时设置，不要写死 8 秒，建议先测 75 分位耗时再调整。

验证与回退清单

在发布前，至少确认下面几点：

弱网或离线状态下，占位符会不会无限闪烁，超时提示是否出现。
系统禁用动画后，占位符是否还有文字可读。
占位符尺寸与真实内容加载后的布局是否一致，避免跳动。
预加载的资源是否被浏览器正确调度，可在 Network 面板观察是否重复请求。
首屏资源是否优先于非关键资源，避免带宽被占满。

如果发现占位符在慢速环境中停留过久，优先检查接口耗时，而不是单纯调动画速度；占位符只是兜底，不能替代接口性能或缓存方案。