Framer Motion拖动交互中单词切换动画失效，如何解决？

• 需求完全可行，你遇到的问题根源是useTransform对字符串类型不支持自动离散切换：颜色属于可插值的数值类型（如RGB），Framer Motion能在输入区间内平滑过渡，但字符串没有插值逻辑，只有当x严格匹配xInput里的某个数值时才会切换文本，而拖动过程中x是连续变化的，所以始终显示第一个值"clear"。

解决方案1：监听x值变化手动切换文本 #

通过useMotionValue的onChange方法监听拖动位置，根据区间直接设置文本：

import { useMotionValue, useTransform, useEffect, useState } from "framer-motion";

// 初始化变量
const x = useMotionValue(0);
const [text, setText] = useState("clear");
const xInput = [0, 400, 800];

// 监听x的变化，切换文本
useEffect(() => {
  const unsubscribe = x.onChange((currentX) => {
    if (currentX < 200) setText("clear");
    else if (currentX < 600) setText("sunny");
    else setText("cloudy");
  });
  return unsubscribe;
}, [x]);

// 背景色的平滑过渡保留原有逻辑
const background = useTransform(x, xInput, ["red", "blue", "yellow"]);

解决方案2：用useTransform实现离散文本映射 #

先将x值转换为索引，再映射到对应文本，通过取整实现离散切换：

import { useMotionValue, useTransform } from "framer-motion";

const x = useMotionValue(0);
const xInput = [0, 400, 800];
const textOptions = ["clear", "sunny", "cloudy"];

// 将x值转换为索引，再映射到文本
const textIndex = useTransform(x, xInput, [0, 1, 2]);
const text = useTransform(textIndex, (val) => textOptions[Math.round(val)]);

const background = useTransform(x, xInput, ["red", "blue", "yellow"]);

进阶：添加文本切换动画 #

如果需要文本切换时有淡入淡出等动画，配合AnimatePresence组件实现：

import { AnimatePresence, motion } from "framer-motion";

// 结合解决方案1的text状态使用
<div className="condition">
  <svg style={{ backgroundColor: "transparent" }} viewBox="0 0 50 50">
    <AnimatePresence mode="wait">
      <motion.text
        key={text}
        x="10"
        y="40"
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        exit={{ opacity: 0, y: -10 }}
        transition={{ duration: 0.3 }}
      >
        {text}
      </motion.text>
    </AnimatePresence>
  </svg>
</div>

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