反応アニメーション:拡大するタップ

7586 ワード
animation react webdev tutorial テキストリンク

何を作っている


私たちはあなたがそれをタップすると展開するカードを作るでしょう.あなたがスクロールすることができるカードの水平リストscroll-snap-type ). ときにタップしたり、カード全体をクリックして画面全体を取得し、スクロールを防ぐ展開します.



セスコーカー
ダートッヒKnoppix

⚠️ フレーマーの動きとの反応で複数のUIの状態の間にアニメーションを示すために新しいチュートリアルでの作業.js
午後15時48分- 2019年11月30日
0
0
動画を拡大するタップのデモビデオ
あなたはplay with the demo 直接または取るlook at the repo .
あなたがビデオチュートリアルを見たいと思うならば、私はアニメーションを加えて、望ましい効果を得るために調整をすることの全体のプロセスを経験します.
アニメーション状態を拡大するためにタップを追加する完全なプロセスのチュートリアル

Webアニメーションのためのヒント


Framer Motion、RegestとJSの他のアニメーションライブラリでアニメーションを追加するときは、HTMLの構造を変更する必要があります.時々、divをラップして、既存の要素よりむしろそれらをアニメーション化するのがより簡単かもしれません.あなたが自分自身を試してみて何かアニメーションを取得するために戦って見つける場合は、一歩を踏み出すと、トレードオフを行うことができますかどうかを確認してください.ラッパーを追加すると、HTMLの構造が希薄になりますが、アニメーションコードをよりきれいにすることができます.私は好むdiv あなたがコードで操作するだけでそれを加えているので、要素は意味的な意味を必要としません.

ハウツーとスタイル


フレマーの動きはいくつかの有用な反応フックが付属しています、アニメーションを拡大するために我々のタップのために、我々はuseCycle フック.これは、現在の状態と私たちが状態を進行したいときに呼び出す関数を提供します.フックをビルドするには、引数のリストを指定します.我々のケースでは、我々は、我々が間にアニメーション化する必要がある2つの異なる状態を表す2つのオブジェクトを使用することができます.
const [animate, toggleFocus] = useCycle(
    { height: "25rem", top: "0rem", overflowX: "auto" },
    { height: "100%", top: "-4.4rem", overflowX: "hidden" }
  );
USCの定義
国が始まるheight: "25rem" , などを呼び出すときtoggleFocus 初めて、状態は100に変わりますheight: "100%" , などを呼び出す場合はtoggleFocus 機能useCycle これらの状態を通して無限に循環する.
アニメーション化するにはmotion コンポーネントとパスanimate 状態.モーションは、直接これを処理し、変更する小道具の間にアニメーション化されます.アニメーションをトリガーするにはonTap プロップ(動きによっても)component ) 関数をuseCycle .
<motion.div
    onTap={() => toggleFocus()}
    animate={animate}
/>
我々のusycleフックからデータを消費すること
このフックを非常に汎用性にするのは、任意の数の引数を供給することができます.複数の状態があるならば、我々は直線的に動く必要があります、このフックはよく働きます.サイクル関数もインデックスを受け入れるので、非線形の方法で異なるUI状態の間を移動できます.我々のアニメーションのために、我々はちょうど2つの州を必要とします、しかし、我々が複数をコントロールしたいならば、より複雑なオブジェクトを供給することは可能です.
これは、1つのuseCycle デモで使用されるフック.複雑なオブジェクトを使用すると、同期してアニメーション化するには、画面上の複数の要素の状態とアニメーションが可能になりますcycleCard が呼ばれる.
const [animate, cycleCard] = useCycle(
    {
      card: { padding: "1rem" },
      image: {
        width: "100%",
        marginLeft: "0rem",
        marginRight: "0rem",
        marginTop: "0rem"
      }
    },
    {
      card: { padding: "0rem" },
      image: {
        width: "125%",
        marginLeft: "-3rem",
        marginRight: "-3rem",
        marginTop: "-1rem"
      }
    }
);

ここからどこへ行くか


デモでは、2つの異なる状態の間の遷移、展開と崩壊.コードを単純化するために、状態は、(記載されるように)変異体に動かされることができた.私は実験をお勧めしますuseCycle フックは明確にUIをする必要がある別の状態を定義することができます.アニメーションを制御するための非常に強力なシステムである間、それはセットアップして、理解するのが簡単です.

資源

  • 完全なソースコードを見るにはcheck out the repo on GitHub
  • チェックアウトマイ
  • この動画を見るofficial Framer Motion documentation
    • [SWEA] #1208 Flatten
    JSX