【framer-motion】個人メモ

transitionで指定するプロパティ

type:{タイプ名}

type:"spring"：バネっぽいアニメーションになる。

stiffness:{数字}

type:"spring"の時に有効。
バネの硬さを表現。
値が低いほど動きが柔らかくなり、アニメーションがゆっくりになる。

damping:{数字}

type:"spring"の時に有効。
バネの反発力を表現。
0に指定すると無限に反発する。

restDelta:{数字}

今の値と目標の値の差が数値以下になったら、アニメーション終了。

• 単位はアニメーション対象のプロパティによって変わる
  • XやY：ピクセル単位
  • background-color：数値的な色
  • rotate：角度（°）

以下の場合、要素のxの値が0から100に向かってバネアニメーションする
restDelta:2の指定により、xの値が「98～100の範囲」になった時点でアニメーションが停止する。

<motion.div
  initial={{ x: 0 }}
  animate={{ x: 100 }}
  transition={{
    type: "spring",
    stiffness: 300,
    damping: 20,
    restDelta: 2, // xの値が「98～100の範囲」になった時点でアニメーションが停止
  }}
>
  Move me
</motion.div>

useCycle

メソッドが発火するたびに、引数に渡した値を循環させる。
以下の例ではcycleX()を呼び出す度に、xが0→50→100→150→0と変化する。
一回呼び出すと1つ進む。一回の呼び出しですべての値に変化するわけではない。
(例：xが50の状態で呼び出すと、100に移動する）

import { motion, useCycle } from "framer-motion";

const Sample = () => {
  const [x, cycleX] = useCycle(0, 50, 100, 150);

  return (
    <motion.div
      style={{ width: "200px", height: "200px", background: "skyblue" }}
      animate={{ x }}
      onClick={() => cycleX()}
    />
  );
};

export default Sample;