ಮಾರ್ಗದರ್ಶಿಗಳು · 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 }] } }} />;