devnews.pl

Main Menu

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania

logo

devnews.pl

  • Informacje
    • Systemy i przeglądarki
    • Gadżety
  • Narzędzia
  • Frontend
  • Backend
  • QA
  • Języki programowania
Frontend
Home›Frontend›React Native Reanimated 2.0

React Native Reanimated 2.0

By Bernadeta Zapała
5 czerwca 2020
197
0
Share:

Reanimated 2.0 już jest! Biblioteka React Native Animated została ponownie zaimplementowana. Reanimated 2.0 zapewnia zupełnie nowe doświadczenia przy pisaniu animacji wykonawczych w aplikacji. Kolejna nowa wersja rozwiązuje wiele ograniczeń znalezionych w poprzedniej wersji. Kompleksowa i niskopoziomowa abstrakcja interfejsu API biblioteki Animated umożliwia jeszcze większą elastyczność, szczególnie jeśli mowa o interakcjach opartych na gestach.

Reanimated 2.0

Reanimated 1.0

Ogólnie, biblioteka Reanimated pozwala tworzyć animacje i interakcje zachodzące w wątku interfejsu użytkownika. Celem jest poprawa wydajności oraz interaktywności aplikacji. Ze względu na podejście deklaratywne wcześniejsza wersja Reanimated była w stanie serializować interakcje zgodnie z opisem w JavaScript. Następnie odtwarzała je w natywnym systemie Android lub iOS.

Co nowego?

Przede wszystkim wersja Reanimated 2.0 jest wstecznie kompatybilna z wcześniejszą wersją. Pozwoli to programistom stopniowo przyjmować zmiany. Nowa wersja wprowadza zestaw zupełnie nowych interfejsów API. W związku z tym twórcy postawili sobie za cel zdefiniowanie małych fragmentów kodu JavaScript. Uruchamiałby się podczas reagowania na zdarzenia w wątku interfejsu użytkownika oraz podczas aktualizacji właściwości widoku. Wydanie wersji Reanimated 2.0 pozwoliło także na wydanie odświeżonej dokumentacji z uwzględnieniem wszystkich aspektów nowego API.

API Reanimated oparty na workletach

Pierwszą wprowadzoną zmianą jest wprowadzenie Hooka useAnimatedStyle. Pozwala on na stworzenie powiązania między atrybutami View a kodem, który można wykonać w workletach. W związku z tym, korzystając z useAnimatedStyle przekazuje się worklet jako argument.

Worklet jako argument

Następnie zwrócony obiekt można przekazać Animated.View jako styl:

Z kolei wspólne wartości pozwolą na reaktywność hooka stylu. Podobne do Animated.Value, wspólne wartości mają trzy najważniejsze zadania – przenoszą dane, napędzają animację oraz zapewniają reaktywność. Tą ostatnią osiąga się subskrybując aktualizacje właściwości wartości. Reanimated będzie automatycznie subskrybował aktualizacje, jeśli animowany styl pracy przechwyca wspólną wartość. Styl pracy uruchomi się ponownie po zmianie wartości:

Reanimated 2.0 - kod

Worklety są tylko kodem JavaScript, dlatego logika aktualizacji jest tak złożona, jak to jest konieczne.

Animacje

Bezsprzecznie najważniejszą częścią w Reanimated 2.0 są animacje. Twórcy projektowali interfejs API tak, aby udostępnienie animacji było na wyciągnięcie ręki.  Wprowadzenie natychmiastowych aktualizacji właściwości stylu do animacji, za pomocą Spring, jest kwestią należenia wartości docelowej w pomocniku Spring.

Reanimated2.0 - Spring

Za pomocą tej techniki aktualizacje szerokości widoku będą animowane. Ponadto, animacja przerywa się, więc po aktualizacji wartości docelowej, rozpocznie się od pozycji w danym momencie.

Animacja szerokości w Reanimated 2.0

Źródła:

  • https://blog.swmansion.com/introducing-reanimated-2-752b913af8b3
  • https://github.com/software-mansion/react-native-reanimated
TagsAnimationReact NativeReanimatedWorklets

Share:

  • Informacje

    Współpraca Slack z Amazon Web Services

  • Frontend

    React Spectrum – zbiór bibliotek React firmy Adobe

  • css
    Frontend

    Content-visibility – właściwość poprawiająca wydajność

  • 3 marca 2021

    Vite 2.0 wydane z nowymi wtyczkami

  • 25 lutego 2021

    ReacType 5.0 – zmiany we wprowadzaniu komponentów

  • 23 lutego 2021

    Dapr v.1.0 gotowy do fazy produkcji

  • 22 lutego 2021

    ReScript 9.0 z zewnętrzną konfiguracją stdlib

  • 22 lutego 2021

    One UI 3.1 z ciekawymi nowościami dla urządzeń Samsunga

  • 22 lutego 2021

    Windows Terminal Preview 1.6 z nową sekcją ustawień

  • 15 lutego 2021

    Visual Studio Code 1.53 z ulepszeniami debugowania

  • 8 lutego 2021

    Edge 89 beta, Edge Dev 90 i nowości na kanale Canary

  • 2 lutego 2021

    Firefox 85 i Firefox Nightly – nowe wersje przeglądarki Mozilli

  • 29 stycznia 2021

    Billboard.js 2.2.0 z nowymi funkcjami wykresów

  • 26 stycznia 2021

    Kendo UI R1 2021 – nowości dla bibliotek

  • 21 stycznia 2021

    Narzędzie Vno – połączenie Vue i Deno

  • 19 stycznia 2021

    GitHub Enterprise Server 3.0 RC – kandydat do wydania

  • 15 stycznia 2021

    TypeScript 4.2 Beta z ulepszeniami typów krotek

  • 13 stycznia 2021

    Styczniowy Patch Tuesday z luką 0-day

  • 11 stycznia 2021

    Safari Technology Preview 118 dostępne dla programistów

  • 8 stycznia 2021

    Microsoft Launcher na Androida z usprawnionym dotykiem

  • 7 stycznia 2021

    WebStorm 2020.3.1 dostępny dla urządzeń z Apple Silicon

  • 22 grudnia 2020

    ReScript 8.4 z przypiętymi zależnościami

  • 14 grudnia 2020

    Edge 88 beta i przeglądarka na kanale Canary dostępne!

  • 9 grudnia 2020

    Chrome 88 Beta z nowościami w WebXR

  • 9 grudnia 2020

    Snowpack 3.0 RC z eksperymentalnymi funkcjami

  • 4 grudnia 2020

    Android Studio Arctic Fox – nowe wydanie narzędzia Google

  • 4 grudnia 2020

    The Hack Summit 2020 – konferencja IT Security

  • 2 grudnia 2020

    PowerToys 0.27 z poprawkami błędów

  • 2 grudnia 2020

    Aleph.js alfa z funkcją importowania map

  • 27 listopada 2020

    Cypress 6.0 zwiększa zakres możliwości obsługi sieci

  • 26 listopada 2020

    Firefox 83 przyspiesza i wprowadza tryb HTTPS-Only

  • 25 listopada 2020

    Electron 11.0 z obsługą Apple Silicon

  • 25 listopada 2020

    Prettier 2.2 z obsługą najnowszego TypeScript 4.1

 

 

Jesteśmy pasjonatami najnowszych technologii w świecie programowania. Zbieramy dla Was informacje i porady z całego świata, które sprawią, że Twoja praca stanie się jeszcze bardziej efektywna.

Obserwuj nas codziennie, aby być na bieżąco oraz śmiało udostępniaj nasze posty.

Zespół DevNews

Kategorie

  • Backend
  • Bez kategorii
  • Frontend
  • Gadżety
  • Informacje
  • Języki programowania
  • Narzędzia
  • QA
  • Systemy i przeglądarki

OBSERWUJ NAS

KONTAKT

Chcesz się z nami skontaktować?

Napisz do nas wiadomość: kontakt@devnews.pl

www.devnews.pl | DEVNEWS 2020 | Newsy i ciekawostki ze świata IT