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