on:2018年5月24日sponsors最近のWebサイトやスマホアプリのUIにアニメーションを実装する際、CSSだとeasingやdurationなどが欠かせません。現状CSSだとそこが限界です。ライブラリを紹介します。Springはanimatedのフォークで、物理シミュレーションベースのanimatedやReact-Motionとは異なり、アニメーションの原則に基づいて構築されています。フレーム単位でコンポーネントをレンダリングするのではなく、DOMに直接コミットしアニメーションさせるので、一見複雑そうな動きでも非常にシンプルなコードで実装でき、パフォーマンスにも非常に優れています。Springで実装されたアニメーションのアイデアをチェックしておきましょう。各デモページでは、実際のインタラクションとコードを確認できます。※ここで掲載しているアニメーションGIFは一部の動きのみです。interpolationSpringはデータをある状態から別の状態に移動します。それは現在の状態を記憶し、値の変化は常に流動的です。transitionsTransitionsは要素のマウントとアンマウントを監視し、これらの変更をアニメーションするのに役立ちます。Reveals子要素に対して、2つのコンポーネントを切り替えることができます。motionTrailsはリストの子要素をアニメーションさせます、残りは兄弟要素に従います。parallaxParallaxはページ/スクロールベースのアニメーションを宣言的に作成できます。scriptsスクリプト内でアニメーションを編成します。理論的には、プリミティブ間を切り替えることもできます。'auto'子要素を加える・取り除く際に、アニメーションで親要素を最適化します。interpolatersSVGで描画した要素をモーフィングで変形させます。sunburstsネイティブのレンダリングでD3.jsのグラフやツリーなどを描画します。Routing定義したルーティンに従って、要素をアニメーションで呼び出します。occlude水平方向のジェスチャーに合わせて、要素のアニメーションを変更します。drag-n-drop垂直方向のジェスチャに合わせて、子要素にアニメーションを適用し、兄弟要素はその子要素に従います。