வழிகாட்டிகள் · 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()-ஐ அழையுங்கள்.