React-Lottieを使用してReactアプリにアニメーションを追加する方法

投稿日: 2022-04-20 2022-04-20
タグ: Development, React

序章

Adobe After Effectsは、Webアニメーションを直感的に生成する方法ですが、これまで、これらのアニメーションをWebアプリに変換する際に問題が発生していました。通常、After Effectsからアニメーションをインポートするには、サードパーティのプログラムを使用する必要があります。

そのようなプログラムの1つが、AirbnbDesignによって開発されたLottieです。これにより、これらのアニメーションを軽量で柔軟な形式でリアルタイムに使用できます。 Lottieは、Bodymovinと呼ばれるAfter Effects拡張機能からJSONデータを取得し、それをWebで使用可能なアニメーションに変換します。

Animated image of a dot traveling across the stylized Lottie logo as it is drawn with flourishes.

この記事では、Lottieを使用してReactアプリケーションにアニメーションを追加する方法について説明します。これを実現するために、react-lottieというnpmパッケージを使用して、BodymovinによってエクスポートされたJSONファイルから表示可能なアニメーションを生成します。

注：アプリ側に焦点を当てるため、After Effectsでこれらのアニメーションがどのように作成されるかについては説明しませんが、でデザイナーが作成してオープンソース化したアニメーションを使用します。 LottieFiles。使用したいAfterEffectsのアニメーションがある場合は、AfterEffects用のBodymovinプラグインを使用してJSONにエクスポートできます。

このチュートリアルでは、2種類のロッティで構成されるReactアプリケーションを作成します。1つは通常のもので、もう1つは状態の特定の値に応じてアニメーションが制御されます。

Static image of the two animations side-by-side.

完成したコードを確認したい場合は、このCodeSandboxの例をご覧ください。

前提条件

このチュートリアルを完了するには、次のものが必要です。

Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。

LottieFilesからLottieJSONファイルをダウンロードするには、無料のアカウントを作成する必要があります。

このチュートリアルは、ノードv14.4.0、npm v6.14.4、react v16.13.1、およびreact-lottiev1.2.3で検証されました。

ステップ1—プロジェクトの設定

create-react-appを使用してアプリを作成します。

npx create-react-app lottie-demo

これにより、アプリの定型コードが作成され、React開発環境が構成されます。 lottie-demoディレクトリを開き、コーディングを始めましょう。

cd lottie-demo

それでは、依存関係react-lottieをインストールしましょう。これを行うには、ターミナルで次のコマンドを実行します。

npm install react-lottie

それでは、アニメーションを追加しましょう。

ステップ2—サンプルロットのダウンロード

サンプルアニメーションはLottieFilesから取得します。そのサイトに移動して、無料のアカウントを作成します。

Screenshot of the LottieFiles landing page.

LottieFilesを使用すると、世界中のデザイナーが作成したアニメーションの厳選されたライブラリにアクセスできます。また、独自のアニメーションをテスト、アップロード、および共有するためのプラットフォームも提供します。

Screenshot of the LottieFiles menu.

アニメーションを参照し、必要に応じて設定を微調整し、満足のいく結果が得られたら、[JSONのダウンロード]をクリックしてアニメーションを取得します。

アプリケーションのsrcディレクトリ内に、lottiesサブディレクトリを作成します。ダウンロードしたJSONファイルをlottiesディレクトリ内に配置します。

これで、これらのアニメーションを表示するコンポーネントを作成する準備が整いました。

ステップ3—管理されていないロットの作成

アニメーションは、自由に実行したり、状態のデータによって操作したりすることができます。まず、最初のケースを見て、ロッティをインポートしてレンダリングするアニメーションを作成しましょう。

アプリケーションのsrcディレクトリ内に、componentsサブディレクトリを作成します。

componentsディレクトリ内にUncontrolledLottie.jsxというファイルを作成し、その中に次のコードを配置します。

src / components / UnmanagedLottie.jsx

import React, { Component } from 'react';
import Lottie from 'react-lottie';
import animationData from '../lotties/4203-take-a-selfie.json';

class UncontrolledLottie extends Component {
  render() {
    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
      },
    };

    return (
      <div>
        <h1>Lottie</h1>
        <p>Base animation free from external manipulation</p>
        <Lottie
          options={defaultOptions}
          height={400}
          width={400}
        />
      </div>
    );
  }
}

export default UncontrolledLottie;

この場合、4204-take-a-selfie.jsonはダウンロードされたLottieのJSONファイルです。そのファイルを、ダウンロードした画像に置き換えます。

それでは、構成で提供される情報を調べてみましょう。 optionsプロップをLottieコンポーネントに渡すことに気付くでしょう。これには、レンダリングされるアニメーションの構成データが含まれています。これは次のもので構成されます。

animationData-エクスポートされたアニメーションデータ（この場合はJSONファイル）を含むオブジェクト
autoplay-準備ができたらすぐに再生を開始するかどうかを決定するブール値
loop-アニメーションを繰り返すかどうか、またはアニメーションを何回繰り返すかを決定するブール値または数値
rendererSettings-レンダラーの構成データ

これらは、提供できるオプションのほんの一部です。

また、Lottieの小道具として、アニメーションの寸法（widthおよびheight）も提供しています。

それでは、制御されたロッティを追加しましょう。

ステップ4—管理されたロットの作成

Reactでロットを操作して、状態のデータを使用してプロパティの一部を変更できます。この例では、Lottieのアニメーションを制御するためのボタンを作成します。

componentsでファイルを作成し、ControlledLottie.jsxという名前を付けましょう。そのファイルに次のコードを配置します。

src / components / ControlledLottie.jsx

import React, { Component } from 'react';
import Lottie from 'react-lottie';
import animationData from '../lotties/77-im-thirsty.json';

class ControlledLottie extends Component {
  state = { isStopped: false, isPaused: false };

  render() {
    const buttonStyle = {
      display: 'inline-block',
      margin: '10px auto',
      marginRight: '10px',
      border: 'none',
      color: 'white',
      backgroundColor: '#647DFF',
      borderRadius: '2px',
      fontSize: '15px',
    };

    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
      },
    };

    return (
      <div className="controlled">
        <h1>Controlled Lottie</h1>
        <p>Uses state manipulation to start, stop and pause animations</p>
        <Lottie
          options={defaultOptions}
          height={400}
          width={400}
          isStopped={this.state.isStopped}
          isPaused={this.state.isPaused}
        />
        <button
          style={buttonStyle}
          onClick={() => this.setState({ isStopped: true })}
        >
          Stop
        </button>
        <button
          style={buttonStyle}
          onClick={() => this.setState({ isStopped: false, isPaused: false })}
        >
          Play
        </button>
        <button
          style={buttonStyle}
          onClick={() => this.setState({ isPaused: !this.state.isPaused })}
        >
          Pause
        </button>
      </div>
    );
  }
}

export default ControlledLottie;

このコードを分析してみましょう。これとUncontrolledLottie.jsxの間にはいくつかの重要な違いがあります。下部に3つのボタンとそのスタイルを追加しました。これらのボタンは、状態のデータの値を切り替えるために使用されます。

Lottieコンポーネントには、さらに2つの小道具があります。

isStopped-アニメーションがアクティブかどうかを示すブール値
isPaused-アニメーションが一時停止されているかどうかを示すブール値

これで両方のアニメーションを使用できるようになったので、それらをApp.jsにインポートして、アプリに表示してみましょう。

App.jsのコードを編集し、コンポーネントをインポートして、レンダリング関数内に追加します。

App.js

import React, { Component } from 'react';
import './App.css';
import UncontrolledLottie from './components/UncontrolledLottie';
import ControlledLottie from './components/ControlledLottie';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>REACT LOTTIES</h1>
        <div className="lotties">
          <UncontrolledLottie />
          <ControlledLottie />
        </div>
      </div>
    );
  }
}

export default App;

モバイルレスポンシブになるようにアプリのスタイルを設定しましょう。これは、CSSグリッドを使用して実行できます。 App.cssファイルに次のコードを追加します。

App.css

.lotties {
  display: grid;
  grid-template-columns: auto;
}

@media only screen and (min-width: 800px) {
  .lotties {
    display: grid;
    grid-template-columns: auto auto;
  }
}

これにより、ロットが2列に配置され、幅の狭いデバイスでは1列に縮小されます。

次に、アプリケーションを起動します。

npm start

ブラウザが開き、2つのアニメーションがアクティブになっていることを確認できます。

制御されていないロッティは自動再生されます：

Screenshot of the UncontrolledLottie displaying the image of a selfie.

Controlled Lottieには、次の3つのボタンがあります。

Screenshot of the ControlledLottie displaying the image of a drink.

一時停止をクリックすると、制御されたアニメーションが現在のフレームでフリーズします。 Stop をクリックすると、アニメーションがデフォルトの位置に戻り、そのまま保持されます。

結論

Lottieは、Webアプリにアニメーションを追加するための軽量な方法として使用できます。これを使用して、アプリケーションをよりインタラクティブにし、特定のプロセスの状態を示すアニメーションのように、視覚的に魅力的なフィードバックを提供できます。ロットはパフォーマンスが高く、アプリケーションに大きな負荷をかけることはありません。

getdocs

8677