গাইড · 02

Timing, স্প্রিং আর সমন্বয়

একটি driver বাছুন, কয়েকটি জুড়ুন, আর ঠিক জানুন একটি থামলে বা প্রতিস্থাপিত হলে কী হয়।

timing, spring আর decay

timing নির্দিষ্ট duration-এ একটি বক্ররেখা অনুসরণ করে। spring পদার্থবিদ্যা মেনে চলে আর তার নির্দিষ্ট সময়কাল নেই। decay একটি বেগ দিয়ে শুরু করে ধীর হয়।

একই driver সংখ্যা, ValueXY বা রেকর্ড নেয়, তাই { 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;
}

স্প্রিংয়ের প্যারামিটার

একটি প্যারামিটার-সেট ব্যবহার করুন। না দিলে React Native-এর ডিফল্ট স্প্রিং পান (tension 40, friction 7)। স্প্রিংয়ের 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) একই স্প্রিং সংযোগ, নামযুক্ত ফাংশন হিসেবে।

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 আর কীফ্রেম

Easing React Native-এর সঙ্গে মেলে: linear, quad, cubic, sin, circle, exp, elastic, back, bounce, bezier আর সহায়ক in, out, inOut। keyframes(value, frames, options) একটি মানকে কয়েকটি সংখ্যার মধ্য দিয়ে চালায়, ঐচ্ছিক times আর repeat-সহ।