如何创建开始和结束速度极慢的 Framer Motion 动画？

Question

我正在尝试使用

framer-motion

创建一个动画，它会慢慢开始，尤其是非常非常缓慢地结束。寻找与此网站类似的效果：https://wheelofnames.com/

我尝试了各种缓动函数，最接近预期效果的是使用缓动函数 [1, 0, 0, 1]。然而，这并不能完全体现我正在寻找的极其缓慢的结局。

import { motion } from 'framer-motion';

function Home() {
  return (
    <motion.div
      style={{ backgroundColor: 'red', width: '5em', height: '5em' }}
      animate={{
        x: `50em`,
      }}
      transition={{
        type: 'tween',
        duration: 1,
        ease: [1, 0, 0, 1],
      }}
    />
  );
}

export default Home;

Answer 1

您可能只需要增加持续时间并减少数组的第一个值即可看到效果。您的动画将按照现在的方式运行：

开始缓慢然后变得更快缓慢结束（结束和开始将同样慢，因为曲线数组中的第一个和最后一个值都是1）

如果你想让结束速度变慢，你需要通过减少数组中的第一个值来加快开始速度，比方说 0.3 将有一个缓慢的开始和明显更慢的结束。

我强烈建议使用这里的曲线 https://tools.webdevpuneet.com/css-easing-generator/ 并将持续时间设置为 20 秒，以真正感受到设置的效果（如果需要，您可以更高）以及当您对结果感到满意时将生成的 4 个值复制到数组中