NEW ARTICLE
Railsのエラー『Devise::OmniauthCallbacksController#failure』の解決方法
  1. HOME
  2. React
  3. Reactで実装するアニメーションとトランジション：React Spring入門

Reactで実装するアニメーションとトランジション：React Spring入門

Reactで実装するアニメーションとトランジション：React Spring入門

React Springは、Reactアプリケーションにアニメーションやトランジションを簡単に追加できるライブラリです。物理ベースのアニメーションをサポートし、滑らかで自然な動きを実現できます。本記事では、React Springの基本的な使い方やさまざまなアニメーションの実装方法を解説します。

目次

React Springとは何か？

React Springは、Springアルゴリズムに基づいたアニメーションライブラリであり、自然な動きを表現できます。

import { useSpring, animated } from 'react-spring';

function FadeIn() {
  const styles = useSpring({
    opacity: 1,
    from: { opacity: 0 },
  });

  return <animated.div style={styles}>Hello, World!</animated.div>;
}

インストールとセットアップ

React Springをプロジェクトに追加するには、以下のコマンドを実行します。

npm install @react-spring/web

基本的なアニメーションの作成

useSpringフックを使って、シンプルなアニメーションを実装できます。

const styles = useSpring({
  from: { transform: 'translateY(-50px)' },
  to: { transform: 'translateY(0px)' },
});

トランジションアニメーション

useTransitionを使ってリスト要素の追加や削除時にアニメーションを適用できます。

const styles = useSpring({
  from: { transform: 'translateY(-50px)' },
  to: { transform: 'translateY(0px)' },
});

アニメーションの遅延とチェーン

複数のアニメーションを順番に実行することができます。

const styles = useSpring({
  from: { opacity: 0 },
  to: async (next) => {
    await next({ opacity: 0.5 });
    await next({ opacity: 1 });
  },
});

物理ベースのアニメーション

物理エンジンを利用して、自然な動きを作成できます。

const styles = useSpring({
  to: { x: 100 },
  config: { tension: 170, friction: 26 },
});

イベントトリガーによるアニメーション

ユーザーの操作に応じてアニメーションをトリガーできます。

function HoverButton() {
  const [hovered, setHovered] = useState(false);
  const styles = useSpring({ scale: hovered ? 1.2 : 1 });

  return (
    <animated.button
      style={styles}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      Hover me
    </animated.button>
  );
}

Scrollアニメーション

スクロールに応じて要素をアニメーションさせることができます。

const styles = useSpring({
  scrollY: window.scrollY,
})

複数のアニメーションを組み合わせる

複数のアニメーション効果を同時に適用できます。

const styles = useSpring({
  from: { opacity: 0, scale: 0.5 },
  to: { opacity: 1, scale: 1 },
});

パフォーマンス最適化

React Springでは、useMemoやuseCallbackを活用してパフォーマンスを最適化できます。

React Springのデバッグ方法

アニメーションのデバッグには、React DevToolsやログを活用します。

まとめ

React Springは柔軟で強力なアニメーションライブラリです。基本的なアニメーションから高度なカスタマイズまで、幅広いユースケースに対応できます。