Движение за React DOM · Animated API от React Native

Опишете движението веднъж. То е плавно и никога не се чупи.

Animated пренася Animated от React Native в уеб. Една стойност управлява произволен брой елементи без рендер на React на всеки кадър, поддържаното движение се възпроизвежда от самия браузър, а всяко прекъсване продължава от това, което е на екрана.

Започнете Вижте примерите

Инсталиране

npm install @kkwaenggwari/animated

Една стойност на часовник управлява вълнението на всичките 64 форми. Движете показалеца над сцената.

Измерено на тази версия

Измерено с компилация 1.0.0 в headless Chrome на настолен PC. Числата зависят от устройството. Как измервахме

0.00msJavaScript на кадър, докато се движат 400 елемента
Крайното движение на transform и opacity при елементите на Animated се възпроизвежда от браузъра. Собствените callback-и за кадри на страницата не вършат работа.
0.13msJavaScript на кадър, когато една стойност управлява 10 000 елемента
Стойността записва една CSS променлива; всеки елемент извежда стила си от нея чрез CSS.
0Рендери на React по време на движение
Стойностите никога не минават през състоянието на React. Компонентите се рендерират, когато се променят вашите props, а не когато се смени кадърът.

01 · Лесно

Познатият API върху обикновения style на React

timing, spring, interpolate, loop и Animated.event запазват имената и конфигурациите от React Native. Стойността влиза директно в обикновен prop style, така че преди първото движение няма специален компонент за научаване.

Пренесете код от React Native, като преименувате Animated.View на Animated.div.
Една стойност може едновременно да движи лента, циферблат и ред карти, всяко със собствен диапазон.
useAnimated притежава рецептата: стартира при монтиране, рестартира при промяна на зависимост и почиства при демонтиране.

Подготовка на примера…

JavaScript е изключен. Кодът по-долу е пълният пример.

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

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 · Бързо

Без рендер на React на всеки кадър

Стойността на hook е CSS променлива. Линейните интерполации и аритметиката стават точни изрази calc() на тази променлива, така че всеки кадър е един запис, а останалото браузърът извежда сам. Крайното движение на transform и opacity при елементите Animated.<tag> се възпроизвежда от браузъра без callback-и за кадри.

Променете броя точки: броячът показва, че React е рендерирал веднъж на промяна, никога на кадър.
scope записва стойността веднъж в контейнер вместо във всеки елемент.
inspect(element) казва кой път използва всяко свойство и защо.

Подготовка на примера…

JavaScript е изключен. Кодът по-долу е пълният пример.

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 · Стабилно

Прекъснете го навсякъде. Продължава.

Нова цел започва от мястото на елемента на екрана, а пружината запазва и скоростта си, така че обръщането по средата завива плавно, вместо първо да спре. Контролерите, декларирани в hook, се спират и освобождават при замяна и демонтиране, а рендерираната на сървъра разметка продължава да се анимира след хидратация.

Кликнете два пъти бързо: със spring траекторията се извива, с timing позицията се запазва, но започва нова крива.
Спирането оставя стойността там, където е; нищо не скача до крайно състояние.
Никакви забравени цикли на кадри след демонтиране, смяна на маршрут или скрит раздел.

Подготовка на примера…

JavaScript е изключен. Кодът по-долу е пълният пример.

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

Какво можете да изградите

Пълни шаблони с настройки и целия изходен код.

Всички примери

Изградено върху Animated

Нужен ви е готов компонент? Animated Chorus.

Превъртащи се числа, местещи се подчертавания на раздели, напредък, панели и анимирани списъци, които директно влизат в React и React Native. Тези три работят на тази страница точно сега.

Посетете Animated Chorus

Започнете за три минути

Инсталирайте пакета, раздвижете първата стойност и после изберете ръководство за задачата пред вас.

npm install @kkwaenggwari/animated