中文教程｜ Framer Motion ｜基于React最好的动效库

使用Framer-motion库最基本的一个能力，我们就要从使用👉motion这个组件开始。

只要你引入了motion组件，任意的HTML元素标签，你都可以通过加上motion.开头，来使用加强版的相应的元素组件。

import {motion} from 'framer-motion'

function App(){
	return <motion.div></motion.div>
}

// motion.div motion.span motion.input motion.p ……

这些加强版的元素组件，我们可以设置一些Framer-motion库提供的特定的属性或者说能力，通过这些属性我们可以非常轻松的实现很多效果。

比如，我们要学习的第一个属性就是👉animate

<motion.div
	animate={
	// 向右水平移动100px距离
		{x:100}
	}
>
</motion.div>

animate这个属性，最基本的用法就是传入一个对象。这个对象就包含了你想要让这个元素进行变化具体数据（目标），我们也可以称之为动画信息对象。

你后面会发现，在很多时候，我们不管用什么方式让元素发生动画或者变化，传入数据的时候都是采用这种对象的形式，把希望元素进行变化的一些属性和对应的值写在里面。

比如，我们最常变化的几个属性 👉 x、y、scale、rotate还有opacity。

<motion.div
	animate={
		{
			x:100, // 向右移动100px
			y:200, // 向下移动200px
			scale:0.5, // 缩放至0.5倍
			rotate:45, // 旋转45度
			opacity:0.5  // 不透明度设置为0.5
		}
	}
>
</motion.div>

点击Rerun让代码重新执行👆

❗️注意，你会发现使用animate这个属性进行动画设置，当页面加载的时候，该元素就发生变化了。

animate

我们要注意到，moiton元素的上的style属性，这个属性一般元素上也有，但是motion元素上的style属性也是被强化了的，它不仅够像一般元素一样设置各种各种的CSS相关的属性，还支持motion提供的这些为了方便元素变化增加的便捷属性。

比如，我们曾在animate传入的👉x、y、scale、rotate。

如果这些属性，你直接到普通元素的style中是无法识别的。如果你要在普通元素style中实现一样的效果，你就必须得通过transform属性来进行相应的设置。

<motion.div
	style={
		{
			x:100, // 向右移动100px
			y:200, // 向下移动200px
			scale:0.5, // 缩放至0.5倍
			rotate:45, // 旋转45度
		}
	}
>
</motion.div>

<div
style={{
 transform:'translateX(50px) translateY(20px) scale(0.8) rotate(45deg)'
}}
>
</div>

style

motion组件上还提供了一个initial的属性，这个属性跟style会有些类似的作用。它是用来设置一个元素的初始状态的。

如果我们要设置一个元素的初始状态，除了可以通过style，也可以通过initial。如果你使用initial，你甚至有些时候可以不用去用style属性了。

 <motion.div
      initial={{
        width:100,
        height:100,
        backgroundColor:'white',
        borderRadius:'20px',
        rotate:45,
        border:'6px solid black'
      }}
      >
    </motion.div>

但是有一种情况，initial和style必须一起使用，就是当你需要给initial传false的时候。

当你给initial传递false，同时通过animate设置了一个变化数据的对象，那么你的这个初始动画就不会生效，它会没有动画，直接在加载后显示成你animate传入的对象的状态。

这种时候，你可能就需要同时用到style属性来设置元素的一些样式了。

但是通常的写法，我们也不必用initial来代替style属性。一般来说，我们还是会用style属性来设置元素的基本样式（基本状态）。

 <motion.div
      style={{
        width:100,
        height:100,
        backgroundColor:'white',
        borderRadius:'20px'
      }}
      initial={false}
      animate={{
        scale:1.2,
        rotate:45
      }}
      >
    </motion.div>

initial

在使用motion组件进行元素变化时，基本上所有的和元素样式、位置相关的属性都是可以变化的，比如背景色backgroundColor，投影boxShadow、圆角borderRadius等等。

而我们可以最常变化的可能是和tranform相关的，也就是能让元素移动、缩放、旋转的那些，就是我们之前已经介绍过的x、y、scale、rotate等等。

这里给大家列一个表，罗列的是我们比较常见会进行变化属性，但是并不仅仅是这些。

位置

缩放

旋转

斜切

变化中心点

宽高

width

height

translateX / x

translateY / y

translateZ / z

其他

top

left

right

bottom

两种写法都支持

scale

scaleX

scaleY

rotate

rotateX

rotateY

rotateZ

skew

skewX

skewY

orginX

orginY

orginZ

透视

transformPerspective

注意属性的值的写法和css中的写法是保持一致的

opacity

backgroundColor

boxShadow

borderRadius

……

以上三个属性是CSS中的transform-origin属性的特殊处理

如果使用数字为值，那么要使用0-1之间的值，0.5表示中间

任意的数字值，都会被理解成px像素作为单位的值

有时候在使用元素transform相关的变化时，他们书写顺序是很重要的，比如是在先移动的基础上再旋转还是先旋转的基础上再移动，不同的书写方式会导致变化的效果完全不一样，所以motion组件上也提供了一个特殊的属性transformTemplate，来让你可以自定义变化的顺序。

function template({ rotate, x }) {
  return `rotate(${rotate}) translateX(${x})`
}

return (
  <motion.div
    transformTemplate={template}
    animate={{ rotate: 360 }}
    style={{ rotate: 0, x: "calc(50vh - 100px)" }}
  />
)

什么可以变化

motion组件的属性能变化值的主要就是五种类型的数据：

数字：比如0，10等等
包含数字的字符串：'10vh'，'20px'等等
CSS计算函数值：‘calc(100vw - 50%)'
颜色类型的值：Hex，RGB，HSL三种
复杂的包含多种类型的值的字符串：'10px 0 #000'

注意三种颜色值的写法

Hex：

#FFFFFF

六位或者三位都是不带透明度的

#FFF

#FFFFFF00

#FFF0

八位或者四位都是带透明度的

RGB：

RGB(255,255,255,0.2)

RGB(255 255 255 / 0.2)

RGB(255,255,128)

不带透明度写法

带透明度的两种写法

HSL：

hsl(30 100% 50% / 80%)

hsl(0, 0%, 0%, 0.5)

hsl(0, 0%, 0%)

不带透明度写法

带透明度的两种写法

hsl(30 100% 50%)

一般来说，一个属性的值要发生变化，变化前和变化后的值需要是同一个类型的，比如说从‘0px’变化到‘10px’，‘10%’变化到‘50%’。

但是有几个属性，可以跨值类型变化，比如从‘100%’变化到‘calc(100vw - 50%)’，这几个属性是：

top

left

right

bottom

width

height

同时，只要是颜色的值之间的变化，都是可以跨值的类型变化的，比如从HSL写法变化到RGB写法。

<motion.div
  initial={{ x: "100%" }}
  animate={{ x: "calc(100vw - 50%)" }}
/>

unit单位

介绍

variants

Motion

教程

Framer

官方文档

JavaScript | 高手之路

全能课

Best

MasterJS

Made By

这里开始

基本动效实现

交互行为与事件

new

布局动效

高级布局变化

排序变化

元素退出效果

MotionValue

其他

GSAP 中文文档教程

React-Three-Fiber 中文文档