Kılavuzlar · 01

Değerler ve stil

Değeri bileşende tutun, çıktıları calc() ile türetin ve CSS değişkeninin nereye yazılacağını seçin.

Değere sahip olmak

useAnimatedValue(initial) bileşene ait bir Value oluşturur. Bir sayı ya da alanları ayrı değerler olan { x: 0, opacity: 1 } gibi bir kayıt kullanın.

Sıradan style içinde hook değeri var(--kkwa-…, initial) belirtecidir. Güncellemeler bu değişkeni onu kullanan öğelere yazar; React render etmez.

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

App.jsx

import { timing, useAnimatedValue } from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ duration = 600 }) {
  const progress = useAnimatedValue(1);

  const toggle = () => {
    const toValue = progress.getValue() > 0.5 ? 0 : 1;
    timing(progress, { toValue, duration }).start();
  };

  return (
    <div className="stage">
      <button type="button" onClick={toggle}>
        Toggle
      </button>
      <div className="box" style={{ opacity: progress }}>
        Ready
      </div>
    </div>
  );
}

styles.css

.stage {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 200px;
  padding: 28px;
}

button {
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #2854ff;
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.box {
  display: grid;
  place-items: center;
  width: 140px;
  height: 140px;
  border-radius: 24px;
  background: #16181d;
  color: #fff;
  font-weight: 700;
}

calc() ile türetmek

Easing'siz interpolasyon ve bir sabitle add, subtract, multiply ya da divide, aynı değişkenin kesin calc() ifadelerine dönüşür. Tarayıcı bunları hesaplar; bunlar için hiçbir karede JavaScript çalışmaz.

Slide.jsx

const progress = useAnimatedValue(0);

// A linear interpolation of a hook value is a calc() of the same CSS variable.
const x = progress.interpolate({ inputRange: [0, 1], outputRange: ['0px', '180px'] });
const half = multiply(progress, 0.5);

<div style={{ opacity: half, transform: `translateX(${x})` }} />;

Örnek hazırlanıyor…

JavaScript kapalı. Aşağıdaki kod örneğin tamamıdır.

App.jsx

import { spring, useAnimatedValue } from '@kkwaenggwari/animated';
import './styles.css';

const colors = ['#2854ff', '#4a6bff', '#8fb0ff', '#7d9bff', '#5c7cff'];

export default function App({ distance = 220, spread = 0.12 }) {
  const progress = useAnimatedValue(0);

  const toggle = () => {
    const toValue = progress.getValue() < 0.5 ? 1 : 0;
    spring(progress, { toValue, stiffness: 150, damping: 16 }).start();
  };

  return (
    <div className="stage">
      <button type="button" onClick={toggle}>
        Move all
      </button>
      <div className="lanes">
        {colors.map((color, index) => {
          const start = index * spread;
          const x = progress.interpolate({
            inputRange: [start, start + 1 - spread * 4],
            outputRange: ['0px', `${distance}px`],
            extrapolate: 'clamp',
          });
          const turn = progress.interpolate({
            inputRange: [0, 1],
            outputRange: ['0deg', `${90 + index * 45}deg`],
          });
          return (
            <div key={color} className="lane">
              <span style={{ background: color, transform: `translateX(${x}) rotate(${turn})` }} />
            </div>
          );
        })}
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 20px;
  padding: 28px;
}

button {
  justify-self: start;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: #2854ff;
  color: #fff;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.lanes {
  display: grid;
  gap: 10px;
}

.lane {
  height: 36px;
  max-width: 320px;
  border-radius: 999px;
  background: #f5f6fb;
}

.lane span {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 10px;
}

Renkler ve kendi hesaplamalarınız

Renkler, easing'li interpolasyonlar, modulo, diffClamp ve AnimatedComputed calc() olarak yazılamaz. useAnimatedCSS(node) onlara JavaScript'in güncellediği, bileşenle aynı ömre sahip kendi CSS değişkenini verir.

Böyle bir düğümü doğrudan style içinde kullanmak hata fırlatır; böylece maliyet asla gizli kalmaz.

Glow.jsx

const progress = useAnimatedValue(0);

// Colors and eased curves are not calc() expressions: give them their own CSS value.
const color = useAnimatedCSS(
  progress.interpolate({ inputRange: [0, 1], outputRange: ['#3d3bf3', '#22b8f0'] }),
);

<div style={{ background: color }} />;

Tarifin sahibi hook olsun

useAnimated(initial, factory, deps) değerin ve factory içinde senkron bildirilen her denetleyicinin sahibidir. Bağlanınca başlar, bir bağımlılık değişince yeniden başlar ve ayrılınca durur.

Olaylarla yönetilen oynatma için { autoStart: false } verin, sonra döndürülen değerde start(), stop() ya da reset() çağırın.

Intro.jsx

const intro = useAnimated(
  { opacity: 0, y: 24 },
  (value) => {
    parallel([
      timing(value.opacity, { toValue: 1, duration: 400 }),
      spring(value.y, { toValue: 0, stiffness: 220, damping: 20 }),
    ]);
  },
  [],
);

<section style={{ opacity: intro.opacity, transform: `translateY(calc(${intro.y} * 1px))` }} />;

Birçok öğe için tek yazma

Varsayılan olarak değişkeni, satır içi stili değeri kullanan her öğe alır. scope ile değişken kapsayıcıya bir kez yazılır ve çocukları onu miras alır: yüzlerce öğe için doğru seçim.

AnimatedProvider scope={ref} altındaki tüm hook değerleri için varsayılan scope'u ayarlar.

Field.jsx

const field = useRef(null);

// Written once on the field; every child that uses the value inherits it.
const wave = useAnimatedValue(0, { scope: field });

<div ref={field}>
  {items.map((item) => (
    <i key={item} style={{ transform: `rotate(calc(${wave} * 1turn))` }} />
  ))}
</div>;

JavaScript'te değer okumak

getValue() React aboneliği olmadan bir anlık görüntü döndürür. useAnimatedListener(node, fn) her değişiklikte sizi çağırır ve ayrılınca listener'ı kaldırır. Render için değil, canvas'a çizim ya da analitik için kullanın.