मार्गदर्शक · 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 सह, चालवते.