Aloittaminen · 4 vaihetta

Aloita

Asenna paketti, renderöi ensimmäinen komponenttisi, anna komponentille datasi ja valitse, miten se liikkuu. Missään vaiheessa ei ole provideria eikä alustusta.

1
Asennus
Chorus tarvitsee Reactin 19.2 tai uudemman. React Native -sovelluksessa React Native on valinnainen peer, ja sama paketti valitsee natiivikoontinsa automaattisesti.
$
```
npm install @kkwaenggwari/animated-chorus
```
Muuta ei tarvitse määrittää: lisättävää provideria, liitännäistä tai tyylitiedostoa ei ole.
2
Ensimmäinen komponenttisi
Renderöi MotionNumber tilan arvolla. Muuta tilaa, niin luku pyörii. Paina +1 ja sitten ×10 nähdäksesi uuden numeropaikan pyörivän sisään.
App.jsx
```
import { useState } from 'react';
import { MotionNumber } from '@kkwaenggwari/animated-chorus';

export default function App() {
  const [count, setCount] = useState(9);
  return (
    <button onClick={() => setCount(count + 1)}>
      <MotionNumber value={count} />
    </button>
  );
}
```
Valmistellaan esimerkkiä…
Vaihda mode arvoon roll asetuksissa: muuttuneet numeropaikat kulkevat välissä olevien numeroiden kautta.
3
Anna sille datasi
Useita asioita näyttävät komponentit ottavat taulukon. items on datasi, getKey palauttaa vakaan keyn (oletuksena item.id, merkkijonoille ja luvuille kohde itse), ja renderItem piirtää jokaisen kohteen. Komponentti renderöi ja mittaa kohde-elementit puolestasi.
Tabs.jsx
```
import { MotionHighlight } from '@kkwaenggwari/animated-chorus';

const tabs = [
  { id: 'overview', label: 'Overview' },
  { id: 'activity', label: 'Activity' },
];

export function Tabs({ tab, setTab }) {
  // Keys come from item.id; labels from item.label, or renderItem.
  return <MotionHighlight items={tabs} value={tab} onValueChange={setTab} />;
}
```
Keyjen on oltava yksilöllisiä. Kun taulukko muuttuu, vain saapuneet, poistuneet tai siirtyneet kohteet animoituvat.

Valitse, miten se liikkuu

Jokainen komponentti hyväksyy transition-arvon: timing-käyrän tai jousen. motionTokens tarjoaa muutaman esiasetuksen, ja duration-arvollinen jousi kalibroidaan päättymään juuri silloin.

Panel.jsx

import { MotionHeight, motionTokens } from '@kkwaenggwari/animated-chorus';

<MotionHeight open={open} transition={motionTokens.spring.gentle}>…</MotionHeight>
<MotionHeight open={open} transition={{ duration: 300, easing: 'easeOut' }}>…</MotionHeight>
<MotionHeight open={open} transition={{ tempo: 'spring', spring: { stiffness: 300, damping: 30 }, duration: 500 }}>…</MotionHeight>

React Native käyttää samaa importia ja samoja props-arvoja.

Siinä koko alustus

Loput on komponenttien valitsemista. Jokaisella on työpöytä, jossa voit säätää sitä ennen koodin kopioimista.

Asennus

Ensimmäinen komponenttisi

Anna sille datasi

Valitse, miten se liikkuu

Siinä koko alustus