ソース: 
- Elm1をクリックすると、Elm2～Elm5が連動する
- Elm2
- Elm1のスイッチと連動し、すぐにON/OFFが切り替わる
- useEffectで、`isSwitchOn`が変わったら、変更
- 色がふんわり変わるのは、`framer-motion`の`animation`関数を使用
- if (isSwitchOn) {
// 点灯（黄色）
animate("rect", {fill: "#ff0"}, {duration: 1});
} else {
// 消灯（茶色）
animate("rect", {fill: "#A28B55"}, {duration: 1});
} - animate()の第二引数は、変更後の状態
- animate()の第三引数は、変更の仕方のオプション
- durationは、色が変わり終えるまでの時間
- Elm3
- Elm1のスイッチと連動し、すぐにON/OFFが切り替わる
- useEffectで、`isSwitchOn`が変わったら、変更
- バネの動作は、frame-mortionを使用
- if (isSwitchOn) {
// 伸ばす
animate("rect", {height: 100}, { type: "spring", stiffness: 700, damping: 10});
} else {
// 縮める
animate("rect", {height: 30}, { type: "spring", stiffness: 1000, damping: 30});
} - stiffnessは、バネの強度(≒伸び縮みの速さ)
- dampingは、摩擦(≒減衰度合)
- Elm4
- Elm1のスイッチと連動し、線が伸びる
- useEffectで、`isSwitchOn`が変わったら、変更
- svgのpath要素の線の長さである`pathLength`を、frame-motionで変化させている
- if (isSwitchOn) {
// 描く
animate("path", { pathLength: 1 }, { duration: 2.0 });
} else {
// 消す
animate("path", { pathLength: 0 }, { duration: 0.5 });
} - `pathLength`は、0～1の値で、0%～100%の線の描画範囲を決定する
- Elm5
- Elm1のスイッチと連動し、線が伸びる
- useEffectで、`isSwitchOn`が変わったら、変更
- `action`関数の第三引数で、Elm4の線が描き終わったタイミングに合わせ、Elm5の開始を2秒後にしている
- if (isSwitchOn) {
// 点灯
animate("rect", {fill: changedColor}, {delay: 2.0});
setTimeout(()=>{ setTextOnOff("ON"); }, 2.0*1000);
} else {
// 消す
animate("rect", {fill: stableColor}, {duration: 0.5});
setTextOnOff("OFF");
} - `delay`で、開始タイミングを遅らせている
- ついでにテキストのON/OFFも、変更タイミングを`setTimeout`で遅らせている
- テキストを消すときは、ケーブルが外れたらすぐ消えるイメージで、即時OFFにしている