重さと弾み（Physics）

'use client';
import { useState } from 'react';
import { motion, useAnimation } from 'framer-motion';

// スプリング — ボタンでバネのように弾んで移動
function SpringDemo() {
  const [toggled, setToggled] = useState(false);
  return (
    <div>
      <motion.div
        animate={{ x: toggled ? 160 : 0 }}
        transition={{ type: 'spring', stiffness: 200, damping: 10 }}
        style={{ width: '3.5rem', height: '3.5rem', borderRadius: '0.75rem', background: '#f43f5e' }}
      />
      <button onClick={() => setToggled((v) => !v)}>スプリング</button>
    </div>
  );
}

// 慣性 — ドラッグ後に慣性で滑るように止まる
function InertiaDemo() {
  return (
    <motion.div
      drag="x"
      dragConstraints={{ left: 0, right: 200 }}
      dragTransition={{ power: 0.3, timeConstant: 200 }}
      whileDrag={{ scale: 1.1 }}
      style={{ width: '3.5rem', height: '3.5rem', borderRadius: '0.75rem', background: '#8b5cf6', cursor: 'grab' }}
    />
  );
}

// イージング比較 — linear / easeOut / easeInOut / spring を並べて比較
const EASING_ITEMS = [
  { label: 'linear',    color: '#0ea5e9', transition: { type: 'tween', duration: 1.0, ease: 'linear' } },
  { label: 'easeOut',   color: '#10b981', transition: { type: 'tween', duration: 1.0, ease: 'easeOut' } },
  { label: 'easeInOut', color: '#f97316', transition: { type: 'tween', duration: 1.0, ease: 'easeInOut' } },
  { label: 'spring',    color: '#f43f5e', transition: { type: 'spring', stiffness: 120, damping: 12 } },
] as const;

function EasingCompareDemo() {
  const controls = useAnimation();
  const [direction, setDirection] = useState<1 | -1>(1);

  const run = async () => {
    await controls.start((i) => ({
      x: direction * 160,
      transition: EASING_ITEMS[i].transition,
    }));
    setDirection((d) => (d === 1 ? -1 : 1));
  };

  return (
    <div>
      {EASING_ITEMS.map((item, i) => (
        <motion.div
          key={item.label}
          custom={i}
          animate={controls}
          initial={{ x: 0 }}
          style={{ width: '2rem', height: '2rem', background: item.color }}
        />
      ))}
      <button onClick={run}>動かす</button>
    </div>
  );
}

// easing を指定した animate()（jQuery UI が必要）
$('#box').animate({ left: '200px' }, {
  duration: 600,
  easing: 'easeOutBounce',
});

// swing（jQueryデフォルトのイージング）
$('#box').animate({ left: '200px' }, 600, 'swing');

// linear
$('#box').animate({ left: '200px' }, 600, 'linear');

// jQuery単体でのスプリング再現（手動ループ）
function springAnimate(el, target, stiffness, damping) {
  let pos = 0, vel = 0;
  function step() {
    const force = (target - pos) * stiffness;
    vel = (vel + force) * damping;
    pos += vel;
    $(el).css('transform', `translateX(${pos}px)`);
    if (Math.abs(vel) > 0.1) requestAnimationFrame(step);
  }
  step();
}