ಮಾರ್ಗದರ್ಶಿಗಳು · 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 ಚಿತ್ರಣ ಅಥವಾ ವಿಶ್ಲೇಷಣೆಗೆ ಬಳಸಿ.