反応スプリングを理解する

React Animationの実装は、常に開発の困難なポイントでした。この記事では、反応がわかりやすい方法で反応スプリングを紹介し、いくつかの実用的なアプリケーションのケースを調査します。 React-SpringはReactの唯一のアニメーションライブラリではありませんが、最も人気があり強力なライブラリの1つです。

この記事では、最新の9.xバージョン（執筆時点で候補バージョンをリリース）を使用します。この記事を読む時点で正式に公開されていない場合は、 react-spring@next使用してインストールしてください。私の経験とメインメンテナーによると、コードは非常に安定しています。私が抱えていた唯一の問題は、GitHubリポジトリで追跡できるConcurrencyモードで使用する場合の小さなエラーです。

反応スプリングクイックルック

実際のアプリケーションケースを掘り下げる前に、スプリング、ハイアニメーション、トランジションアニメーションを簡単に見てみましょう。このセクションの最後に実行可能なデモンストレーションが提供されるため、プロセス中に遭遇する可能性のある混乱を心配する必要はありません。

スプリング

アニメーションの古典的な「Hello World」：The Fading In and Out of Contentを考えてみましょう。一時停止して、アニメーションなしで表示して隠すために切り替える方法について考えてみましょう。このように見えます：

デフォルトのfunction app（）をエクスポート{{
  const [show show、setshowing] = uesestate（false）;
  戻る （
    <div>
      <div style="{{" opacity: showing :>
        このコンテンツはフェードインしてフェードアウトします
      </div>
      <button onclick="{()"> SetShowing（val =>！val）}>トグル</button>
      <hr>
    </div>
  ）;
}

シンプルですが、退屈です。変化を不透明度をどのようにアニメーション化しますか？上記のように、状態に基づいて希望の不透明度を宣言的に設定できたらいいのではないでしょうか。これがReact-Springが行うことです。 React-springは、私たちの絶えず変化するスタイルの値を処理する仲介者と見なすことができ、その結果、私たちが望むアニメーション値間のスムーズな遷移が生じます。このような：

 const [showa、setshowa] = uesestate（false）;

const fadestyles = useSpring（{
  config：{... config.stiff}、
  from：{不透明：0}、
  に： {
    不透明：showa？ 1：0
  }
}）;

最初のスタイル値を指定し、現在の状態に従ってtoの現在の値を指定するためfrom使用します。返品値fadeStylesは、コンテンツに適用される実際のスタイル値が含まれています。最後のことをする必要があります...

あなたはこれを行うことができると思うかもしれません：

<div style="{fadeStyles}">
  ...
</div>

しかし、これはうまくいきません。通常のdivを使用することはできませんが、 animatedエクスポートから作成されたReact-Spring divを使用する必要があります。これは紛らわしいように聞こえるかもしれませんが、実際には次のことを意味します。

<animated.div style="{fadeStyles}">
  ...
</animated.div>

それでおしまい。

非常にアニメーション

私たちがアニメーション化しているものに応じて、周囲のコンテンツがスムーズに調整して流れるように、高さからフルサイズまで、コンテンツを上下にスライドさせたい場合があります。上記のコードを単純にコピーできるようにしたい場合があります。高さはゼロから自動に変化しますが、残念ながら、自動高さにアニメーション化することはできません。これは、通常のCSSとReact-springの両方で機能します。代わりに、コンテンツの実際の高さを知り、スプリングのtoで指定する必要があります。

その価値を反応スプリングに渡すために、コンテンツの高さを動的に取得する必要があります。 Webプラットフォームは、これに特化したものを設計していることがわかります： ResizeObserver 。そして、そのサポートは実際にはかなり良いです！ Reactを使用しているので、もちろん使用をフックに包みます。私のフックは次のように見えます：

エクスポート関数useheight（{on = true / * no value on * /} = {} any）{
  const ref = useref<any> （）;
  const [height、set] = uesestate（0）;
  const heightref = useref（height）;
  const [ro] = uesestate（
    （）=>
      new ResizeObserver（packet => {
        if（ref.current && heightref.current！== ref.current.offsetheight）{
          heightref.current = ref.current.offsetheight;
          set（ref.current.offsetheight）;
        }
      }）
  ）;
  uselayouteffect（（）=> {
    if（on && ref.current）{
      set（ref.current.offsetheight）;
      ro.observe（ref.current、{}）;
    }
    return（）=> ro.disconnect（）;
  }、[on、ref.current]）;
  return [ref、height and Any];
}</any>

測定関数の有効化と無効化を切り替えるためのonを提供することを選択できます（これは後で役立ちます）。正しいon 、私たちは私たちのコンテンツを観察するようにResizeObserverに伝えます。現在の高さと同様に、測定したいものに適用する必要があるREFを返します。

それが実際にどのように機能するか見てみましょう。

 const [heightref、height] = useheight（）;
const slideinStyles = useSpring（{
  config：{... config.stiff}、
  from：{不透明：0、高さ：0}、
  に： {
    不透明：ショーブ？ 1：0、
    高さ：ショーブ？高さ：0
  }
}）;

<animated.div style="{{" ...slideinstyles overflow:>
  <div ref="{heightRef}">
    このコンテンツはフェードインし、スライドでフェードアウトします
  </div>
</animated.div>

useHeight 、測定するrefの高さの値と、春に渡すコンテンツを提供します。次に、refを適用し、高さスタイルを適用します。

ああ、 overflow: hidden 。これにより、調整した高さ値を正しく含めることができます。

アニメーションの移行

最後に、アニメーションアイテムをDOMに追加し、AnimatedアイテムをDOMから削除する方法を見てみましょう。既存のプロジェクトをアニメーション化し、DOM内のアイテムの値の変更を維持する方法は既に知っていますが、アイテムの追加または削除をアニメーション化するには、新しいフック、 useTransition必要です。

以前にReact-Springを使用した場合、これは9.xバージョンのAPIに大きな変化がある数少ない場所の1つです。見てみましょう。

このようなプロジェクトリストをアニメーションするには：

 const [list、setList] = uesestate（[]）;

次のように、変換機能を宣言します。

 const listtransitions = usetransition（list、{
  config：config.gentle、
  from：{Opacity：0、transform： "translate3d（-25％、0px、0px）"}、
  入力：{Opacity：1、Transform： "translate3d（0％、0px、0px）"}、
  休暇：{不透明：0、高さ：0、変換： "translate3d（25％、0px、0px）"}、
  キー：list.map（（item、index）=> index）
}）;

前述したように、返品値listTransitions関数です。 React-Springは、リストアレイを追跡し、追加および削除されたアイテムを追跡しています。 listTransitions関数を呼び出して、単一のスタイルオブジェクトと単一のアイテムを受け入れるコールバック関数を提供し、React-Springは、アイテムが新しく追加された、新しく削除された、またはリストにあるかどうかに基づいて、リスト内の各アイテムに対してそれを呼び出し、正しいスタイルを使用します。

注意セクションに注意してください。これにより、リスト内のオブジェクトを認識する方法をReact-springに伝えることができます。この場合、アレイ内のアイテムのインデックスをReact-springに伝えて、アイテムを一意に定義することにしました。通常、これは悪い考えですが、今では、機能が実際にどのように機能するかを見ることができます。次のデモンストレーションでは、[プロジェクトの追加]ボタンは、クリックするとリストの最後にアイテムを追加し、最後のプロジェクトの削除ボタンは最近追加されたアイテムをリストから削除します。したがって、入力ボックスを入力して[追加]ボタンをすばやくクリックして[削除]ボタンをクリックすると、同じアイテムがスムーズに入力され、すぐにアニメーションの任意の段階から離れます。代わりに、アイテムを追加して削除ボタンをすばやく押してボタンを追加すると、同じアイテムがスライドを開始し、突然所定の位置に停止し、その場所に戻ります。

デモ

うわー、私はそんなに言った！これは、私たちがカバーしたばかりのすべてを示す実行可能なデモです。

[デモリンク]

その他の詳細

デモでコンテンツをスライドさせると、春のように跳ね返ることに気づきましたか？これは、名前の由来：React-SpringはSpring Physicsを使用して、絶えず変化する価値を補間します。値の変化を単にN等増分に分割するだけでなく、これらの増分をn等しい遅延内で適用します。代わりに、より複雑なアルゴリズムを使用して、この春のような効果を生成しますが、これはより自然に見えます。

スプリングアルゴリズムは完全に構成可能で、直接使用できるプリセットがいくつかあります。上記のデモでは、 stiff gentleプリセットを使用します。詳細については、ドキュメントを参照してください。

また、 translate3d値内で値をアニメーション化する方法にも注意してください。ご覧のとおり、構文は最も簡潔ではないため、React-Springはいくつかのショートカットを提供します。これにはドキュメントがありますが、この記事の残りの部分では、明確にするために完全な非シャートカット構文を引き続き使用します。

最後に、上記のデモでコンテンツをスライドさせると、その下のコンテンツが最後に少し叩かれているのを見るかもしれません。これは、同じバウンス効果によるものです。コンテンツがいつ所定の位置に跳ね返るかは明確に見えますが、コンテンツを上にスライドさせるときではありません。私たちがそれをオフにする方法にご期待ください。 （ネタバレ、それはclamp属性です）。

これらのサンドボックスに関するいくつかのメモ

コードサンドボックスはホットリロードを使用します。コードを変更すると、変更は通常すぐに反映されます。これはクールですが、アニメーションにとって破壊的である可能性があります。いじくり回し始めてから、奇妙な、表面的に間違った動作を見る場合は、サンドボックスをリフレッシュしてみてください。

この記事の他のサンドボックスは、モダリティを使用します。私が完全に理解できない理由で、モーダルがオンになっているときにコードを変更することはできません。モーダルは焦点を放棄することを拒否します。変更を試す前に、必ずモーダルをオフにしてください。

実用的なアプリケーションを構築します

これらは、React-Springの基本的な構成要素です。それらを使用して、もっと面白いものを構築しましょう。上記のすべてを考えると、React-Springは非常に使いやすいと思うかもしれません。残念ながら、実際には、正しく処理する必要がある微妙さのいくつかを把握するのは難しい場合があります。これらの詳細の多くは、この記事の残りの部分で詳細に調査されます。

以前に書いたのは、何らかの形でブックリストプロジェクトに関連しています。この投稿は例外ではありません。それは強迫観念ではありません。プロジェクトには、公開されているGraphQLエンドポイントと悪用できる多くの既存のコードがあり、明らかな目標となっています。

モーダルを開いて本を検索できるようにするUIを作成しましょう。結果が表示されたら、モーダルの下に表示される選択した本の実行リストにそれらを追加できます。完了したら、モーダルをオフにしてボタンをクリックして、選択した本に似た本を見つけることができます。

完全に機能するUIから始めて、インタラクティブなデモを含むセクションにアニメーションを徐々に追加します。

最終結果がどのように見えるかを本当に知りたい場合、または既にReact-springに精通していて、まだ知らないことをカバーするかどうかを確認したい場合は、ここにあります（デザイン賞を受賞しません、私はかなり明確です）。この記事の残りの部分では、最終的な状態を段階的に達成するプロセスを紹介します。

モーダルをアニメーション化します

モダリティから始めましょう。データの追加を開始する前に、モーダルを非常にうまくアニメーション化しましょう。これは、基本的で無子化されていないモーダルがどのように見えるかです。 Ryan FlorenceのReach UI（特にモーダルコンポーネント）を使用していますが、モーダルを構築するために何を使用してもアイデアは同じです。バックグラウンドをフェードインして、モーダルコンテンツを変換させたいと考えています。

モーダルはいくつかの「オープン」属性に従って条件付きでレンダリングされるため、 useTransitionフックを使用します。 Reach UI Modalを独自のモーダルコンポーネントで包み、 isOpen属性に基づいて空のコンテンツまたは実際のモーダルをレンダリングしました。フックを変換してアニメーション化する必要があります。

これが変換フックのように見えるものです：

 const modaltransition = usetransition（!! isopen、{
  config：isopen？ {... config.stiff}：{duration：150}、
  from：{Opacity：0、transform： `translate3d（0px、-10px、0px）`}、
  入力：{Opacity：1、transform： `translate3d（0px、0px、0px）`}、
  leave：{Opacity：0、Transform： `translate3d（0px、10px、0px）`}
}）;

ここには大きな驚きはありません。モーダルがアクティブであるかどうかに基づいて、フェードインしてわずかな垂直遷移を提供したいと考えています。奇妙な部分はこれです：

 config：isopen？ {... config.stiff}：{duration：150}、

モーダルがオンになったときに、スプリング物理学を使用したいだけです。これの理由は、少なくとも私の経験では、モーダルをオフにすると、背景が長すぎるため、基礎となるUIが長時間インタラクティブになるためです。したがって、モーダルがオンになると、春の物理学によってうまく跳ね返り、閉じると150ミリ秒ですぐに消えます。

もちろん、フックによって返される変換関数を介してコンテンツを提示します。バックグラウンドに適用するためにスタイルオブジェクトから不透明なスタイルを抽出し、実際のモーダルコンテンツにすべてのアニメーションスタイルを適用することに注意してください。

モダル翻訳を返す（
  （スタイル、ISOPEN）=>
    Isopen &&（
      <animateddialogoverlay allowpinchzoom="{true}" initialfocusref="{focusRef}" isopen="{isOpen}" ondismiss="{onHide}" style="{{" opacity: styles.opacity>
        <animateddialogcontent style="{{" border: solid hsla borderradius: maxwidth:>
          <div>
            <div>
              <standardmodalheader caption="{headerCaption}" onhide="{onHide}"></standardmodalheader>
              {子供たち}
            </div>
          </div>
        </animateddialogcontent>
      </animateddialogoverlay>
    ））
）;

[デモリンク]

長さが長すぎて以前のコンテンツで繰り返されるため、残りの部分は省略されます。核となるアイデアは、React-SpringのuseSpringおよびuseTransitionフックを使用して、 ResizeObserverと組み合わせて、フェードインとアウト、高さの変更、リスト項目のアニメーションのエントリとエントリアニメーションなど、さまざまなアニメーション効果を実現することです。この記事では、初期状態、アニメーション期間、アニメーションの競合を回避する方法など、アニメーションの詳細をどのように扱うかを詳細に説明しています。最終結果は、スムーズでユーザーエクスペリエンスを備えたインタラクティブなUIです。

以上が反応スプリングを理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。