自定义动画曲线的应用

globals.css
:root {
  --ease-in-quad: cubic-bezier(.55, .085, .68, .53);
  --ease-in-cubic: cubic-bezier(.550, .055, .675, .19);
  --ease-in-quart: cubic-bezier(.895, .03, .685, .22);
  --ease-in-quint: cubic-bezier(.755, .05, .855, .06);
  --ease-in-expo: cubic-bezier(.95, .05, .795, .035);
  --ease-in-circ: cubic-bezier(.6, .04, .98, .335);
 
  --ease-out-quad: cubic-bezier(.25, .46, .45, .94);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-out-quint: cubic-bezier(.23, 1, .32, 1);
  --ease-out-expo: cubic-bezier(.19, 1, .22, 1);
  --ease-out-circ: cubic-bezier(.075, .82, .165, 1);
 
  --ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);
  --ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);
  --ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);
  --ease-in-out-quint: cubic-bezier(.86, 0, .07, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);
}

tailwind.config.js
import typograhpy from '@tailwindcss/typography';
import type { Config } from 'tailwindcss';
 
export default {
  content: ['./src/**/*.{ts,tsx}', './data/**/*.{md,mdx}'],
  theme: {
    extend: {
      // ... 其他扩展配置 ...
      transitionTimingFunction: {
        'in-quad': 'var(--ease-in-quad)',
        'in-cubic': 'var(--ease-in-cubic)',
        'in-quart': 'var(--ease-in-quart)',
        'in-quint': 'var(--ease-in-quint)',
        'in-expo': 'var(--ease-in-expo)',
        'in-circ': 'var(--ease-in-circ)',
        'out-quad': 'var(--ease-out-quad)',
        'out-cubic': 'var(--ease-out-cubic)',
        'out-quart': 'var(--ease-out-quart)',
        'out-quint': 'var(--ease-out-quint)',
        'out-expo': 'var(--ease-out-expo)',
        'out-circ': 'var(--ease-out-circ)',
        'in-out-quad': 'var(--ease-in-out-quad)',
        'in-out-cubic': 'var(--ease-in-out-cubic)',
        'in-out-quart': 'var(--ease-in-out-quart)',
        'in-out-quint': 'var(--ease-in-out-quint)',
        'in-out-expo': 'var(--ease-in-out-expo)',
        'in-out-circ': 'var(--ease-in-out-circ)',
      },
      // ... 其他扩展配置 ...
    },
  },
  // ... 其他配置 ...
} satisfies Config;
 

<div className="transition-all duration-300 ease-out-quart">
  这个 div 将使用 ease-out-quart 缓动函数进行过渡
</div>

./components/ui/constants/animation.ts
 
import type { Spring, Easing } from "motion/react";
 
// Spring animations
export const rebound: Spring = {
  type: "spring",
  bounce: 0.25,
  stiffness: 140,
  damping: 8,
};
 
export const microDamp: Spring = {
  type: "spring",
  damping: 24,
};
 
export const microRebound: Spring = {
  type: "spring",
  stiffness: 300,
  damping: 20,
};
 
export const softSpring: Spring = {
  type: "spring",
  stiffness: 120,
  damping: 20,
};
 
export const softBounce: Spring = {
  type: "spring",
  damping: 10,
  stiffness: 100,
};
 
// Easing functions
export const inQuad: Easing = [0.55, 0.085, 0.68, 0.53];
export const inCubic: Easing = [0.55, 0.055, 0.675, 0.19];
export const inQuart: Easing = [0.895, 0.03, 0.685, 0.22];
export const inQuint: Easing = [0.755, 0.05, 0.855, 0.06];
export const inExpo: Easing = [0.95, 0.05, 0.795, 0.035];
export const inCirc: Easing = [0.6, 0.04, 0.98, 0.335];
 
export const outQuad: Easing = [0.25, 0.46, 0.45, 0.94];
export const outCubic: Easing = [0.215, 0.61, 0.355, 1];
export const outQuart: Easing = [0.165, 0.84, 0.44, 1];
export const outQuint: Easing = [0.23, 1, 0.32, 1];
export const outExpo: Easing = [0.19, 1, 0.22, 1];
export const outCirc: Easing = [0.075, 0.82, 0.165, 1];
 
export const inOutQuad: Easing = [0.455, 0.03, 0.515, 0.955];
export const inOutCubic: Easing = [0.645, 0.045, 0.355, 1];
export const inOutQuart: Easing = [0.77, 0, 0.175, 1];
export const inOutQuint: Easing = [0.86, 0, 0.07, 1];
export const inOutExpo: Easing = [1, 0, 0, 1];
export const inOutCirc: Easing = [0.785, 0.135, 0.15, 0.86];

import { motion } from 'motion/react';
import { softSpring, outExpo } from './components/ui/constants/animation';
 
function AnimatedComponent() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 50 }}
      animate={{ opacity: 1, y: 0 }}
      transition={softSpring}
    >
      Spring Animation
    </motion.div>
  );
}
 
function EasingAnimatedComponent() {
  return (
    <motion.div
      initial={{ opacity: 0, x: -50 }}
      animate={{ opacity: 1, x: 0 }}
      transition={{ duration: 0.6, ease: outExpo }}
    >
      Easing Animation
    </motion.div>
  );
}

// 新增函数：生成优化的弹簧动画配置
export function createOptimizedSpring(perceptualDuration: number, bounce: number): Spring {
  const mass = 1;
  const stiffness = Math.pow((2 * Math.PI) / perceptualDuration, 2) * mass;
  let damping: number;
 
  if (bounce >= 0) {
    damping = ((1 - bounce) * 4 * Math.PI) / perceptualDuration;
  } else {
    damping = (4 * Math.PI) / (perceptualDuration * (1 + bounce));
  }
 
  return {
    type: "spring",
    mass,
    stiffness,
    damping,
  };
}
 
// 使用新函数创建优化的弹簧动画
export const optimizedRebound = createOptimizedSpring(0.5, 0.25);
export const optimizedMicroDamp = createOptimizedSpring(0.3, -0.5);
export const optimizedMicroRebound = createOptimizedSpring(0.2, 0.1);
export const optimizedSoftSpring = createOptimizedSpring(0.6, 0);
export const optimizedSoftBounce = createOptimizedSpring(0.8, 0.3);