Be next-level in aesthetics

使用framer motion，提升网站审美

一、安装及使用

pnpm install framer-motion

import { motion } from ‘framer-motion’

二、动画

1. transition：补间动画，从一种状态到另一种状态

   1. 支持的动画类型有：

      1. Tween

      2. Spring

      3. Inertia

   2. 动画编排

      1. delayChildren：指定子元素的延迟

      2. staggerChildren：子元素错开延迟

      3. staggerDirection：子元素动画方向，1:正序，-1:倒序

2. Keyframes：帧动画，按顺序显示每个值

3. layout：布局动画

   1. 父级布局的变更，比如flex或者grid

   2. 列表的排序

   3. width，position的变更

4. layoutScroll：滚动容器动画

5. LayoutGroup：协调同级元素动画

6. scroll

   1. useScroll

   2. whileInView

   3. viewport：配置项

三、组件

1. motion

   1. initial：初始值

   2. animate：执行动画

   3. transition：设置动画类型

   4. variants：预定义动画状态，方便通过标签引用

   5. layout：设置布局动画

   6. layoutScroll：布局滚动

   7. transformTemplate：变换模版，用于设置属性的变化顺序

2. 普通组件转换：

   motionComponent = motion(normalComponent)

3. AnimatePresence：组件移除时，进行动画处理

   1. exit：退出时动画

   2. 多个children时，key需要唯一

   3. 自定义组件需要 AnimatePresence包裹，才能触发exit动画

4. lazyMotion：延迟组件加载，减少包大小

5. MotionConfig：设置所有motion子组件的配置项，prop只接受transition

6. ReOrder：创建拖动排序效果

四、Motion Value：追踪动画值的状态和速度

1. useMotionValue

   1. 设置或者获取动画的状态

   2. 可在多个组件之间同步值

   3. 值的改变不会处罚react的渲染周期

   4. 支持订阅更新

2. useMotionValueEvent：订阅来自MutionValue的事件

   1. change

   2. animationStart

   3. animationComplete

   4. animationCancel

3. useScroll：创建滚动动画

   1. 进度指示器

   2. 视差效果

4. useSpring：创建一个运动值，使其具有弹簧动画

5. useTime：返回一个值，单位毫秒，每帧更新一次

6. useTransform：通过定义输入范围和输出范围，创建一个新值

7. useVelocity：接受一个值，返回一个新值，根据动画的速度进行更新

五、Hooks

1. useAnimate：创建具有作用域和自动清理的动画函数

2. useAnimationFrame：每个动画帧运行一次回调

3. useDragControls：定义组件拖动触发器

4. useInView：判断是否在可视窗口内

六、事件

1. whileHover

2. whileTap

3. whileDrag

4. whileFocus

5. whileInView

---

官网地址：https://www.framer.com/motion/