【超簡単!】react-spring で画像を滑らかに拡大・縮小・バウンド

Blog-Thumbnail_React-01

はじめに

こんにちは、KUDs です。

この記事は、「React アプリで画像を動かしたい!」という方向けに執筆します。

Web ページにアニメーションを取り入れることは非常に重要です。
アニメーションは UX を向上し、ユーザーの注目を引く強力な手法となります。
特に、React を使用している場合、アニメーションの実装は超簡単です。

本記事では、React アプリケーションで画像を滑らかに拡大・縮小・バウンスさせるための手順をご紹介します。
React アニメーションライブラリ、react-spring を使用します。
このライブラリは物理ベースのアニメーションを生成します。
そのため、非常に自然な動きを実現できます。

このガイドは、React の基本的な知識を持っている方を対象としています。
まだ経験が浅い方でも、具体的なコードサンプルと詳細な説明により、アニメーションを実装するための具体的な手順を理解できるかと思います。

次の章では、まず react-spring とは何かについて説明します。
その後、具体的な実装手順を解説します。

react-spring とは何か?

react-spring は、React アプリケーション向けの強力なアニメーションライブラリです。
その名の通り、このライブラリは”spring”(”ばね”)の物理モデルに基づいてアニメーションを生成します。
これによって、自然で流れるようなアニメーションが実現可能になります。

react-spring の特徴

特徴は次の通りです。

  1. 物理ベースのアニメーション:
    • react-spring は、ばね物理モデルに基づいて動きを生成します
    • これによって、CSS のトランジションやアニメーションよりも自然で滑らかな動きを作り出すことができます
  2. パフォーマンス:
    • react-spring は、Webアニメーションのパフォーマンスに重点を置いて設計されています
    • アニメーションの各フレームは、毎秒 60 フレームの速度で更新され、ブラウザのリフレッシュレートと同期します
    • これによって、アニメーションは非常にスムーズに見えます
  3. API の柔軟性:
    • react-spring は、さまざまな API を提供しています
    • これによって、開発者は自分のニーズに合わせて、独自のアニメーションを作成することができます
    • 基本的なトランジションから、高度な物理ベースのアニメーションまで、ほとんど何でも実装することが可能です

react-spring を使用すると、Web アプリケーションに対して、UX を豊かにする、見た目の美しいアニメーションを追加することが可能になります。

react-spring の実装例を見てみよう

ここで、実際に画像にアニメーションを追加した際の動きを確認してみましょう。

そっしーの足跡_そっしーの開拓地の切り抜き_YouTube_チャンネル_KUDs
そっしーの足跡_そっしーの開拓地の切り抜き_YouTube_チャンネル_KUDs

こちらのアニメーションでは、画像の拡大、縮小、バウンドを行っております。
バネの物理モデルに基づくため、よりリアルな動きが実現できます。

GIF 動画の画質とフレームレートを低下させているため伝わりにくいかもしれませんが、非常に滑らかな動きです。
実際のアニメーションを確認したい方は、弊サイトを覗いてみてください。
どれほど滑らかか、ご確認いただけるかと思います。

そっしーの足跡 | そっしーの開拓地の切り抜き YouTube チャンネル | KUDs
KUDs が運営する、そっしーの切り抜きチャンネルです。そっしーは、ゲーム生配信、雑談ライブ、キャンプ動画、グッツ販売等、様々な活動を行っております。

次の章では、具体的な実装方法について見ていきましょう。

環境設定

この章では、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 を指定し、よりリアルな(バネっぽい)アニメーションを実装することが可能です。
是非、色々試してみてください。
以下の公式ドキュメントも参考になるかと思います。

Spring Configs | React Spring
An advanced guide to the configs of Controllers, Components & SpringValues in React Spring.

カスタムフックを用いた画像エフェクトの繰り返し

前述の基本的なアニメーションでは、特定の状態から別の状態へ一回のみ遷移します。
しかし、画像を周期的に拡大・縮小・バウンスさせるためには、アニメーションが終わったら再度始まるような、繰り返しの動作を実装する必要があります。

カスタムフック 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 フックは fromtoconfig の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 カスタムフックの作成とその適用方法です。
このカスタムフックを利用、簡単に周期的なアニメーションを実装することができます。

「そもそもカスタムフックが良くわからない」という方へ。
是非、以下の公式ドキュメントもご参照ください。

Reusing Logic with Custom Hooks – React
The library for web and native user interfaces

さいごに

この記事では、react-spring を組み合わせて画像を滑らかに拡大・縮小し、バウンスさせる方法を解説しました。
アニメーションは UX を向上させる重要な要素です。
react-spring を使えば簡単に実装できるので、是非試してみてください。

以下は、本記事の内容のおさらいです。

  • まず、react-spring とその基本的な仕組みについて説明しました。
  • それから、react-spring のインストール及び設定方法を確認しました。
  • 次に、useOscillation というカスタムフックを作成しました。
  • 最後に、そのカスタムフックを使用して、周期的なアニメーションを実装しました。

以上です。

最後にもう一度、react-spring で実装したアニメーションを再掲します。

そっしーの足跡_そっしーの開拓地の切り抜き_YouTube_チャンネル_KUDs
そっしーの足跡_そっしーの開拓地の切り抜き_YouTube_チャンネル_KUDs
そっしーの足跡 | そっしーの開拓地の切り抜き YouTube チャンネル | KUDs
KUDs が運営する、そっしーの切り抜きチャンネルです。そっしーは、ゲーム生配信、雑談ライブ、キャンプ動画、グッツ販売等、様々な活動を行っております。

コメント