ReactSpringでアニメーションReactアプリを作成する方法

序章

アニメーションは、アプリケーションに活気を与え、全体的なユーザーエクスペリエンスを向上させます。 React Spring は、コアアニメーションでスプリングのような物理演算を使用して、簡単に構成できるようにするアニメーションパッケージです。スプリングは累積的です。つまり、スプリングには渡されたすべての値が記憶されます。

Springを使用すると、次のことができます。

測定単位から実際のデータまでの値を操作します。
HTML属性を操作します。
SVGパスを操作します。
CSSを調整します。

このチュートリアルでは、react-springのSpringコンポーネントを使用して、Reactアプリでスライディングとフェードのアニメーションを作成します。

ステップ1—プロジェクトの構成

create-react-appコマンドでReact環境をセットアップします。これにより、開始できる定型コードも生成されます。これをインストールするには、次のコマンドを実行します。

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—スタイルのアニメーション化

春はスタイルをアニメーション化するために使用できます。この例では、これを使用して、新しくロードされたページへの遷移をアニメーション化します。これを行うには、App.jsのjsxコンテキストをSpringコンポーネントでラップします。

Springコンポーネントは、fromとtoの2つの小道具を取ります。これらは、アニメーションによって補間される値を表します。

この例では、ページが上からドロップダウンしてフェードインするような効果を作成します。 create-react-appによって生成されたボイラープレートは、この効果を示すのに最適な背景を持っているため、今のところ変更する必要はありません。

ドロップ効果を実現するために、ページ要素の最初の上部マージンは負の値に設定され、アニメーション中に0になります。フェードイン効果を作成するには、不透明度の初期値を0に設定し、アニメーションの最後でその値を1にします。

App.jsファイルは次のようになります。

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を使用して、画面に表示されるコンテンツの値をアニメーション化することもできます。これを示すために、Springを使用して0で始まり、10で終わるカウンターを作成します。 fromは初期値を保持し、toは表示される最終値を保持します。

srcディレクトリの下に、componentsというフォルダを作成します。そのディレクトリに、Counter.jsxというファイルを作成します。次のコードをCountrt.jsxに追加します。

src / components / 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にインポートし、ヘッダー要素の下に追加して、アプリでレンダリングします。

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プロップをミリ秒単位の値として追加して、アニメーションを遅らせることができます。これは、アニメーションが開始するまで待機する時間です。

1秒の遅延を追加すると、カウンター関数は次のようになります。

src / components / Countrt.jsx

const counter = () => (
    <Spring
        from={{ number: 0 }}
        to={{ number: 10 }}
        delay= '1000'>
        {props => <div>{props.number.toFixed()}</div>}
    </Spring>
)

ページアニメーションが完了した後、カウンターが開始するようになりました。この遅延は、configプロペラを介して追加することもできます。これについては、Springの構成について説明します。

ステップ4—スプリングの調整`config`

前述のように、Springsは物理ベースです。これは、期間と曲線を手動で処理する必要がないことを意味します。これは、カバーしなければならない可能性のある重い数学の一部を取り除くので役立ちます。ただし、configプロパティを使用して、張力、摩擦、遅延、質量、およびその他の動作を微調整することにより、スプリングの動作を調整できます。

react-springには、スプリングを微調整するために使用できるプリセットが含まれています。それらを使用するには、react-springパッケージからconfigをインポートし、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によって提供される高張力および摩擦のプリセットです。プリセットは通常、OutSpringのtensionおよびfrictionプロパティを定義します。これらのプリセットには、molasses、default、slow、stiff、およびwobblyが含まれます。

プリセットは張力と摩擦のみを定義しますが、Springアニメーションの他のプロパティを手動で構成できます。いくつかの例には、遅延、質量、速度、および期間が含まれます。構成できるプロパティの完全なリストと、小道具として渡すことができる他のオプションについては、このページを確認してください。

ステップ5—フックを使用した使用法の調査

Reactチームは最近Reactフックを導入しました。 React Hooksを使用すると、データを永続的に保存して効果を引き起こすことができる機能コンポーネントを作成できます。これにより、機能コンポーネントに状態が追加されます。この記事の執筆時点では、フックはReact 16.7 alphaでのみ使用できます。フックを使用するには、reactおよびreact-domの16.7アルファバージョンにアップグレードする必要があります。

これを行うには、次のコマンドを実行します。

yarn remove react-dom && yarn add [email protected]

yarn remove react && yarn add [email protected]

react-springを使用すると、すぐに使用できるフックを使用できます。これにより、useSpringというフックがエクスポートされます。このフックを使用すると、データを定義および更新でき、通常、小道具として渡すのと同じ値で構成されます。 useSpringはそれをアニメーションデータに変換します。これを紹介するために、前のアニメーションが完了した後に、より多くのテキストをレンダリングする方法を見てみましょう。

Hooks.jsxという名前の新しいコンポーネントファイルを作成し、次のコードを追加します。

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アプリケーションをアニメーション化する効果的な手段を提供します。

react-springの他のコンポーネントを使用して、Spring上に構築できます。全体として、react-springには、アニメーションのニーズに応じてさまざまなオプションが含まれています。