Types

MotionValue

MotionValue是来追踪运动数值的状态和速度的。

这个类的构造函数是内置的。第三方代码不应直接调用这个类的构造函数或者创建一些子类来继承这个MotionValue的类。

- updateAndNotify: (v:V, render?:boolean) => void

destroy(): void

取消对于MotionValue的订阅

当你使用useMotionValue和useTransform这两个方法时，会返回一个MotionValue对象并且自动和它的生命周期函数相关联，所以这个方法只有在你手动通过MotionValue函数创建一个MotionValue对象时，需要取消订阅时才用到。

get(): V

返回MotionValue对象最新的状态

returns:V
- MotionValue的最新的状态

getVelocity(): number

返回MotionValue对象最新的速度

returns：number
- 返回MotionValue对象最新的速度

isAnimating(): boolean

当绑定的值在发生变化时，返回true

returns:boolean

onChange(subscription): () => void

这是一个当MotionValue对象的值改变的时候会执行传入函数的方法（）

这个方法会返回一个函数，当它执行这个返回的函数，那么订阅会被取消。

要在useEffect方法中使用onChange，因为它会返回取消订阅的函数，如果在useEffect函数里面将取消订阅的函数返回出去，那么当组件刷新时就会先把原先的订阅取消了，再重新订阅，这样就避免了重复订阅

function MyComponent() {
  const x = useMotionValue(0)
  const y = useMotionValue(0)
  const opacity = useMotionValue(1)

  useEffect(() => {
    function updateOpacity() {
      const maxXY = Math.max(x.get(), y.get())
      const newOpacity = transform(maxXY, [0, 100], [1, 0])
      opacity.set(newOpacity)
    }

    const unsubscribeX = x.onChange(updateOpacity)
    const unsubscribeY = y.onChange(updateOpacity)

    return () => {
      unsubscribeX()
      unsubscribeY()
    }
  }, [])

  return <Frame x={x} />
}

subscription:Subscribe<T> 一个当被订阅的MotionValue数值更新的时候要执行的函数
returns:() => void 返回一个函数可以取消相关订阅

set:(v, render): void

设置MotionValue状态值

const x = useMotionValue(0)
x.set(10)

v:V 最新的要被设定的值
render: boolean
是否通知订阅对象（是否会让onChange方法传入的函数执行）。默认是true。

stop: void

停止现在正在进行的动画

AnimationControls

同时控制一个或者多个动画

set(definition): void

直接给控制器设置动画参数或者variants变量对象中的一个属性

// With properties
controls.set({ opacity: 0 })

// With variants
controls.set("hidden")

definition: VariantLabels | TargetAndTransition

start(definition, transitionOverride): Promise<any>

启动动画，会同时在所有的关联组件上启动

controls.start("variantLabel")
controls.start({
  x: 0,
  transition: { duration: 1 }
})

definition:AnimationDefinition 用来实现动画的动画参数或者variants对象中的一个属性名称
transitionOverride:Transition 可选的参数，用来定义你自己想要的过渡参数
returns: Promise<any>
- 当所有动画都执行完成，返回的Promise对象会resolve

stop( ): void

停止所有通过控制器绑定的组件的动画

controls.stop()

EasingFunction

一个函数接收一个名称为progress的参数，这个参数值的在0-1范围内，并且返回一个也是0-1范围的值

const transition = {
  ease: progress => progress * progress
}

<Frame
  animate={{ opacity: 0 }}
  transition={transition}
/>

TargetAndTransition

一个对象，里面设置了动画的参数。每一个属性可以是单独的一个值，或者一个包含各种值的数组。

它也有可能包含以下属性：

- transition：特殊的动画过渡参数，专门用来给某一个或者所有动画效果设置

- transitionEnd: 当动画完成后对组件设置的属性和值

const target = {
  x: "0%",
  opacity: 0,
  transition: { duration: 1 },
  transitionEnd: { display: "none" }
}