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

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

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

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

スプリング

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

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

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

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

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

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

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

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

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

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

それでおしまい。

非常にアニメーション

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

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

エクスポート関數(shù)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>

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

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

 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 、測(cè)定するrefの高さの値と、春に渡すコンテンツを提供します。次に、refを適用し、高さスタイルを適用します。

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

アニメーションの移行

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

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

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

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

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

 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関數(shù)です。 React-Springは、リストアレイを追跡し、追加および削除されたアイテムを追跡しています。 listTransitions関數(shù)を呼び出して、単一のスタイルオブジェクトと単一のアイテムを受け入れるコールバック関數(shù)を提供し、React-Springは、アイテムが新しく追加された、新しく削除された、またはリストにあるかどうかに基づいて、リスト內(nèi)の各アイテムに対してそれを呼び出し、正しいスタイルを使用します。

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

デモ

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

[デモリンク]

その他の詳細(xì)

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

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

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

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

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

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

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

実用的なアプリケーションを構(gòu)築します

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

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

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

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

最終結(jié)果がどのように見えるかを本當(dāng)に知りたい場(chǎng)合、または既にReact-springに精通していて、まだ知らないことをカバーするかどうかを確認(rèn)したい場(chǎng)合は、ここにあります（デザイン賞を受賞しません、私はかなり明確です）。この記事の殘りの部分では、最終的な狀態(tài)を段階的に達(dá)成するプロセスを紹介します。

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

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

モーダルはいくつかの「オープン」屬性に従って條件付きでレンダリングされるため、 useTransitionフックを使用します。 Reach UI Modalを獨(dú)自のモーダルコンポーネントで包み、 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}、

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

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

モダル翻訳を返す（
  （スタイル、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>
    ））
）;

[デモリンク]

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

以上が反応スプリングを理解するの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語 Web サイトの他の関連記事を參照してください。