// 最常用的使用react hook的方式
// 最常用的useSpring接口
import {useSpring, animated} from 'react-spring'

function App() {
  const props = useSpring({opacity: 1, from: {opacity: 0}})
  return <animated.div style={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)`
  ...;
`