React-Lottieを使用してReactアプリにアニメーションを追加する方法
序章
Adobe After Effectsは、Webアニメーションを生成するための直感的な方法ですが、歴史的に、これらのアニメーションをWebアプリに変換する際に問題が発生していました。 通常、After Effectsからアニメーションをインポートするには、サードパーティのプログラムを使用する必要があります。
そのようなプログラムの1つが、AirbnbDesignによって開発されたLottieです。 これらのアニメーションを軽量で柔軟な形式でリアルタイムに使用できます。 Lottieは、Bodymovinと呼ばれるAfter Effects拡張機能からJSONデータを取得し、それをWebで使用可能なアニメーションに変換します。
この記事では、Lottieを使用してReactアプリケーションにアニメーションを追加する方法について説明します。 これを実現するために、npmパッケージを使用します。 react-lottie BodymovinによってエクスポートされたJSONファイルから表示可能なアニメーションを生成します。
注：アプリ側に焦点を当てるため、After Effectsでこれらのアニメーションがどのように作成されるかについては説明しませんが、でデザイナーが作成してオープンソース化したアニメーションを使用します。 LottieFiles。 使用したいAfterEffectsのアニメーションがある場合は、AfterEffects用のBodymovinプラグインを使用してJSONにエクスポートできます。
このチュートリアルでは、2種類のロッティで構成されるReactアプリケーションを構築します。1つは通常のもので、もう1つは状態の特定の値に応じてアニメーションが制御されます。
完成したコードを確認したい場合は、このCodeSandboxの例をご覧ください。
前提条件
このチュートリアルを完了するには、次のものが必要です。
- Node.jsはローカルにインストールされます。これは、Node.jsのインストール方法とローカル開発環境の作成に従って実行できます。
LottieFilesからLottieJSONファイルをダウンロードするには、無料のアカウントを作成する必要があります。
このチュートリアルは、Nodev14.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 サブディレクトリ。
というファイルを作成します UncontrolledLottie.jsx 中 components ディレクトリを作成し、その中に次のコードを配置します。
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-レンダラーの構成データ
これらは、提供できるオプションのほんの一部です。
寸法もご用意しております（width と height）小道具としてのアニメーションの Lottie.
それでは、制御されたロッティを追加しましょう。
ステップ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、コンポーネントをインポートして、render関数内に追加します。
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アプリにアニメーションを追加するための軽量な方法として使用できます。 これを使用して、アプリケーションをよりインタラクティブにし、特定のプロセスの状態を示すアニメーションのように、視覚的に魅力的なフィードバックを提供できます。 ロットはパフォーマンスが高く、アプリケーションに大きな負荷をかけることはありません。
