Guides · 02

Timing, fjedre og komposition

Vælg en driver, kombinér flere, og vid præcis, hvad der sker, når én stoppes eller udskiftes.

timing, spring og decay

timing følger en kurve i en fast duration. spring følger fysik og har ingen fast længde. decay starter med en hastighed og sætter farten ned.

De samme drivers tager et tal, et ValueXY eller en post, så { x, y, opacity } kan bevæge sig sammen.

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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

Fjederparametre

Brug én parametrisering. Uden nogen får du React Natives standardfjeder (tension 40, friction 7). En fjeders velocity er som standard hastigheden i den bane, den afbryder.

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

Kombinér

sequence kører efter hinanden, parallel kører samtidig, stagger starter hver efter en forsinkelse, delay venter, og loop gentager. Resultatet er igen en controller, så kompositioner kan indlejres.

Forbereder eksemplet…

JavaScript er slået fra. Koden nedenfor er hele eksemplet.

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 og reset

Hver controller har start(callback?), stop() og reset(). Callbacken får { finished }: false, når bevægelsen blev stoppet eller udskiftet.

At starte en ny driver på den samme værdi udskifter den kørende fra den aktuelle position. Der er intet hop til nogen af enderne.

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

Følg en anden værdi

En levende toValue genstarter driveren, hver gang den værdi ændrer sig, som tracking i React Native. follow(target, source) er den samme fjederforbindelse som navngivet funktion.

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 og keyframes

Easing svarer til React Native: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier og hjælperne in, out, inOut. keyframes(value, frames, options) fører én værdi gennem flere tal med valgfrie times og repeat.