はじめに
こんにちは、KUDs です。
この記事は、「React アプリで画像を動かしたい！」という方向けに執筆します。
Web ページにアニメーションを取り入れることは非常に重要です。
アニメーションは UX を向上し、ユーザーの注目を引く強力な手法となります。
特に、React を使用している場合、アニメーションの実装は超簡単です。
本記事では、React アプリケーションで画像を滑らかに拡大・縮小・バウンスさせるための手順をご紹介します。
React アニメーションライブラリ、react-spring を使用します。
このライブラリは物理ベースのアニメーションを生成します。
そのため、非常に自然な動きを実現できます。
このガイドは、React の基本的な知識を持っている方を対象としています。
まだ経験が浅い方でも、具体的なコードサンプルと詳細な説明により、アニメーションを実装するための具体的な手順を理解できるかと思います。
次の章では、まず react-spring とは何かについて説明します。
その後、具体的な実装手順を解説します。
react-spring とは何か？
react-spring は、React アプリケーション向けの強力なアニメーションライブラリです。
その名の通り、このライブラリは”spring”（”ばね”）の物理モデルに基づいてアニメーションを生成します。
これによって、自然で流れるようなアニメーションが実現可能になります。
react-spring の特徴
特徴は次の通りです。
- 物理ベースのアニメーション:
- react-spring は、ばね物理モデルに基づいて動きを生成します
- これによって、CSS のトランジションやアニメーションよりも自然で滑らかな動きを作り出すことができます
- パフォーマンス:
- react-spring は、Webアニメーションのパフォーマンスに重点を置いて設計されています
- アニメーションの各フレームは、毎秒 60 フレームの速度で更新され、ブラウザのリフレッシュレートと同期します
- これによって、アニメーションは非常にスムーズに見えます
- API の柔軟性:
- react-spring は、さまざまな API を提供しています
- これによって、開発者は自分のニーズに合わせて、独自のアニメーションを作成することができます
- 基本的なトランジションから、高度な物理ベースのアニメーションまで、ほとんど何でも実装することが可能です
react-spring を使用すると、Web アプリケーションに対して、UX を豊かにする、見た目の美しいアニメーションを追加することが可能になります。
react-spring の実装例を見てみよう
ここで、実際に画像にアニメーションを追加した際の動きを確認してみましょう。
こちらのアニメーションでは、画像の拡大、縮小、バウンドを行っております。
バネの物理モデルに基づくため、よりリアルな動きが実現できます。
GIF 動画の画質とフレームレートを低下させているため伝わりにくいかもしれませんが、非常に滑らかな動きです。
実際のアニメーションを確認したい方は、弊サイトを覗いてみてください。
どれほど滑らかか、ご確認いただけるかと思います。
次の章では、具体的な実装方法について見ていきましょう。
環境設定
この章では、React プロジェクトが既に作成されている前提で話を進めます。
まだ React プロジェクトを作成していない場合、新規プロジェクトを作成します。
npx create-react-app my-app
cd my-app
それでは、まず必要なパッケージをインストールしましょう。
以下のコマンドで react-spring をインストールします。
npm install react-spring
または、yarn を使用している場合は以下のコマンドです。
yarn add react-spring
これで、react-spring を使うための環境が整いました。
次の章では、具体的に react-spring を使用して画像の拡大、縮小、バウンスのアニメーションを作成する方法について説明します。
react-spring を用いた画像拡大・縮小・バウンスの基本構造
フック useSpring の利用
react-spring を使って画像の拡大・縮小・バウンスのアニメーションを作成するには、useSpring というフックを利用します。
まず、このフックをインポートしましょう。
import { useSpring, animated } from 'react-spring';
アニメーションの設定例: 拡大・縮小
次に、useSpring フックを使用してアニメーションの設定を行います。
このフックはオブジェクトを返すので、それを animated コンポーネントの style プロパティに渡すことでアニメーションを適用することができます。
例えば、画像を拡大・縮小させるアニメーションを作成するには以下のようにします。
const props = useSpring({
from: { transform: "scale(0.5)" },
to: { transform: "scale(1.5)" },
config: { duration: 1000 },
reset: true,
reverse: true,
});
return <animated.img style={props} src="path_to_your_image" alt="description" />;
上記のコードのポイントは以下の通りです。
- from, to: useSpring にアニメーションの始点と終点を指定
- config: アニメーションの持続時間を設定
- reset: true: アニメーションが終了した後にリセット
- reverse: true: 逆方向に再生する設定
アニメーションの設定例: バウンド
バウンスエフェクトのアニメーションを作成するには、以下のようにします。
const bounceProps = useSpring({
from: { transform: "translateY(0px)" },
to: { transform: "translateY(-20px)" },
config: { duration: 500 },
reset: true,
reverse: true,
});
return <animated.img style={bounceProps} src="path_to_your_image" alt="description" />;
- translateY: Y 座標を指定します
以上が、画像の拡大・縮小・バウンスアニメーションの基本的な構造です。
さらに応用して、ユーザーのインタラクションに応じてアニメーションを制御したり、複数のアニメーションを組み合わせるなど、様々な表現が可能となります。
config では、friction や tension を指定し、よりリアルな(バネっぽい)アニメーションを実装することが可能です。
是非、色々試してみてください。
以下の公式ドキュメントも参考になるかと思います。
カスタムフックを用いた画像エフェクトの繰り返し
前述の基本的なアニメーションでは、特定の状態から別の状態へ一回のみ遷移します。
しかし、画像を周期的に拡大・縮小・バウンスさせるためには、アニメーションが終わったら再度始まるような、繰り返しの動作を実装する必要があります。
カスタムフック useOscillation の作成
そこで、この章ではカスタムフック useOscillation を作成し、それを画像アニメーションに適用する方法を説明します。
まず、カスタムフック useOscillation を作成します。
import { useState } from 'react';
import { useSpring } from 'react-spring';
function useOscillation({ from, to, config }) {
const [flip, setFlip] = useState(false);
const styles = useSpring({
from,
to: flip ? from : to,
config,
onRest: () => setFlip(!flip),
});
return styles;
}
この useOscillation フックは from、to、config の3つの引数を受け取り、useSpring を内部で呼び出し、アニメーションの設定を行います。
flip の状態を用いて始点と終点を入れ替え、アニメーションを繰り返し再生します。
カスタムフック useOscillation の適用
次に、この useOscillation を画像のアニメーションに適用します。
以下のように useOscillation を利用して animated.img コンポーネントの style プロパティを設定します。
const styles = useOscillation({
from: { transform: 'scale(1)' },
to: { transform: 'scale(1.5)' },
config: { duration: 2000 },
});
return <animated.img style={styles} src="path_to_your_image" alt="description" />;
以上が useOscillation カスタムフックの作成とその適用方法です。
このカスタムフックを利用、簡単に周期的なアニメーションを実装することができます。
「そもそもカスタムフックが良くわからない」という方へ。
是非、以下の公式ドキュメントもご参照ください。
さいごに
この記事では、react-spring を組み合わせて画像を滑らかに拡大・縮小し、バウンスさせる方法を解説しました。
アニメーションは UX を向上させる重要な要素です。
react-spring を使えば簡単に実装できるので、是非試してみてください。
以下は、本記事の内容のおさらいです。
- まず、react-spring とその基本的な仕組みについて説明しました。
- それから、react-spring のインストール及び設定方法を確認しました。
- 次に、useOscillation というカスタムフックを作成しました。
- 最後に、そのカスタムフックを使用して、周期的なアニメーションを実装しました。
以上です。
最後にもう一度、react-spring で実装したアニメーションを再掲します。
コメント