React-Lottieを使用してReactアプリにアニメーションを追加する方法
序章
Adobe After Effectsは、Webアニメーションを直感的に生成する方法ですが、これまで、これらのアニメーションをWebアプリに変換する際に問題が発生していました。 通常、After Effectsからアニメーションをインポートするには、サードパーティのプログラムを使用する必要があります。
そのようなプログラムの1つが、AirbnbDesignによって開発されたLottieです。 これにより、これらのアニメーションを軽量で柔軟な形式でリアルタイムに使用できます。 Lottieは、Bodymovinと呼ばれるAfter Effects拡張機能からJSONデータを取得し、それをWebで使用可能なアニメーションに変換します。
この記事では、Lottieを使用してReactアプリケーションにアニメーションを追加する方法について説明します。 これを実現するために、react-lottie
というnpmパッケージを使用して、BodymovinによってエクスポートされたJSONファイルから表示可能なアニメーションを生成します。
注:アプリ側に焦点を当てるため、After Effectsでこれらのアニメーションがどのように作成されるかについては説明しませんが、でデザイナーが作成してオープンソース化したアニメーションを使用します。 LottieFiles。 使用したいAfterEffectsのアニメーションがある場合は、AfterEffects用のBodymovinプラグインを使用してJSONにエクスポートできます。
このチュートリアルでは、2種類のロッティで構成されるReactアプリケーションを作成します。1つは通常のもので、もう1つは状態の特定の値に応じてアニメーションが制御されます。
完成したコードを確認したい場合は、このCodeSandboxの例をご覧ください。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
LottieFilesからLottieJSONファイルをダウンロードするには、無料のアカウントを作成する必要があります。
このチュートリアルは、ノードv14.4.0、npm
v6.14.4、react
v16.13.1、およびreact-lottie
v1.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から取得します。 そのサイトに移動して、無料のアカウントを作成します。
LottieFilesを使用すると、世界中のデザイナーが作成したアニメーションの厳選されたライブラリにアクセスできます。 また、独自のアニメーションをテスト、アップロード、および共有するためのプラットフォームも提供します。
アニメーションを参照し、必要に応じて設定を微調整し、満足のいく結果が得られたら、[JSONのダウンロード]をクリックしてアニメーションを取得します。
アプリケーションのsrc
ディレクトリ内に、lotties
サブディレクトリを作成します。 ダウンロードしたJSONファイルをlotties
ディレクトリ内に配置します。
これで、これらのアニメーションを表示するコンポーネントを作成する準備が整いました。
ステップ3—管理されていないロットの作成
アニメーションは、自由に実行したり、状態のデータによって操作したりすることができます。 まず、最初のケースを見て、ロッティをインポートしてレンダリングするアニメーションを作成しましょう。
アプリケーションのsrc
ディレクトリ内に、components
サブディレクトリを作成します。
components
ディレクトリ内にUncontrolledLottie.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
という名前を付けましょう。 そのファイルに次のコードを配置します。
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
のコードを編集し、コンポーネントをインポートして、レンダリング関数内に追加します。
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
ファイルに次のコードを追加します。
.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つのアニメーションがアクティブになっていることを確認できます。
制御されていないロッティは自動再生されます:
Controlled Lottieには、次の3つのボタンがあります。
一時停止をクリックすると、制御されたアニメーションが現在のフレームでフリーズします。 Stop をクリックすると、アニメーションがデフォルトの位置に戻り、そのまま保持されます。
結論
Lottie
は、Webアプリにアニメーションを追加するための軽量な方法として使用できます。 これを使用して、アプリケーションをよりインタラクティブにし、特定のプロセスの状態を示すアニメーションのように、視覚的に魅力的なフィードバックを提供できます。 ロットはパフォーマンスが高く、アプリケーションに大きな負荷をかけることはありません。