வழிகாட்டிகள் · 03

Animated கம்போனென்ட்கள்

இலக்கை நோக்கி நகரும், சைகைகளுக்குப் பதிலளிக்கும், அழகாக வெளியேறும் சாதாரண உறுப்புகளை ரெண்டர் செய்யுங்கள்.

Animated.<tag>

Animated.div, Animated.button, Animated.svg மற்றும் மற்ற எல்லா HTML, SVG tag-களும் wrapper இல்லாமல் சாதாரண உறுப்பை ரெண்டர் செய்கின்றன. அவற்றின் 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 }] } }} />;