取景器运动 - 类型 'string' 不可分配给类型"缓动"。TS232

Question

我正在使用Framer Motion 5.3.3为我的网页制作一些动画。我正在尝试为Motion的useTransform钩子使用缓和选项。请参阅useTransform文档中的示例：

const xRange = [-200, -100, 100, 200]
const opacityRange = [0, 1, 1, 0]
const opacity = useTransform(x, xRange, opacityRange, {clamp: true, ease: "linear"})

给出错误：

Type 'string' is not assignable to type 'Easing | Easing[]'.

但在源代码中，我看到"；线性"；包含在CCD_ 2的类型定义中。那么，为什么这不起作用呢？使用ease的正确方法是什么？

export type Easing =
| [number, number, number, number]
| "linear"
| "easeIn"
| "easeOut"
| "easeInOut"
| "circIn"
| "circOut"
| "circInOut"
| "backIn"
| "backOut"
| "backInOut"
| "anticipate"
| EasingFunction

Answer 1

TransformOption的简化定义是使用popmotion库。

在您的文件中：

import { linear } from '@popmotion/easing';

然后

const y = useTransform(scrollY, [0, 500], [0, 300], {ease: linear})