React DOM için hareket · React Native'in Animated API'si

Hareketi bir kez yazın. Akıcı çalışır, asla bozulmaz.

Animated, React Native'in Animated'ını web'e getirir. Tek bir değer, her karede React render'ı olmadan istediğiniz kadar öğeyi yönetir; desteklenen hareketi tarayıcının kendisi oynatır ve her kesinti ekranda olandan devam eder.

Başlayın Örneklere bakın

Kurulum

npm install @kkwaenggwari/animated

Tek bir saat değeri 64 şeklin tamamının dalgalarını yönetir. İşaretçiyi sahnenin üzerinde gezdirin.

Bu sürümde ölçüldü

Masaüstü bir PC'de başsız Chrome üzerinde 1.0.0 derlemesiyle ölçüldü. Sayılar cihaza göre değişir. Nasıl ölçtük

0.00ms400 öğe hareket ederken kare başına JavaScript
Animated öğelerdeki sonlu transform ve opacity hareketini tarayıcı oynatır. Sayfanın kendi kare callback'leri hiçbir iş yapmaz.
0.13msTek değer 10.000 öğeyi yönetirken kare başına JavaScript
Değer tek bir CSS değişkeni yazar; her öğe kendi stilini CSS'te bu değişkenden türetir.
0Hareket sırasında React render'ları
Değerler asla React durumundan geçmez. Bileşenler kare değiştiğinde değil, props'unuz değiştiğinde render edilir.

01 · Basit

Zaten bildiğiniz API, sıradan React style üzerinde

timing, spring, interpolate, loop ve Animated.event React Native'deki ad ve yapılandırmalarını korur. Değer doğrudan sıradan style prop'una girer; ilk hareketten önce özel bir bileşen öğrenmeniz gerekmez.

React Native kodunu Animated.View'u Animated.div olarak yeniden adlandırarak taşıyın.
Tek bir değer bir şeridi, bir kadranı ve bir kart sırasını aynı anda, her birini kendi aralığıyla hareket ettirebilir.
useAnimated tarifin sahibidir: bağlanınca başlar, bir bağımlılık değişince yeniden başlar ve ayrılınca temizler.

Örnek hazırlanıyor…

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

App.jsx

import { Easing, delay, loop, sequence, spring, timing, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

const curves = {
  linear: Easing.linear,
  inOut: Easing.inOut(Easing.cubic),
  back: Easing.out(Easing.back(1.7)),
  bounce: Easing.bounce,
};

export default function App({ tempo = 'spring', duration = 900, easing = 'inOut' }) {
  // One value. The recipe restarts when a prop changes.
  const progress = useAnimated(
    0,
    (value) => {
      const go = (toValue) =>
        tempo === 'spring'
          ? spring(value, { toValue, stiffness: 120, damping: 11 })
          : timing(value, { toValue, duration, easing: curves[easing] });
      loop(sequence([go(1), delay(500), go(0), delay(500)]));
    },
    [tempo, duration, easing],
  );

  const x = progress.interpolate({ inputRange: [0, 1], outputRange: ['0px', '200px'] });
  const turn = progress.interpolate({ inputRange: [0, 1], outputRange: ['-90deg', '180deg'] });

  return (
    <div className="stage">
      <div className="track">
        <div className="fill" style={{ transform: `scaleX(${progress})` }} />
      </div>
      <div className="row">
        <div className="dial">
          <i style={{ transform: `rotate(${turn})` }} />
        </div>
        <div className="lane">
          <div className="puck" style={{ transform: `translateX(${x})` }} />
        </div>
      </div>
      <div className="cards">
        {[0, 1, 2, 3].map((index) => {
          const start = index * 0.15;
          const lift = progress.interpolate({
            inputRange: [start, start + 0.55],
            outputRange: ['0px', '-26px'],
            extrapolate: 'clamp',
          });
          return (
            <div key={index} className="card" style={{ transform: `translateY(${lift})` }}>
              {index + 1}
            </div>
          );
        })}
      </div>
      <p className="note">One value → 7 elements, ordinary React style</p>
    </div>
  );
}

styles.css

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

.track {
  height: 12px;
  border-radius: 999px;
  background: #eef2ff;
  overflow: hidden;
}

.fill {
  height: 100%;
  background: #2854ff;
  transform-origin: left center;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
}

.dial {
  position: relative;
  flex: none;
  width: 72px;
  height: 72px;
  border: 2px solid #e4e6ef;
  border-radius: 50%;
}

.dial i {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 30px;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: #8fb0ff;
  transform-origin: left center;
}

.lane {
  flex: 1 1 244px;
  max-width: 260px;
  height: 44px;
  border-radius: 999px;
  background: #f5f6fb;
}

.puck {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #5c7cff;
}

.cards {
  display: flex;
  gap: 12px;
  padding-top: 30px;
}

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

.note {
  margin: 0;
  color: #5b6070;
  font-size: 14px;
}

React Native'dekiyle aynı çağrılar

Spinner.jsx

// React Native
<Animated.View style={{ transform: [{ rotate }] }} />

// React DOM with @kkwaenggwari/animated — the rest is identical
<Animated.div style={{ transform: [{ rotate }] }} />

const spin = useAnimatedValue(0);
const rotate = spin.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '360deg'] });

Animated.loop(
  Animated.timing(spin, { toValue: 1, duration: 900, easing: Easing.linear, useNativeDriver: true }),
).start();

02 · Hızlı

Her karede React render'ı yok

Hook'un değeri bir CSS değişkenidir. Doğrusal interpolasyonlar ve aritmetik, bu değişkenin kesin calc() ifadelerine dönüşür; böylece her kare tek bir yazmadır ve gerisini tarayıcı hesaplar. Animated.<tag> öğelerindeki sonlu transform ve opacity hareketini tarayıcı, kare callback'i olmadan oynatır.

Nokta sayısını değiştirin: sayaç, React'in her değişiklikte bir kez render ettiğini, asla her karede etmediğini gösterir.
scope değeri her öğe yerine kapsayıcıya bir kez yazar.
inspect(element) her özelliğin hangi yolu neden kullandığını söyler.

Örnek hazırlanıyor…

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

App.jsx

import { useRef } from 'react';
import { Easing, loop, timing, useAnimated } from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ count = 1600, amplitude = 16, duration = 2400 }) {
  const field = useRef(null);
  const renders = useRef(0);
  renders.current += 1;

  // Written once per frame on the field; every dot derives from it in CSS.
  const wave = useAnimated(
    0,
    (value) => {
      loop(timing(value, { toValue: 1, duration, easing: Easing.linear }));
    },
    [duration],
    { scope: field },
  );

  const columns = Math.ceil(Math.sqrt(count * 2.8));
  const dots = Array.from({ length: count }, (_, index) => index);

  return (
    <div className="stage">
      <div className="meta">
        <span>{count.toLocaleString('en-US')} dots</span>
        <span>React renders: {renders.current}</span>
      </div>
      <div className="field" ref={field} style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>
        {dots.map((index) => {
          const phase = (index % columns) / columns + Math.floor(index / columns) / 18;
          return (
            <i
              key={index}
              style={{
                transform: `translateY(calc(sin((${wave} + ${phase}) * 1turn) * ${amplitude}px))`,
                opacity: `calc(0.55 + cos((${wave} + ${phase}) * 1turn) * 0.45)`,
              }}
            />
          );
        })}
      </div>
    </div>
  );
}

styles.css

.stage {
  display: grid;
  gap: 16px;
  padding: 24px;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font:
    600 14px/1.4 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  color: #1a33c7;
}

.field {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 2px;
  height: 280px;
  padding: 28px 16px;
  border-radius: 16px;
  background: #0b1440;
  overflow: hidden;
}

.field i {
  display: block;
  width: 100%;
  max-width: 8px;
  aspect-ratio: 1;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background: #5c7cff;
}

.field i:nth-child(3n) {
  background: #8fb0ff;
}

.field i:nth-child(7n) {
  background: #ffffff;
}

03 · Kararlı

İstediğiniz yerde kesin. Devam eder.

Yeni bir hedef öğenin ekrandaki yerinden başlar ve yay hızı da korur; yarı yolda geri dönüş önce durmak yerine akıcı biçimde kıvrılır. Bir hook'ta bildirilen denetleyiciler değiştirilince ve ayrılınca durur ve serbest bırakılır; sunucuda render edilen markup hidrasyondan sonra da animasyona devam eder.

Hızlıca iki kez tıklayın: spring ile yol kıvrılır, timing ile konum korunur ama yeni bir eğri başlar.
Durdurmak değeri olduğu yerde bırakır; hiçbir şey bitiş durumuna sıçramaz.
Ayrılma, rota değişikliği ya da gizli sekmeden sonra unutulmuş kare döngüsü kalmaz.

Örnek hazırlanıyor…

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

App.jsx

import { useRef } from 'react';
import {
  Easing,
  spring,
  timing,
  useAnimatedListener,
  useAnimatedValueXY,
} from '@kkwaenggwari/animated';
import './styles.css';

export default function App({ tempo = 'spring', stiffness = 140, damping = 14 }) {
  const point = useAnimatedValueXY({ x: 80, y: 120 });
  const canvas = useRef(null);

  const moveTo = (event) => {
    const box = event.currentTarget.getBoundingClientRect();
    const toValue = { x: event.clientX - box.left, y: event.clientY - box.top };
    // A new target starts from where the puck is now.
    const motion =
      tempo === 'spring'
        ? spring(point, { toValue, stiffness, damping })
        : timing(point, { toValue, duration: 700, easing: Easing.inOut(Easing.cubic) });
    motion.start();
  };

  // Draw the path the puck actually travels.
  const last = useRef(null);
  useAnimatedListener(point, ({ x, y }) => {
    const context = canvas.current?.getContext('2d');
    if (!context) return;
    context.fillStyle = 'rgba(11, 20, 64, 0.025)';
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
    if (last.current) {
      context.strokeStyle = tempo === 'spring' ? '#8fb0ff' : '#ffffff';
      context.lineWidth = 4;
      context.lineCap = 'round';
      context.beginPath();
      context.moveTo(last.current.x, last.current.y);
      context.lineTo(x, y);
      context.stroke();
    }
    last.current = { x, y };
  });

  return (
    <div className="stage">
      <div className="track" onPointerDown={moveTo}>
        <canvas ref={canvas} width={720} height={320} />
        <div
          className="puck"
          style={{
            transform: `translate(calc(${point.x} * 1px - 50%), calc(${point.y} * 1px - 50%))`,
          }}
        />
        <p>Click anywhere. Click again before it stops.</p>
      </div>
    </div>
  );
}

styles.css

.stage {
  padding: 20px;
}

.track {
  position: relative;
  height: 320px;
  border-radius: 16px;
  background: #0b1440;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
}

.track canvas {
  position: absolute;
  inset: 0;
  width: 720px;
  height: 320px;
}

.puck {
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #2854ff;
}

.track p {
  position: absolute;
  inset: auto 16px 12px;
  margin: 0;
  color: #b8c4ef;
  font-size: 14px;
  pointer-events: none;
}

Neler yapabilirsiniz

Ayarlanabilir seçenekler ve tam kaynak koduyla eksiksiz kalıplar.

Tüm örnekler

Animated üzerine kurulu

Hazır bir bileşen mi lazım? Animated Chorus.

Dönen sayılar, yer değiştiren kart vurguları, ilerleme, sheet'ler ve animasyonlu listeler; doğrudan React ve React Native'e takılır. Bu üçü şu anda bu sayfada çalışıyor.

Animated Chorus'u ziyaret edin

Üç dakikada başlayın

Paketi kurun, ilk değeri hareket ettirin, sonra önünüzdeki iş için bir kılavuz seçin.

npm install @kkwaenggwari/animated