मार्गदर्शक · 06

टाइमलाइन

शोधता येणाऱ्या एकाच घड्याळातून अनेक ट्रॅक चालवा: प्ले, थांबा, शोधा, उलट करा आणि वेग बदला.

एका घड्याळावर ट्रॅक

useTimeline(tracks, options, deps) कंपोनंटच्या मालकीची टाइमलाइन तयार करते. प्रत्येक ट्रॅक keyframe ची सूची असतो, किंवा मिलिसेकंदांमध्ये at आणि duration असलेले { values, times, at, duration }.

progress एकच CSS व्हेरिएबल आहे, आणि संख्या किंवा लांबीचे ट्रॅक त्याच्या calc() अभिव्यक्ती आहेत, त्यामुळे साध्या style मधील टाइमलाइन प्रति फ्रेम एकच व्हेरिएबल लिहिते.

उदाहरण तयार होत आहे…

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() कॉल करा.