வழிகாட்டிகள் · 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 உடன் இயக்குகிறது.