ReactSpringでアニメーションReactアプリを作成する方法
序章
アニメーションは、アプリケーションに活気を与え、全体的なユーザーエクスペリエンスを向上させます。 React Spring は、コアアニメーションでスプリングのような物理演算を使用して、簡単に構成できるようにするアニメーションパッケージです。 スプリングは累積的です。つまり、スプリングには渡されたすべての値が記憶されます。
Springを使用すると、次のことができます。
- 測定単位から実際のデータまでの値を操作します。
- HTML属性を操作します。
- SVGパスを操作します。
- CSSを調整します。
このチュートリアルでは、Reactアプリでスライディングとフェードのアニメーションを作成します。 Spring のコンポーネント react-spring.
ステップ1—プロジェクトの構成
React環境を次のように設定します create-react-app 指図。 これにより、開始できる定型コードも生成されます。 これをインストールするには、次のコマンドを実行します。
- npm install -g create-react-app
これで、これを使用してアプリを作成できます。
- create-react-app react-spring-demo
名前の付いたフォルダ react-spring-demo 作成されます。 そのディレクトリに移動し、をインストールします react-spring パッケージ：
- yarn add react-spring
このプロジェクトのパッケージマネージャーとしてyarnを使用していることに気付くでしょう。これは、のデフォルトのパッケージマネージャーであるためです。 create-react-app. 次のコマンドでインストールされていることを確認します。
- npm install -g yarn
これで設定が完了したので、最初のアニメーションページを作成する準備が整いました。
ステップ2—スタイルのアニメーション化
春はスタイルをアニメーション化するために使用できます。 この例では、これを使用して、新しくロードされたページへの遷移をアニメーション化します。 これを行うには、ラップします jsx のコンテキスト App.js で Spring 成分。
Springコンポーネントは2つの小道具を取ります。 from と to、アニメーションによって補間される値を表します。
この例では、ページが上からドロップダウンしてフェードインするような効果を作成します。 によって生成されたボイラープレート create-react-app この効果を示すのに最適な背景があるため、今のところ変更する必要はありません。
ドロップ効果を実現するために、ページ要素の最初の上部マージンは負の値に設定され、 0 アニメーション中。 フェードイン効果を作成するには、不透明度の初期値を次のように設定します。 0 そしてその価値を 1 アニメーションの最後に。
これは何ですか App.js ファイルは次のようになります。
//
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Spring } from 'react-spring';
class App extends Component {
render() {
return (
<Spring from={{ opacity: 0, marginTop: -1000 }} to={{ opacity: 1, marginTop: 0 }}>
{ props => (
<div className="App" style={ props }>
<div >
<header className="App-header" >
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
</div>
)
}
</Spring>
);
}
}
export default App;
このコマンドを実行して、アプリケーションを起動します。
- yarn start
ブラウザが開き、希望のドロップインとフェードインのアニメーションでページが読み込まれるのがわかります。
使用できます Spring さまざまなスタイルを調整して、さらに多くのアニメーションを作成します。 アプリを明るく保つために、不透明度と平行移動のアニメーション化に固執することをお勧めします。
ステップ3—アニメーション innerText
Springを使用して、画面に表示されるコンテンツの値をアニメーション化することもできます。 これを示すために、で始まるカウンターを作成します 0 で終了します 10 春を使用します。 from 初期値を保持し、 to 表示される最終値を保持します。
下 src ディレクトリ、というフォルダを作成します components. そのディレクトリに、というファイルを作成します Counter.jsx. 次のコードをに追加します Countrt.jsx:
import React from 'react';
import { Spring } from'react-spring';
const counter = () => (
<Spring
from={{ number: 0 }}
to={{ number: 10 }}
{props => <div>{props.number.toFixed()}</div>}
</Spring>
)
export default counter;
カウンターをにインポートします App.js ヘッダー要素の下に追加して、アプリでレンダリングします。
...
import Counter from './components/Counter';
class App extends Component {
render() {
return (
<Spring from={{ opacity: 0, marginTop: -1000 }} to={{ opacity: 1, marginTop: 0 }}>
{ props => (
<div className="App" style={ props }>
<div >
<header className="App-header" >
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<Counter />
</header>
</div>
</div>
)
}
</Spring>
);
}
}
export default App;
ブラウザを開くと、下のカウンターに気付くでしょう。 Learn React 文章：
アニメーションはすぐに発生するため、最初のページがアニメーションで表示されている間、アニメーションが表示されません。 これを修正するには、を追加してアニメーションを遅らせることができます delay ミリ秒単位の値としてのprop。 これは、アニメーションが開始するまで待機する時間です。
1秒の遅延を追加すると、カウンター関数は次のようになります。
const counter = () => (
<Spring
from={{ number: 0 }}
to={{ number: 10 }}
delay= '1000'>
{props => <div>{props.number.toFixed()}</div>}
</Spring>
)
ページアニメーションが完了した後、カウンターが開始するようになりました。 この遅延を追加することもできます config スプリング構成について説明するときに説明する小道具。
ステップ4—スプリングの調整 config
前述のように、Springsは物理ベースです。 これは、期間と曲線を手動で処理する必要がないことを意味します。 これは、カバーしなければならない可能性のある重い数学の一部を取り除くので役立ちます。 ただし、張力、摩擦、遅延、質量、およびその他の動作を調整することで、スプリングの動作を調整できます。 config 財産。
react-spring スプリングを微調整するために使用できるプリセットが含まれています。 それらを使用するには、インポートする必要があります config から react-spring パッケージ化して、 config 春の財産。 混乱を防ぐため config これは、この例を見てください：
import React from 'react';
import { Spring, config } from'react-spring';
const counter = () => (
<Spring
from={{ number: 0 }}
to={{ number: 10 }}
delay= '1000'
config = { config.molasses }>
{props => <div>{props.number.toFixed()}</div>}
</Spring>
)
export default counter;
上記の例では、 molasses プリセット。 これは、によって提供される高張力および摩擦のプリセットです。 react-spring. プリセットは通常、 tension と friction 春の外のプロパティ。 これらのプリセットには次のものが含まれます molasses, default, slow, stiff と wobbly.
プリセットは張力と摩擦のみを定義しますが、Springアニメーションの他のプロパティを手動で構成できます。 いくつかの例には、遅延、質量、速度、および期間が含まれます。 構成できるプロパティの完全なリストと、小道具として渡すことができる他のオプションについては、このページを確認してください。
ステップ5—フックを使用した使用法の調査
Reactチームは最近Reactフックを導入しました。 React Hooksを使用すると、データを永続的に保存して効果を引き起こすことができる機能コンポーネントを作成できます。これにより、機能コンポーネントに状態が追加されます。 この記事の執筆時点では、フックはでのみ利用可能です React 16.7 alpha. フックを使用するには、16.7アルファバージョンにアップグレードする必要があります react と react-dom.
これを行うには、次のコマンドを実行します。
- yarn remove react-dom && yarn add [email protected]
- yarn remove react && yarn add [email protected]
箱から出してすぐにフックを使用できます react-spring、と呼ばれるフックをエクスポートします useSpring. このフックを使用すると、データを定義および更新でき、通常、小道具として渡すのと同じ値で構成されます。 useSpring それをアニメーションデータに変換します。 これを紹介するために、前のアニメーションが完了した後に、より多くのテキストをレンダリングする方法を見てみましょう。
と呼ばれる新しいコンポーネントファイルを作成します Hooks.jsx 次のコードを追加します。
import React from 'react';
import { useSpring, animated } from 'react-spring';
const HookedComponent = () => {
const [props] = useSpring({
opacity: 1,
color: 'white',
from: { opacity: 0 },
delay: '2000'
})
return <animated.div style={props}>This text Faded in Using hooks</animated.div>
}
export default HookedComponent;
このコードは、引数のオブジェクトとしてスプリング設定をに渡します useSpring. 次に、これらの値を animated アニメーション化された春を作成する要素。 遅延はに設定されます 2000 カウンターが終了した後、フックされたコンポーネントからのテキストがフェードインすることを保証するためのミリ秒。
これをにインポートしましょう App.js を使用します HookedComponent 私たちのアプリで。 からの初期ボイラープレートコードの一部をクリーンアップした後 create-react-app. 最終的なアプリケーションを起動して、変更を確認します。
結論
これで、トライアルアプリケーションを設定しました react-spring. Springは、開発者から大量のワークロードを取り除きながら、Reactアプリケーションをアニメーション化する効果的な手段を提供します。
を使用してSpring上に構築できます react-springのその他のコンポーネント。 全体、 react-spring アニメーションのニーズに応じて、さまざまなオプションが含まれています。
