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

Animated कंपोनंट

गंतव्याकडे हलणारे, हावभावांना प्रतिसाद देणारे आणि डौलाने बाहेर पडणारे साधे एलिमेंट्स रेंडर करा.

Animated.<tag>

Animated.div, Animated.button, Animated.svg आणि इतर प्रत्येक HTML किंवा SVG tag रॅपरशिवाय साधा एलिमेंट रेंडर करतात. त्यांचा style मूल्ये स्वीकारतो, आणि React Native प्रमाणे transform ॲरे असू शकतात.

या एलिमेंट्सवरील मर्यादित transform आणि opacity मोशन — spring सह — ब्राउझर प्लेबॅकसाठी पात्र आहे.

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

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 किंवा spring. फक्त 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 एक pose नाव, tempo आणि ॲनिमेशन डीफॉल्ट त्याच्या आतील Animated एलिमेंट्सना देतो.

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 — एकाच DOM एलिमेंटमध्ये रूपांतरित होणाऱ्या ref-फॉरवर्डिंग कंपोनंटला तेच 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 }] } }} />;