গাইড · 06

টাইমলাইন

একটি seek-যোগ্য ঘড়ি থেকে অনেক ট্র্যাক চালান: চালান, থামান, নির্দিষ্ট সময়ে যান, উল্টান আর গতি বদলান।

এক ঘড়িতে ট্র্যাক

useTimeline(tracks, options, deps) কম্পোনেন্টের নিজস্ব টাইমলাইন তৈরি করে। প্রতিটি ট্র্যাক কীফ্রেমের তালিকা, বা { values, times, at, duration }, যেখানে at আর duration মিলিসেকেন্ডে।

progress একটি CSS ভেরিয়েবল, আর সংখ্যা বা দৈর্ঘ্যের ট্র্যাক তার calc() এক্সপ্রেশন, তাই সাধারণ স্টাইলে টাইমলাইন প্রতি ফ্রেমে একটি ভেরিয়েবল লেখে।

উদাহরণ প্রস্তুত হচ্ছে…

JavaScript বন্ধ আছে। নিচের কোডই পুরো উদাহরণ।

App.jsx

import { useRef } from 'react';
import { useTimeline } from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ duration = 3000, repeat = true }) {
  const timeline = useTimeline(
    {
      x: ['0px', '220px', '220px', '0px', '0px'],
      y: ['0px', '0px', '110px', '110px', '0px'],
      turn: ['0deg', '90deg', '180deg', '270deg', '360deg'],
      round: ['50%', '12%', '50%', '12%', '50%'],
    },
    { duration, repeat: repeat ? Infinity : 0 },
    [duration, repeat],
  );
  const bar = useRef(null);

  const seek = (event) => {
    const box = bar.current.getBoundingClientRect();
    const ratio = Math.min(1, Math.max(0, (event.clientX - box.left) / box.width));
    timeline.pause();
    timeline.seek(ratio * timeline.duration);
  };

  const { x, y, turn, round } = timeline.values;

  return (
    <div className="stage">
      <div className="canvas">
        <span
          className="shape"
          style={{ transform: `translate(${x}, ${y}) rotate(${turn})`, borderRadius: round }}
        />
      </div>
      <div className="player">
        <button type="button" onClick={() => timeline.play()}>
          Play
        </button>
        <button type="button" onClick={() => timeline.pause()}>
          Pause
        </button>
        <div
          ref={bar}
          className="scrub"
          onPointerDown={(event) => {
            event.currentTarget.setPointerCapture(event.pointerId);
            seek(event);
          }}
          onPointerMove={(event) => {
            if (event.buttons) seek(event);
          }}
        >
          <span style={{ transform: `scaleX(${timeline.progress})` }} />
        </div>
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 16px;
  padding: 28px;
}

.canvas {
  height: 190px;
  padding: 20px;
  border-radius: 16px;
  background: #0b1440;
}

.shape {
  display: block;
  width: 60px;
  height: 60px;
  background: #5c7cff;
}

.player {
  display: flex;
  align-items: center;
  gap: 8px;
}

.player button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #e4e6ef;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  cursor: pointer;
}

.scrub {
  flex: 1;
  height: 12px;
  border-radius: 999px;
  background: #eef2ff;
  overflow: hidden;
  cursor: pointer;
  touch-action: none;
}

.scrub span {
  display: block;
  height: 100%;
  background: #2854ff;
  transform-origin: left center;
}

প্লেব্যাক নিয়ন্ত্রণ

play({ from, rate }), pause(), seek(ms) আর reverse() ঘড়ি নিয়ন্ত্রণ করে। state, currentTime, duration আর finished promise এর বর্ণনা দেয়। repeat আর repeatDelay এটি পুনরাবৃত্তি করে।

Title.jsx

const intro = useTimeline(
  {
    y: ['24px', '0px'],
    fade: { values: [0, 1], at: 0, duration: 300 },
    line: { values: [0, 1], at: 200, duration: 600 },
  },
  { duration: 800 },
);

intro.seek(400); // milliseconds
intro.play({ rate: 0.5 });
intro.reverse();

React-এর বাইরে

createTimeline কম্পোনেন্ট ছাড়া একই ঘড়ি। কাজ শেষ হলে dispose() কল করুন।