反応のフリップアニメーションについて知っておくべきことすべて

最新のSafariアップデートの後、WebアニメーションAPI（WAAPI）は、すべての最新のブラウザー（IEを除く）にフラグなしでサポートされています。ブラウザがサポートする機能を確認できる便利な例を次に示します。 WAAPIは、ネイティブAPIに属しているため、アニメーションを実行するのに最適な方法です（JavaScriptで実行する必要があります）。つまり、追加のライブラリなしで機能することを意味します。 Waapiがまったく知らない場合は、Dan Wilsonが提供する紹介の非常に良い紹介をご紹介します。

Flipは、最も効果的なアニメーションメソッドの1つです。 Flipには、実行するにはJavaScriptコードが必要です。

WAAPIを使用して交差点を見て、反転して反応に統合しましょう。しかし、私たちは最初に反応せずに始め、次に反応するために移行します。

フリップとワアピ

Waapiはフリップアニメーションを簡単にします！

フリップクイックレビュー：コアのアイデアは、まず、それを終わらせたい場所を要素を配置することです。次に、変換を適用して開始位置に移動します。次に、これらの変換をキャンセルします。

アニメーション変換は非常に効率的であるため、フリップは非常に効率的です。 WAAPIの前に、要素のスタイルを直接操作して変換を設定し、次のフレームがキャンセル/反転するのを待つ必要があります。

 // waapiの前にフリップします
el.style.transform = `translatey（200px）`;

RequestAnimationFrame（（）=> {
  el.style.transform = '';
}）;

多くのライブラリがこのアプローチに基づいて構築されています。ただし、これにはいくつかの問題があります。

• すべてが大きなハックのように感じました。
• フリップアニメーションの逆転は非常に困難です。クラスが削除されると、CSS変換は「無料」に逆転しますが、これはここではそうではありません。以前のアニメーションが実行されている間に新しいフリップを開始すると、失敗が発生します。反転では、変換マトリックスをGetComputedStylesを使用して解析し、新しいアニメーションをセットアップする前に現在のサイズを計算するために使用する必要があります。
• 高度なアニメーションはほとんど不可能です。たとえば、スケーリングされた親の子の歪みを防ぐには、各フレームで現在のスケーリングされた値にアクセスする必要があります。これは、変換マトリックスを解析することによってのみ行うことができます。
• ブラウザには注意を払うことがたくさんあります。たとえば、Firefoxで完全にフリップアニメーションを実行するには、RequestAnimationFrameを2回呼び出す必要があります。

 RequestAnimationFrame（（）=> {
  RequestAnimationFrame（（）=> {
    el.style.transform = '';
  }）;
}）;

WAAPIを使用する場合、これらの問題に遭遇しません。逆関数は簡単に逆転できます。子供の逆スケーリングも可能です。エラーが発生した場合、Culpritを見つけるのは簡単です。これは、RequestAnimationFrameメソッドなどのさまざまなものを調べる代わりに、アニメーションやリバースなどの単純な関数のみを使用するためです。

WAAPIバージョンの要約は次のとおりです。

 el.classlist.toggle（ 'someclass'）;
const keyframes =/*サイズ/位置差を計算*/;
el.anime（keyframes、2000）;

ひっくり返して反応します

Flip AnimationsがReactでどのように機能するかを理解するには、純粋なJavaScriptでどのように機能するかを知ることが重要です。フリップアニメーションの構成を思い出してください：

紫色の背景を持つすべてのコンテンツは、レンダリングの「描画」ステップの前に発生する必要があります。それ以外の場合は、新しいスタイルが一時的に点滅するのがわかりますが、これは良くありません。 Reactでは、すべてのDOMの更新が私たちによって行われるため、状況はわずかに複雑になります。

フリップアニメーションの魔法は、ブラウザが描く機会がある前に要素が変換されることです。それでは、反応の「描く前」の瞬間をどうやって知るのでしょうか？

useLayoutEffectフックを見てみましょう。あなたがそれが何であるかを知りたいなら…これはそれです！このコールバックで合格するものはすべて、DOMの更新後に描画する前に同期して発生します。言い換えれば、これはフリップをセットアップするのに最適な場所です！

Flip Technologyが非常に優れていることをやりましょう：アニメーションDOMポジション。要素が1つのDOM位置から別のDOM位置にどのように移動するかをアニメーション化したい場合、CSSにできることは何もありません。 （To-Doリストのタスクを完了し、以下の例のプロジェクトをクリックするのと同じように、完成したタスクリストに移動することを想像してください。）

最も簡単な例を見てみましょう。次の例で2つのブロックのいずれかをクリックすると、位置を交換します。フリップがなければ、すぐに起こります。

やることがたくさんあります。ライフサイクルフックのコールバック内ですべての作業がどのように発生するかに注意してください： useEffectとuseLayoutEffect 。少し混乱を招くのは、フリップアニメーションのタイムラインが2つのReactレンダリングで発生するため、コード自体からは明らかではないということです。以下は、React Flipアニメーションの構成で、さまざまな操作シーケンスを表示します。

useEffect常にuseLayoutEffectの後に実行され、ブラウザの描画後に実行されますが、最初のレンダリング後に要素の位置とサイズをキャッシュすることが重要です。 useLayoutEffectすべてのDOMの更新の後に実行されるため、2番目のレンダリングでこれを行う機会はありません。しかし、このプロセスは基本的に通常のフリップアニメーションと同じです。

注意すべきこと

ほとんどのことと同様に、反応でフリップを使用するときに考慮すべきことがいくつかあります。

100ミリ秒以内に滞在します

フリップアニメーションは計算です。計算には時間がかかります。スムーズな60fps変換を示す前に、かなりの作業を行う必要があります。遅延が100ミリ秒未満の場合、人々は遅延に気付かないので、すべてがこの値を下回っていることを確認してください。 DevToolsのパフォーマンスタブは、このコンテンツを確認するのに最適な場所です。

不必要なレンダリング

各setState不必要なレンダリングを引き起こし、アプリケーションを遅くするため、 useStateサイズ、位置、およびアニメーションオブジェクトをキャッシュすることはできません。最悪の場合、エラーにつながる可能性があります。代わりにuseRefを使用して、何もレンダリングせずに変更できるオブジェクトとして扱ってみてください。

レイアウトの揺れ

ブラウザレイアウトの繰り返しトリガーを避けてください。フリップアニメーションのコンテキストでは、これは要素をループすることを避け、 getBoundingClientRectで場所を読み取り、すぐにanimateことを意味します。バッチ「読み取り」と「書き込み」できる限り。これにより、非常にスムーズなアニメーションが可能になります。

アニメーションがキャンセルされました

前のデモが移動するときに、正方形をランダムにクリックして、停止した後にもう一度クリックしてください。欠点が見えます。実生活では、ユーザーは移動するにつれて要素と対話するため、スムーズにキャンセルされ、一時停止され、更新されることを確認する価値があります。

ただし、すべてのアニメーションをreverse使用して逆にすることはできません。時々、それらを停止してから新しい位置に移動したい場合があります（たとえば、要素のリストがランダムに破壊された場合）。この場合、次のことが必要です。

• 移動する要素のサイズ/位置を取得します
• 現在のアニメーションを完了します
• 新しい寸法と位置の違いを計算します
• 新しいアニメーションを開始します

反応では、これは見た目よりも難しいです。私はこの問題に取り組むのに多くの時間を無駄にしました。現在のアニメーションオブジェクトはキャッシュする必要があります。良い方法は、IDでアニメーションを取得するためにマップを作成することです。次に、移動する要素のサイズと位置を取得する必要があります。これを行うには2つの方法があります。

1. 関数コンポーネントの使用：関数の本体の各アニメーション要素をループし、現在の位置をキャッシュします。
2. クラスコンポーネントの使用： getSnapshotBeforeUpdateライフサイクルメソッドを使用します。

実際、公式のReactドキュメントでは、「レンダリングフェーズのライフサイクル（ renderなど）とコミットフェーズのライフサイクル（ getSnapshotBeforeUpdateやcomponentDidUpdateなど）の間に遅延がある可能性があるため、 getSnapshotBeforeUpdateを使用することを推奨しています。

ブラウザと戦わないでください

前に言ったことがありますが、ブラウザに立ち向かわないようにして、ブラウザのやり方で物事を実現しようとします。単純なサイズの変更をアニメーション化する必要がある場合は、CSSで十分かどうかを検討します（たとえば、 transform: scale() ）。フリップアニメーションは、ブラウザが本当に役に立たない場所に最適であることがわかりました。

• アニメーションDOM位置の変更（上記のように）
• 共有レイアウトアニメーション

2番目は、最初のバージョンのより複雑なバージョンです。 1つ全体として機能し、その位置を変更する2つのDOM要素があります（もう1つはアンインストール/非表示）。このトリックは、いくつかのクールなアニメーションを実現できます。たとえば、このアニメーションは、この方法を使用するReact-Easy-Flipと呼ばれる私が構築したライブラリで作られています。

図書館

Reactのフリップアニメーションをより簡単で抽象的なボイラープレートコードにすることができる多くのライブラリがあります。現在積極的に維持されているライブラリには、 react-flip-toolkitと私のライブラリreact-easy-flip含まれます。

より重いが、より一般的なアニメーションが可能なものを気にしない場合は、 framer-motionをチェックしてください。また、クールな共有レイアウトアニメーションも可能です！ライブラリを詳細に探索するビデオがあります。

リソースと参照

• ジョシュ・W・コモーのアニメーションはアニメーションではありません
• Paul LewisとStephen McGruerによる高性能の拡張と折りたたみアニメーションの構築
• マット・ペリーによる「魔法の動き」
• @KeyFramersは「JavaScriptからのアニメーションCSS変数を使用」とツイートします
• コサカのマリコの「最新のウェブブラウザの内部リスト（パート3）」
• Alex HolachekのSimple Build Complex UI Animation in React
• David Khourshidの「フリップテクノロジーを使用したレイアウトのアニメーション」
• Kirill Vasiltsovの「Fluent Animation with React Hooks」
• Jayant Bhawalの「共有要素変換のためのReactフックを使用」

この改訂された出力は、テキストを言い換えて一意のコンテンツを作成しながら、元の画像形式と配置を維持します。また、いくつかの小さな文法的および文体的な問題に対処しています。

以上が反応のフリップアニメーションについて知っておくべきことすべての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。