本文详解如何使用 useanimate 配合 setinterval，将多个连续动画（如位移、缩放翻转）封装为可重复执行的闭环序列，并确保组件卸载时自动清理定时器，实现高性能、无内存泄漏的无限循环动画。
本文详解如何使用 useanimate 配合 setinterval，将多个连续动画（如位移、缩放翻转）封装为可重复执行的闭环序列，并确保组件卸载时自动清理定时器，实现高性能、无内存泄漏的无限循环动画。
在 Framer Motion 中，useAnimate 提供了精细控制 DOM 元素动画的能力，特别适合构建自定义动画序列。但默认情况下，animate() 是一次性执行的 Promise —— 它不会自动重放。若需让一连串动画（例如：向右平移 → 水平翻转 → 向左归位 → 恢复正向）无限循环播放，关键在于手动调度重复执行，而非依赖 transition.repeat（该属性仅适用于单属性动画，不支持跨步骤的状态链式变更）。
以下是完整、健壮的实现方案：
✅ 正确做法：用 useRef 保存定时器引用 + useEffect 管理生命周期
import { motion, useAnimate } from "framer-motion";
import { useEffect, useRef } from "react";
export default function PacmanAnimation() {
const [scope, animate] = useAnimate();
const runInterval = useRef<NodeJS.Timeout | null>(null);
const runAnimation = async () => {
await animate(scope.current, { x: 300 }, { duration: 2 });
await animate(scope.current, { scaleX: -1 }, { duration: 0.2 });
await animate(scope.current, { x: -200 }, { duration: 2 });
await animate(scope.current, { scaleX: 1 }, { duration: 0.2 });
};
const startAnimation = () => {
// 清除可能存在的旧定时器（防重复启动）
if (runInterval.current) clearInterval(runInterval.current);
// 总时长 = 2 + 0.2 + 2 + 0.2 = 4.4 秒 → 设为 4400ms 间隔
runInterval.current = setInterval(() => {
void runAnimation(); // 显式 void 避免 TS 警告
}, 4400);
};
useEffect(() => {
startAnimation();
// ✅ 关键：组件卸载时清除定时器，防止内存泄漏和状态错乱
return () => {
if (runInterval.current) {
clearInterval(runInterval.current);
runInterval.current = null;
}
};
}, []);
return (
<motion.img
ref={scope}
initial={{ x: -200 }}
alt="pacman"
className="absolute z-50"
src="/pacman.gif"
width={100}
height={50}
/>
);
}⚠️ 注意事项与最佳实践
- 避免闭包陷阱：runAnimation 函数内直接使用 scope.current 是安全的，因为 useAnimate 返回的 animate 已绑定最新 ref；但若动画逻辑依赖外部 state（如动态 duration），需用 useCallback 包裹并正确添加依赖项。
- 精确控制间隔时间：务必手动计算整个动画序列的总耗时（含所有 duration 和隐式延迟），否则会出现“卡顿”或“叠加播放”。本例中 4.4s 必须严格匹配。
-
性能优化建议：
- 对于简单循环动画（如纯位移+翻转），也可考虑改用 motion.div + animate 属性配合 transition={{ repeat: Infinity, repeatType: "loop" }}，但该方式无法插入中间状态变更（如 scaleX: -1），故序列复杂时仍推荐 useAnimate 方案。
- 若需暂停/恢复控制，可暴露 clearInterval / startAnimation 方法，配合按钮交互。
✅ 总结
无限循环动画 ≠ 简单设置 repeat: Infinity。当动画涉及多步、非线性状态变更（如镜像翻转后再移动）时，必须借助 useAnimate 的命令式能力，并通过 setInterval 主动调度。配合 useRef 存储定时器 ID 与 useEffect 的清理函数，即可实现稳定、可维护、无副作用的循环序列动画——这正是构建高交互性动效页面的核心实践之一。
