如何使用Framer Motion创建启始与结束极缓的动画？

要做出类似目标网站的启始慢、结尾极缓的动画效果，可以从以下几个方向调整你的Framer Motion配置：

1. 优化贝塞尔曲线缓动参数 #

你之前使用的[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: 3, // 适当延长时长，让结尾缓动更明显
        ease: [0.15, 0, 0.02, 0.1],
      }}
    />
  );
}

export default Home;

2. 改用Spring物理过渡 #

Spring类型的过渡更适合模拟自然减速的物理效果，通过调整刚度、阻尼和质量参数，能精准控制启动速度和结尾缓动幅度：

import { motion } from 'framer-motion';

function Home() {
  return (
    <motion.div
      style={{ backgroundColor: 'red', width: '5em', height: '5em' }}
      animate={{ x: '50em' }}
      transition={{
        type: 'spring',
        stiffness: 10, // 低刚度让启动更平缓
        damping: 15, // 阻尼越小，结尾停得越慢
        mass: 2, // 增加质量增强缓动的厚重感
      }}
    />
  );
}

export default Home;

3. 用关键帧拆分动画阶段 #

通过关键帧把动画拆分为「缓慢启动加速」和「极缓收尾」两个阶段，精准分配各阶段的时长和缓动曲线：

import { motion } from 'framer-motion';

function Home() {
  return (
    <motion.div
      style={{ backgroundColor: 'red', width: '5em', height: '5em' }}
      animate={{
        x: ['0em', '40em', '50em'],
      }}
      transition={{
        duration: 3,
        ease: [
          [0.1, 0, 0.3, 0.8], // 前80%时长：缓慢启动并完成大部分移动
          [0.05, 0, 0.01, 0.1], // 后20%时长：极缓减速到终点
        ],
        times: [0, 0.8, 1],
      }}
    />
  );
}

export default Home;

其中Spring方案最接近目标网站的自然减速效果，你可以根据需求微调stiffness和damping的数值：刚度越小启动越慢，阻尼越小结尾的缓动持续时间越长。

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