Framer Motion 学习手册

Framer Motion 是一个强大的 React 动画库,通过 Framer Motion 可以设计并实现流畅的动画效果。

Framer Motion 的优点是能够轻松实现令人惊叹的动画效果。

motion 组件

这个组件是 framer motion 里内建的组件,包含所有 HTML 标签与 SVG 标签,它们与普通标签能实现同样的功能但是更加强大:motion 组件标签可以接收动画属性,使得标签可以受到 framer motion 管理,实现动画效果。

props

style:可以理解成跟普通的 style 并无两样。

animate:要进行动画过渡到的样式,属性值可以是 样式、variant 键。当里面的值改变时,motion 会高效更新动画。

initial: 组件初始化的样式,属性值可以是 样式、variant 键、布尔值。当为 false 时,网页初始化时不自动进行动画。

transition:定义动画过渡的效果、时常等属性。e.g.:

const spring = {
  type: "spring",
  damping: 10,
  stiffness: 100
}

<motion.div transition={spring} animate={{ scale: 1.2 }} />

variants:这个属性是让我最喜爱的属性。通过传入一个 variant 然后 animate 属性里只需要简单的切换 variant label 就可以更新动画。

variants 里的 label 可以用于 initial、animate、whileHover、whileTap 这些属性中,如:

const variants = {
  active: {
      backgroundColor: "#f00"
  },
  inactive: {
    backgroundColor: "#fff",
    transition: { duration: 2 }
  }
}

<motion.div variants={variants} animate="active" />

layoutTransition:这个属性值可以是 transition 或布尔值,如果接受的是 transition 的话应该跟上面的 transition 属性一样,如果是 true,元素改变自身 position 这种原本不可呈现动画的方式就可以呈现出动画。

custom: 看代码理解:

const variants = {
  visible: (custom) => ({
    opacity: 1,
    transition: { delay: custom * 0.2 }
  })
}

<motion.div custom={0} animate="visible" variants={variants} />
<motion.div custom={1} animate="visible" variants={variants} />
<motion.div custom={2} animate="visible" variants={variants} />

剩余未提及到的 props