गाइड · 03

Animated कंपोनेंट

सामान्य एलिमेंट रेंडर करें जो लक्ष्य की ओर बढ़ें, जेस्चर का जवाब दें और सलीक़े से जाएँ।

Animated.<tag>

Animated.div, Animated.button, Animated.svg और हर दूसरा HTML या SVG टैग बिना रैपर के सामान्य एलिमेंट रेंडर करता है। उनका style मान स्वीकार करता है, और transform React Native की तरह ऐरे हो सकते हैं।

इन एलिमेंट पर transform और opacity की सीमित गति, स्प्रिंग सहित, ब्राउज़र चला सकता है।

उदाहरण तैयार हो रहा है…

JavaScript बंद है। नीचे का कोड पूरा उदाहरण है।

App.jsx

import { useState } from 'react';
import { Animated } from '@kkwaenggwari/animated';
import './styles.css';

const plans = ['Research', 'Build', 'Launch'];

export default function App({ stiffness = 260, damping = 22 }) {
  const [selected, setSelected] = useState('Build');

  return (
    <div className="stage">
      {plans.map((plan, index) => (
        <Animated.button
          key={plan}
          type="button"
          className={plan === selected ? 'plan active' : 'plan'}
          onClick={() => setSelected(plan)}
          seed={{ opacity: 0, transform: [{ translateY: 24 }] }}
          pose={{
            opacity: 1,
            transform: [
              { translateY: plan === selected ? -12 : 0 },
              { scale: plan === selected ? 1.06 : 1 },
            ],
          }}
          tempo={{ spring: { stiffness, damping } }}
        >
          <strong>{plan}</strong>
          <span>Step {index + 1}</span>
        </Animated.button>
      ))}
    </div>
  );
}

styles.css

.stage {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  min-height: 220px;
  padding: 40px 28px 28px;
}

.plan {
  display: grid;
  gap: 6px;
  width: 150px;
  padding: 20px;
  border: 1px solid #e4e6ef;
  border-radius: 18px;
  background: #fff;
  color: #16181d;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.plan span {
  color: #5b6070;
  font-size: 14px;
}

.plan.active {
  border-color: #2854ff;
  background: #2854ff;
  color: #fff;
}

.plan.active span {
  color: #d6e0ff;
}

seed, pose, poses और tempo

seed पहला फ़्रेम है, pose मौजूदा लक्ष्य (ऑब्जेक्ट या poses की किसी प्रविष्टि का नाम), और tempo timing या स्प्रिंग। सिर्फ़ tempo बदलने से बिना बदला लक्ष्य दोबारा नहीं चलता।

एलिमेंट के पहुँचने पर onRest चलता है।

Card.jsx

<Animated.article
  seed={{ opacity: 0, transform: [{ translateY: 16 }] }}
  pose={selected ? 'raised' : 'rest'}
  poses={{
    rest: { opacity: 1, transform: [{ translateY: 0 }, { scale: 1 }] },
    raised: { opacity: 1, transform: [{ translateY: -8 }, { scale: 1.04 }] },
  }}
  tempo={{ spring: { stiffness: 300, damping: 26 } }}
  onRest={() => console.log('arrived')}
/>;

जेस्चर का जवाब

respond जेस्चर को अस्थायी लक्ष्यों से जोड़ता है: hover, focus, focusWithin, press, longPress, drag, inView और अन्य। जवाब ख़त्म होने पर एलिमेंट जहाँ भी हो, वहीं से अपने pose पर लौटता है।

onResponse हर जवाब की शुरुआत और अंत बताता है, और respond={{ press: {} }} बिना किसी दृश्य बदलाव के जेस्चर पर नज़र रखता है।

उदाहरण तैयार हो रहा है…

JavaScript बंद है। नीचे का कोड पूरा उदाहरण है।

App.jsx

import { Animated } from '@kkwaenggwari/animated';
import './styles.css';

const actions = ['Share', 'Save', 'Export'];

export default function App({ lift = 8, scale = 1.06 }) {
  return (
    <div className="stage">
      {actions.map((action) => (
        <Animated.button
          key={action}
          type="button"
          className="action"
          pose={{ transform: [{ translateY: 0 }, { scale: 1 }] }}
          respond={{
            hover: { transform: [{ translateY: -lift }, { scale }] },
            focus: { transform: [{ translateY: -lift }, { scale }] },
            press: { transform: [{ translateY: 0 }, { scale: 0.94 }] },
          }}
          tempo={{ spring: { stiffness: 420, damping: 24 } }}
        >
          {action}
        </Animated.button>
      ))}
    </div>
  );
}

styles.css

.stage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 200px;
  padding: 32px;
}

.action {
  min-width: 120px;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  border-radius: 16px;
  background: #16181d;
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.action:focus-visible {
  outline: 3px solid #5c7cff;
  outline-offset: 3px;
}

Animated.Scope से डिफ़ॉल्ट साझा करें

Animated.Scope अपने भीतर के Animated एलिमेंट को pose का नाम, tempo और एनिमेशन डिफ़ॉल्ट देता है।

Menu.jsx

<Animated.Scope tempo={{ spring: { stiffness: 380, damping: 30 } }}>
  <Animated.li pose={{ opacity: 1 }} />
  <Animated.li pose={{ opacity: 1 }} />
</Animated.Scope>;

अपने कंपोनेंट

Animated.wrap(Component) — React Native में createAnimatedComponent — ref आगे भेजने वाले और एक DOM एलिमेंट में हल होने वाले कंपोनेंट को वही props स्वीकार करने लायक बनाता है।

Link.jsx

import { forwardRef } from 'react';
import { Animated } from '@kkwaenggwari/animated';

const Link = forwardRef((props, ref) => <a ref={ref} {...props} />);
const AnimatedLink = Animated.wrap(Link);

<AnimatedLink href="/pricing" respond={{ hover: { transform: [{ translateX: 4 }] } }} />;