アニメーションの原則に基づいた自然な動きが実装できるReactのアニメーション ライブラリ -React Spring

最近のWebサイトやスマホアプリのUIにアニメーションを実装する際、CSSだとeasingやdurationなどが欠かせません。しかし現状CSSだとそこが限界です。

アニメーションの原則に基づき、パフォーマンスにも優れたアニメーションをシンプルなコードで実装できるReactのアニメーション ライブラリを紹介します。

Reactのアニメーション ライブラリReactのアニメーション ライブラリ

React Spring -GitHub

React Springはanimatedのフォークで、物理シミュレーションベースのanimatedやReact-Motionとは異なり、アニメーションの原則に基づいて構築されています。フレーム単位でコンポーネントをレンダリングするのではなく、DOMに直接コミットしアニメーションさせるので、一見複雑そうな動きでも非常にシンプルなコードで実装でき、パフォーマンスにも非常に優れています。

WebサイトやスマホアプリのUIにぴったりなReact Springで実装されたアニメーションのアイデアをチェックしておきましょう。
各デモページでは、実際のインタラクションとコードを確認できます。
※ここで掲載しているアニメーションGIFは一部の動きのみです。

Springs and interpolation

Springはデータをある状態から別の状態に移動します。それは現在の状態を記憶し、値の変化は常に流動的です。

Mount/Unmount transitions

Transitionsは要素のマウントとアンマウントを監視し、これらの変更をアニメーションするのに役立ちます。

Reveals

子要素に対して、2つのコンポーネントを切り替えることができます。

Trails/Staggered motion

Trailsはリストの子要素をアニメーションさせます、残りは兄弟要素に従います。

Horizontal paged parallax

Parallaxはページ/スクロールベースのアニメーションを宣言的に作成できます。

Keyframes/multiple scripts

スクリプト内でアニメーションを編成します。理論的には、プリミティブ間を切り替えることもできます。

Animating 'auto'

子要素を加える・取り除く際に、アニメーションで親要素を最適化します。

SVG morphing/custom interpolaters

SVGで描画した要素をモーフィングで変形させます。

VX/D3 sunbursts

ネイティブのレンダリングでD3.jsのグラフやツリーなどを描画します。

Routing

定義したルーティンに従って、要素をアニメーションで呼び出します。

Horizontal gestures / occlude

水平方向のジェスチャーに合わせて、要素のアニメーションを変更します。

Vertical gestures / drag-n-drop

垂直方向のジェスチャに合わせて、子要素にアニメーションを適用し、兄弟要素はその子要素に従います。

sponsors

top of page

©2024 coliss