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
如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。