गाइड · 01

मान और स्टाइल

कंपोनेंट में मान रखें, calc() से आउटपुट निकालें और चुनें कि CSS वेरिएबल कहाँ लिखा जाए।

मान का स्वामित्व

useAnimatedValue(initial) कंपोनेंट का Value बनाता है। संख्या या { x: 0, opacity: 1 } जैसा रिकॉर्ड इस्तेमाल करें, जिसके फ़ील्ड अलग-अलग मान हैं।

सामान्य 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 के बिना इंटरपोलेशन और स्थिरांक के साथ 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 वाले इंटरपोलेशन, modulo, diffClamp और AnimatedComputed को calc() के रूप में नहीं लिखा जा सकता। useAnimatedCSS(node) उन्हें JavaScript से अपडेट होने वाला अपना CSS वेरिएबल देता है, कंपोनेंट जितने ही जीवनकाल के साथ।

ऐसे नोड को सीधे 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 में सिंक्रोनस रूप से घोषित हर कंट्रोलर का मालिक है। यह माउंट पर शुरू होता है, निर्भरता बदलने पर फिर शुरू होता है और अनमाउंट पर रुकता है।

इवेंट से चलने वाले प्लेबैक के लिए { 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 स्टाइल मान इस्तेमाल करती है। scope के साथ वेरिएबल कंटेनर पर एक बार लिखा जाता है और उसके children उसे विरासत में पाते हैं: सैकड़ों एलिमेंट के लिए सही विकल्प।

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 पर ड्रॉइंग या एनालिटिक्स के लिए इस्तेमाल करें, रेंडर के लिए नहीं।