uehaj's blog

Grな日々 - GroovyとかGrailsとかElmとかRustとかHaskellとかReactとかFregeとかJavaとか -

React-SpringのHooksベースAPIでブラウザアニメーションを基本から極めよう!

React-SpringのHooksベースAPIでブラウザアニメーションを基本から極めよう!という記事をQiitaに書きました。

https://user-images.githubusercontent.com/619186/51572411-7e04a880-1e8c-11e9-802c-251f150a1e69.gif?ixlib=rb-1.2.2&auto=format&gif-q=60&q=75&s=90ef9f8518bded30ed22d1f58de5928e

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)
  • おわりに
  • 参考リンク