react-spring

react-spring 介绍

使用于reactjs的动画工具库，因为依据 react-motio作者Cheng Lou的演讲观点，>95%以上的动画特效使用spring即可达到可用的效果，以往那种时间间隔和曲线的动画理念生硬又复杂。

使用

web的例子

// 最常用的使用react hook的方式

// 最常用的useSpring接口

import {useSpring,animated} from 'react-spring'

function App() {

const props = useSpring({opacity: 1,from: {opacity: 0}})

return <animated.div {props}>I will fade in</animated.div>

}

// animated.div表示的是'animated.'前缀 + 'div' 标签,

// div可以是任何合法的html标签（这里是web,如果用于react native也可以是react native里的标签）

// react spring就是通过这种方式识别需要应用动画的标签

用于文本

const props = useSpring({ number: 1,from: { number: 0 } })

return <animated.span>{props.number}</animated.span>

作用于自定义组件的例子

// react components

const AnimatedDonut = animated(Donut)

// react-native

const AnimatedView = animated(View)

// styled-components,emotion,etc.

const AnimatedHeader = styled(animated.h1)`

...;

`

网站地址:https://www.react-spring.io

GitHub:https://github.com/react-spring/react-spring

网站描述:使用于reactjs的动画工具库

react-spring

官方网站：https://www.react-spring.io