Animated1.0.0

Ungefär 5 minuter · React 16.8+ · React DOM

Kom igång

Från installation till gester och rörelse in och ut i sex steg. Varje steg är en liten fungerande komponent.

  1. Installera

    Animated har inga beroenden vid körning. React 16.8+ är ett peer-beroende.

    Paketets startpunkt är markerad 'use client'. I Next.js App Router kan en serverlayout rendera AnimatedProvider; använd hooks och Animated.<tag> i Client Components.

    npm install @kkwaenggwari/animated

    Importen @kkwaenggwari/animated hittas i din editor.

  2. Flytta ditt första värde

    useAnimatedValue(1) äger ett levande tal under komponentens livstid. Lägg det direkt i style: det blir en CSS-variabel, så React renderar inte medan det ändras.

    timing(value, { toValue, duration }).start() flyttar det. Ett nytt tryck halvvägs startar från den aktuella opaciteten.

    Förbereder exemplet…

    Rutan tonar ut och tillbaka, och ett andra tryck halvvägs vänder från där den är.

  3. Härled många utdata från ett värde

    interpolate mappar värdet till längder, vinklar eller tal. Utan easing blir det ett exakt calc() av samma variabel, så fem banor kostar lika mycket som en.

    Olika indataintervall på samma värde skapar en kaskad utan fem separata animationer.

    Förbereder exemplet…

    Ett tryck flyttar fem banor i kaskad; att ändra spridningen ändrar bara intervallen.

  4. Beskriv ett mål

    Animated.button renderar en vanlig knapp. seed är första bildrutan, pose är var den ska vara nu och tempo är hur den kommer dit.

    När pose ändras halvvägs svänger elementet från där det är på skärmen och behåller sin hastighet med en fjäder.

    Förbereder exemplet…

    Att klicka snabbt på kort får aldrig något av dem att hoppa.

  5. Koppla in inmatning

    input(ref, moveInput(...)) skriver pekarens koordinater till värden. follow(target, source) får ett värde att följa ett annat med en fjäder.

    Allt som deklareras i en useAnimated-factory ägs av komponenten: lyssnare och fjädrar stoppas vid unmount eller när ett beroende ändras.

    Förbereder exemplet…

    Kortet lutar mot pekaren och lägger sig tillbaka när pekaren lämnar.

  6. Animera utgången

    Att ta bort ett React-barn tar normalt bort det direkt. Animated.Keep behåller barn med key tills deras depart-pose är klar.

    wait renderar nya barn först när alla utgångar är klara.

    Förbereder exemplet…

    Avfärdade meddelanden lämnar med vald rörelse innan de försvinner.

Du har hela modellen

Värden, mål, inmatning och utgångar delar samma controllers, avbrottsregler och städning. Guiderna går djupare i var och en.

Sök

Skriv för att söka i dokumentationen.