Ghiduri · 03

Componente Animated

Randați elemente obișnuite care se mișcă spre o destinație, răspund la gesturi și pleacă elegant.

Animated.<tag>

Animated.div, Animated.button, Animated.svg și orice alt tag HTML sau SVG randează un element obișnuit, fără înveliș. style-ul lor acceptă valori, iar transformările pot fi tablouri ca în React Native.

Mișcarea finită de transform și opacity pe aceste elemente, inclusiv arcurile, poate fi redată de browser.

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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 și tempo

seed este primul cadru, pose ținta curentă (un obiect sau numele unei intrări din poses), iar tempo un timing sau un arc. Schimbarea doar a lui tempo nu redă din nou o țintă neschimbată.

onRest se declanșează când elementul ajunge.

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')}
/>;

Răspuns la gesturi

respond asociază gesturile cu ținte temporare: hover, focus, focusWithin, press, longPress, drag, inView și altele. Când răspunsul se încheie, elementul revine la poza lui de oriunde s-ar afla.

onResponse raportează începutul și sfârșitul fiecărui răspuns, iar respond={{ press: {} }} urmărește un gest fără nicio schimbare vizuală.

Se pregătește exemplul…

JavaScript este dezactivat. Codul de mai jos este exemplul complet.

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;
}

Valori implicite comune cu Animated.Scope

Animated.Scope transmite un nume de poză, un tempo și valori implicite de animație elementelor Animated din interior.

Menu.jsx

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

Componente proprii

Animated.wrap(Component) — createAnimatedComponent în React Native — face ca o componentă care transmite ref-ul și se rezolvă într-un singur element DOM să accepte aceleași 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 }] } }} />;