Framer Motion - 使用 MotionValue 时如何控制样式的动画答案

【问题标题】：Framer Motion - How to control animation of style when using MotionValueFramer Motion - 使用 MotionValue 时如何控制样式的动画
【发布时间】：2023-02-10 12:05:13
【问题描述】：

我有一个 MotionValue<number>，我在 motion.div 上设置为 style。我如何控制它的动画？

我在文档中找不到控制动画持续时间的位置。

import { motion, useMotionValue, useTransform, animate } from 'framer-motion';

const x = useMotionValue(0);
const changingX = useTransform(x, [0, 10], [0, 100]);

// change the changingX value when necessary
animate(x, 1);
animate(x, 5);
animate(x, 9);

<motion.div style={{ x: changingX }}></motion.div>

代码沙箱： https://codesandbox.io/s/https-stackoverflow-com-questions-64077992-forked-kfvlur?file=/src/App.js

【问题讨论】：

标签： framer-motion

【解决方案1】：

您必须传递一个对象作为第三个参数。这是一个例子：

animate(x, 100, { duration: 3 });

!注意持续时间必须以秒为单位指定

【讨论】：