ಮಾರ್ಗದರ್ಶಿಗಳು · 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 ನೊಂದಿಗೆ, ನಡೆಸುತ್ತದೆ.