గైడ్‌లు · 02

Timing, spring-లు, కూర్పు

ఒక driver-ను ఎంచుకోండి, అనేకాన్ని కూర్చండి, ఒకటి ఆపబడినప్పుడు లేదా భర్తీ చేయబడినప్పుడు సరిగ్గా ఏమి జరుగుతుందో తెలుసుకోండి.

timing, spring, decay

timing స్థిర duration కోసం ఒక వక్రాన్ని అనుసరిస్తుంది. spring భౌతికశాస్త్రాన్ని అనుసరిస్తుంది, స్థిర పొడవు లేదు. decay ఒక వేగంతో ప్రారంభమై నెమ్మదిస్తుంది.

అవే driver-లు సంఖ్య, ValueXY లేదా record-ను స్వీకరిస్తాయి; అందువల్ల { x, y, opacity } కలిసి కదలగలవు.

ఉదాహరణ సిద్ధమవుతోంది…

JavaScript ఆఫ్‌లో ఉంది. కింద ఉన్న కోడే పూర్తి ఉదాహరణ.

App.jsx

import { Easing, parallel, spring, timing, useAnimatedValue } from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ stiffness = 180, damping = 12, mass = 1, duration = 500 }) {
  const eased = useAnimatedValue(0);
  const standard = useAnimatedValue(0);
  const custom = useAnimatedValue(0);

  const go = () => {
    const toValue = custom.getValue() < 0.5 ? 1 : 0;
    parallel([
      timing(eased, { toValue, duration, easing: Easing.inOut(Easing.cubic) }),
      spring(standard, { toValue }),
      spring(custom, { toValue, stiffness, damping, mass }),
    ]).start();
  };

  const lanes = [
    ['timing', eased],
    ['spring()', standard],
    ['spring(props)', custom],
  ];

  return (
    <div className="stage">
      <button type="button" onClick={go}>
        Go
      </button>
      {lanes.map(([label, value]) => (
        <div key={label} className="lane">
          <code>{label}</code>
          <div className="rail">
            <span
              style={{
                left: `calc(${value} * (100% - 40px))`,
              }}
            />
          </div>
        </div>
      ))}
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 14px;
  padding: 28px;
}

button {
  justify-self: start;
  min-height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #2854ff;
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.lane {
  display: grid;
  grid-template-columns: 120px 1fr;
  align-items: center;
  gap: 12px;
}

.lane code {
  color: #1a33c7;
  font-size: 13px;
}

.rail {
  position: relative;
  height: 40px;
  border-radius: 999px;
  background: #f5f6fb;
  box-shadow: inset -2px 0 0 #e4e6ef;
}

.rail span {
  position: absolute;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #8fb0ff;
}

.lane:first-of-type .rail span {
  background: #5c7cff;
}

.lane:last-of-type .rail span {
  background: #2854ff;
}

spring పారామీటర్లు

ఒకే పారామీటరైజేషన్ వాడండి. ఏదీ లేకపోతే React Native డిఫాల్ట్ spring వస్తుంది (tension 40, friction 7). spring యొక్క velocity డిఫాల్ట్‌గా అది అంతరాయం కలిగించే పథం యొక్క వేగం.

springs.js

spring(value, { toValue: 1 }); // React Native default
spring(value, { toValue: 1, stiffness: 260, damping: 20 }); // physical
spring(value, { toValue: 1, bounciness: 8, speed: 12 }); // React Native style
spring(value, { toValue: 1, tension: 40, friction: 7 }); // origami style

కూర్పు

sequence ఒకదాని తర్వాత ఒకటి, parallel కలిసి, stagger ప్రతిదాన్ని ఆలస్యం తర్వాత ప్రారంభిస్తుంది, delay వేచి ఉంటుంది, loop పునరావృతం చేస్తుంది. ఫలితం మళ్లీ ఒక కంట్రోలర్; అందువల్ల కూర్పులను ఒకదానిలో ఒకటి పెట్టవచ్చు.

ఉదాహరణ సిద్ధమవుతోంది…

JavaScript ఆఫ్‌లో ఉంది. కింద ఉన్న కోడే పూర్తి ఉదాహరణ.

App.jsx

import {
  delay,
  loop,
  parallel,
  sequence,
  spring,
  stagger,
  timing,
  useAnimated,
} from '@kkwaenggwari/animated';
import './styles.css';

const keys = ['a', 'b', 'c', 'd', 'e'];

export default function App({ mode = 'stagger', gap = 90 }) {
  const bars = useAnimated(
    { a: 0, b: 0, c: 0, d: 0, e: 0 },
    (value) => {
      const group = (list) =>
        mode === 'sequence'
          ? sequence(list)
          : mode === 'parallel'
            ? parallel(list)
            : stagger(gap, list);
      const rise = keys.map((key) =>
        spring(value[key], { toValue: 1, stiffness: 220, damping: 16 }),
      );
      const fall = keys.map((key) => timing(value[key], { toValue: 0, duration: 260 }));
      loop(sequence([group(rise), delay(500), group(fall), delay(300)]));
    },
    [mode, gap],
  );

  return (
    <div className="stage">
      {keys.map((key) => (
        <span key={key} style={{ transform: `scaleY(calc(0.15 + ${bars[key]} * 0.85))` }} />
      ))}
    </div>
  );
}

styles.css

.stage {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  height: 260px;
  padding: 32px;
}

.stage span {
  width: 44px;
  height: 100%;
  border-radius: 12px;
  background: #2854ff;
  transform-origin: bottom;
}

.stage span:nth-child(2n) {
  background: #8fb0ff;
}

.stage span:nth-child(3) {
  background: #5c7cff;
}

start, stop, reset

ప్రతి కంట్రోలర్‌కు start(callback?), stop(), reset() ఉంటాయి. callback { finished } పొందుతుంది: మోషన్ ఆపబడినా లేదా భర్తీ చేయబడినా false.

అదే విలువపై కొత్త driver ప్రారంభిస్తే, నడుస్తున్నది ప్రస్తుత స్థానం నుండి భర్తీ చేయబడుతుంది. ఏ చివరకూ దూకడం లేదు.

controller.js

const move = timing(value, { toValue: 1, duration: 600 });

move.start(({ finished }) => {
  // finished is false when stopped or replaced by a new animation
});
move.stop(); // keeps the value where it is on screen
move.reset(); // returns to where this animation started

మరో విలువను అనుసరించడం

సజీవ toValue, ఆ విలువ మారినప్పుడల్లా driver-ను మళ్లీ ప్రారంభిస్తుంది — React Native tracking లాగే. follow(target, source) అదే spring కనెక్షన్‌ను పేరున్న ఫంక్షన్‌గా ఇస్తుంది.

tracking.js

// A live toValue tracks another value, like React Native tracking.
spring(badge, { toValue: pointer, stiffness: 300, damping: 26 }).start();

// follow() is the same connection as a named function.
follow(badge, pointer, { stiffness: 300, damping: 26 });

Easing, keyframes

Easing React Native‌తో సరిపోలుతుంది: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier, మరియు in, out, inOut సహాయకాలు. keyframes(value, frames, options) ఒక విలువను అనేక సంఖ్యల గుండా, ఐచ్ఛిక times, repeat‌తో నడిపిస్తుంది.