ಮಾರ್ಗದರ್ಶಿಗಳು · 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() ಕಾಲ್ ಮಾಡಿ.