react-spring как использовать анимированный (компонент)

Question

Я пытаюсь решить некоторые проблемы с производительностью в слайдере изображений и обнаружил, что использование animated.img дает гораздо лучшую производительность, чем использование animated.div с некоторым компонентом реакции внутри.

Очевидно, что компонент реакции не просто помещается внутрь для удовольствия, но, к счастью, react-spring позволяет анимировать пользовательский компонент, выполняя

const AnimatedComponent = animated(Component)

согласно docs

Но как мне это использовать? Я пытался, но машинописный текст просто дает какое-то действительно бесполезное сообщение об отсутствии 269 различных типов реквизита. это может быть не важно. Поскольку я понятия не имею, какие реквизиты передать для анимации компонента, я не удивлен, что он не работает, но сообщение об ошибке на самом деле не помогает в определении того, что мне нужно делать.

' is missing the following properties from type 'AnimatedProps<{ title: string | FluidValue<string, any>; id: string | FluidValue<string, any>; article?: { title: string; metaTitle: string; metaDescription: string; description: string; showRelatedArticles: boolean; elements: ({ ...; } | ... 4 more ... | { ...; })[]; } | null | undefined; ... 269 more ...; key?: st...': title, id, slot, animate, and 257 more.ts(2740)

Я удалил некоторые из первых опор, так как узнаю их по компоненту, который пытаюсь оживить, и знаю, что они присутствуют.

Кто-нибудь пробовал использовать это? Было бы неплохо, например, как его использовать.

Я использую 9.0.0-rc.3 версию react-spring, если это важно.

Answer 1

Начнем с примера из документации. Предположим, у вас есть сторонний компонент Donut. Имеет процентное свойство. И вы хотите анимировать на основе этого свойства. Таким образом, вы можете использовать анимацию в качестве оболочки вокруг пончика.

const AnimatedDonut = animated(Donut)
// ...
const props = useSpring({ value: 100, from: { value: 0 } })
return <AnimatedDonut percent={props.value} />

Теперь стало понятнее?