React-SpringのHooksベースAPIでブラウザアニメーションを基本から極めよう!という記事をQiitaに書きました。
React-SpringというモダンなReact用のアニメーショライブラリ2を見つけて、Reactであれば! Hooksであれば!理解できそうなので(理解したとは言っていない)、解説記事を書いてみました。
- はじめに
- アニメーションとは何か
*「連続的に変化する」とはどういうことか
- react-springの紹介
- やってみようReact-Spring
- react-springのアニメーションプリミティブ一覧
- アニメーションのAPIの概観
【用語説明】アニメーション値(AnimatedValue)
【用語説明】アニメーション化されたコンポーネント(Animated Component)
*【用語説明】config
- API説明
- (1) useSpring Hook
- useSpring によるアニメーションの例(SampleA, SampleB)
- useSpringコード例(SampleSpringA.tsx)
- useSpringコード例(SampleSpringB.tsx)
- (2) useSprings Hook
- useSpringsによるアニメーションの例
- useSpringsコード例(SampleSprings.tsx)
- (3) useTrail Hook
- useTrailによるアニメーションの例
- useTrailコード例(SampleTrail.tsx)
- (4) useTransition Hook
- (5) useChain Hook
- useChainによるアニメーションの例
- useChainコード例(SampleChain.tsx)
- おわりに
- 参考リンク