வழிகாட்டிகள் · 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 வரைதல் அல்லது பகுப்பாய்வுக்குப் பயன்படுத்துங்கள்.