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

मूल्ये आणि style

कंपोनंटमध्ये मूल्य ठेवा, calc() ने आउटपुट मिळवा, आणि CSS व्हेरिएबल कुठे लिहिला जाईल ते निवडा.

मूल्य ठेवणे

useAnimatedValue(initial) कंपोनंटच्या मालकीचे Value तयार करते. संख्या वापरा, किंवा { x: 0, opacity: 1 } सारखा record ज्याची फील्ड्स स्वतंत्र मूल्ये असतात.

साध्या style मध्ये हुक मूल्य हे var(--kkwa-…, initial) टोकन असते. अद्यतने ते वापरणाऱ्या एलिमेंट्सवर तो व्हेरिएबल लिहितात; React रेंडर होत नाही.

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

JavaScript बंद आहे. खालील कोड हेच संपूर्ण उदाहरण आहे.

App.jsx

import { timing, useAnimatedValue } from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ duration = 600 }) {
  const progress = useAnimatedValue(1);

  const toggle = () => {
    const toValue = progress.getValue() > 0.5 ? 0 : 1;
    timing(progress, { toValue, duration }).start();
  };

  return (
    <div className="stage">
      <button type="button" onClick={toggle}>
        Toggle
      </button>
      <div className="box" style={{ opacity: progress }}>
        Ready
      </div>
    </div>
  );
}

styles.css

.stage {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 200px;
  padding: 28px;
}

button {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #2854ff;
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.box {
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  border-radius: 24px;
  background: #16181d;
  color: #fff;
  font-weight: 700;
}

calc() ने मिळवणे

easing नसलेले interpolation आणि स्थिरांकासह add, subtract, multiply किंवा divide त्याच व्हेरिएबलच्या अचूक calc() अभिव्यक्ती बनतात. ब्राउझर त्या मोजतो; प्रति फ्रेम त्यांच्यासाठी JavaScript चालत नाही.

Slide.jsx

const progress = useAnimatedValue(0);

// A linear interpolation of a hook value is a calc() of the same CSS variable.
const x = progress.interpolate({ inputRange: [0, 1], outputRange: ['0px', '180px'] });
const half = multiply(progress, 0.5);

<div style={{ opacity: half, transform: `translateX(${x})` }} />;

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

JavaScript बंद आहे. खालील कोड हेच संपूर्ण उदाहरण आहे.

App.jsx

import { spring, useAnimatedValue } from '@kkwaenggwari/animated';
import './styles.css';

const colors = ['#2854ff', '#4a6bff', '#8fb0ff', '#7d9bff', '#5c7cff'];

export default function App({ distance = 220, spread = 0.12 }) {
  const progress = useAnimatedValue(0);

  const toggle = () => {
    const toValue = progress.getValue() < 0.5 ? 1 : 0;
    spring(progress, { toValue, stiffness: 150, damping: 16 }).start();
  };

  return (
    <div className="stage">
      <button type="button" onClick={toggle}>
        Move all
      </button>
      <div className="lanes">
        {colors.map((color, index) => {
          const start = index * spread;
          const x = progress.interpolate({
            inputRange: [start, start + 1 - spread * 4],
            outputRange: ['0px', `${distance}px`],
            extrapolate: 'clamp',
          });
          const turn = progress.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', `${90 + index * 45}deg`],
          });
          return (
            <div key={color} className="lane">
              <span style={{ background: color, transform: `translateX(${x}) rotate(${turn})` }} />
            </div>
          );
        })}
      </div>
    </div>
  );
}

styles.css

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

button {
  justify-self: start;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #2854ff;
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.lanes {
  display: grid;
  gap: 10px;
}

.lane {
  height: 36px;
  max-width: 320px;
  border-radius: 999px;
  background: #f5f6fb;
}

.lane span {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

रंग आणि सानुकूल गणना

रंग, easing असलेले interpolation, modulo, diffClamp आणि AnimatedComputed calc() म्हणून लिहिता येत नाहीत. useAnimatedCSS(node) त्यांना JavaScript अद्ययावत करणारा स्वतःचा CSS व्हेरिएबल, त्याच कंपोनंट आयुष्यासह, देते.

असा node थेट style मध्ये वापरल्यास त्रुटी फेकली जाते, त्यामुळे खर्च कधीही लपत नाही.

Glow.jsx

const progress = useAnimatedValue(0);

// Colors and eased curves are not calc() expressions: give them their own CSS value.
const color = useAnimatedCSS(
  progress.interpolate({ inputRange: [0, 1], outputRange: ['#3d3bf3', '#22b8f0'] }),
);

<div style={{ background: color }} />;

कृती हुककडे सोपवा

useAnimated(initial, factory, deps) मूल्य आणि factory मध्ये synchronous पद्धतीने घोषित प्रत्येक कंट्रोलर सांभाळते. माउंटवर सुरू होते, अवलंबित्व बदलल्यावर पुन्हा सुरू होते आणि अनमाउंटवर थांबते.

इव्हेंट-आधारित प्लेबॅकसाठी { autoStart: false } द्या, मग परत मिळालेल्या मूल्यावर start(), stop() किंवा reset() कॉल करा.

Intro.jsx

const intro = useAnimated(
  { opacity: 0, y: 24 },
  (value) => {
    parallel([
      timing(value.opacity, { toValue: 1, duration: 400 }),
      spring(value.y, { toValue: 0, stiffness: 220, damping: 20 }),
    ]);
  },
  [],
);

<section style={{ opacity: intro.opacity, transform: `translateY(calc(${intro.y} * 1px))` }} />;

अनेक एलिमेंट्ससाठी एकदा लिहा

डीफॉल्टनुसार, inline style मध्ये मूल्य वापरणाऱ्या प्रत्येक एलिमेंटला व्हेरिएबल मिळतो. scope सह व्हेरिएबल एका कंटेनरवर एकदा लिहिला जातो आणि त्याच्या मुलांना वारसाने मिळतो: शेकडो एलिमेंट्ससाठी योग्य पर्याय.

AnimatedProvider scope={ref} त्याच्या खालील प्रत्येक हुक मूल्यासाठी डीफॉल्ट scope सेट करतो.

Field.jsx

const field = useRef(null);

// Written once on the field; every child that uses the value inherits it.
const wave = useAnimatedValue(0, { scope: field });

<div ref={field}>
  {items.map((item) => (
    <i key={item} style={{ transform: `rotate(calc(${wave} * 1turn))` }} />
  ))}
</div>;

JavaScript मध्ये मूल्ये वाचणे

getValue() React ला सबस्क्राइब न करता स्नॅपशॉट परत करते. useAnimatedListener(node, fn) प्रत्येक बदलावर तुम्हाला कॉल करते आणि अनमाउंटवर listener काढते. रेंडरिंगसाठी नाही, तर canvas रेखाटन किंवा विश्लेषणासाठी वापरा.