Poznaj React Native Skia

Kiedy kilka lat temu Google wypuściło Fluttera, ich motto brzmiało bardzo prosto: Masz kontrolę nad każdym pikselem na ekranie. Co w zasadzie przekłada się na Od teraz możesz zrobić wszystko w dowolnym miejscu swojej aplikacji, włączając w to te urocze płynne menu lub animacje ścieżek, które mogłeś zrobić tylko w After Effects. Ale jak oni to niby zrobili?

Było to możliwe dzięki bibliotece Skia i silnikowi renderującemu, który omówimy w tym artykule. Dla tych, którzy nie wiedzą, Skia jest systemem renderowania akcelerowanym układami GPU, który zawiera wiele graficznych API, w tym rysowanie ścieżek, filtry obrazu, niestandardowe shadery i cały zestaw narzędzi SVG. Dlatego ludzie z Fluttera wpadli na pomysł, że robienie Skia canvas jako cały obszar wyświetlania aplikacji i każdy element GUI wewnątrz, zostałby przerysowany i wyglądałby jak natywny. Ponieważ wszystkie są w Skia canvas, to jeśli zrobiłbyś coś wymyślnego i „fancy”, przykładowo rozmywanie, to też mógłbyś to zrobić. To oczywiście błyskawicznie wywołało efekt wow w społeczności i od tego czasu ludzie tworzyli ciekawe i barwne projekty dla swojej aplikacji.

Wiemy już czym jest Skia, tak więc wróćmy do tematu naszego artykułu;

Jeśli jesteś programistą React Native, który uwielbia oglądać tutoriale, czytać wszystkie artykuły, robić wszystkie potrzebne rzeczy, aby się doskonalić, to zapewne jest szansa, że napotkałeś w swoich łowach programistę Williama Candillona, który poświęcił się animacjom i interaktywnym UI w React Native. Na swoim kanale na YouTube ma mnóstwo ambitnych tutoriali, dzięki którym opanujesz animacje w React Native lub animacje w ogóle. Oglądając jego filmy, dowiedziałem się również sporo o koncepcjach i technikach matematycznych.

Mniej więcej w zeszłym roku William i jego przyjaciel Christian Falch postanowili „przenieść” bibliotekę Skia na React Native i stworzyli wspaniałą paczkę o nazwie react-native-skia.

Ta biblioteka zawiera prawie wszystkie API biblioteki Skia wraz z technikami animacji, które mogą być znane z react-native-reanimated. Jeśli kiedykolwiek używałeś react-three-fiber do animacji Three JS, ta sama koncepcja ma zastosowanie tutaj. Każdy interfejs API Skia jest wykonywany w oddzielnym kontekście, który używa własnych hooków i wartości. Zacznijmy od przykładu, a później wyjaśnię, co mam na myśli;

import React from "react";
import { Canvas, Circle, Group } from "@shopify/react-native-skia";

export const HelloWorld = () => {
  const width = 256;
  const height = 256;
  const r = 215;
  return (
    <div style={{ flex: 1 }}>
      <Canvas style={{ flex: 1 }}>
        <Group blendMode="multiply">
          <Circle cx={r} cy={r} r={r} color="cyan" />
          <Circle cx={width - r} cy={r} r={r} color="magenta" />
          <Circle cx={width / 2} cy={height - r} r={r} color="yellow" />
        </Group>
      </Canvas>
    </div>
  );
};

Ten kod tworzy 3 koła z trybem multiply blend zastosowanym na nakładających się częściach. Więc najpierw definiujemy Canvas dla naszej farby, które w zasadzie tworzą kontekst dla naszych obiektów. Następnie definiujemy Grupę, która pozwala nam na stosowanie transformacji, przycinania i innych operacji. Grupa jest niezbędnym znacznikiem w RN Skia, ponieważ kształty i inne obiekty nie mają indywidualnych właściwości transformacji. Więc jeśli chciałbyś przenieść na przykład Rectangle, musisz najpierw owinąć go za pomocą Group.

Szybka wrzutka:

React Native Skia ma również imperatywne API, co oznacza, że zamiast deklarować znaczniki, po prostu wykorzystujesz bibliotekę za pomocą zestawu poleceń. Nie obejmuję imperatywnego sposobu w tym artykule, ponieważ jest to trochę sprzeczne z deklaratywną naturą Reacta. Jeśli zauważysz, że masz problem z zastosowaniem swojej logiki w znacznikach, możesz przełączyć się na imperatywne API na podstawie komponentów. Przykład znajdziesz tutaj.

Kształty i ścieżki

Przechodząc dalej do kształtów, React Native Skia ma prymitywne kształty, takie jak prostokąty, koła, wielokąty i linie, a także ścieżki zdefiniowane za pomocą znanej notacji SVG. Atrybuty kształtów są niemal identyczne jak ich odpowiedniki w SVG, na przykład Circle ma cx, cy lub Rect ma x, y i tak dalej. Jedyną rzeczą jest to, że istnieją pewne elementy dla konkretnych przypadków, jak <Box> do optymalizacji wewnętrznych i zewnętrznych cieni lub <Patch> do rysowania powierzchni Coonsa (nie jestem pewien jaki jest przypadek użycia tego elementu).

Kształty przyjmują jako swoje dziecko <Paint>, aby zmodyfikować właściwości malowania, takie jak konturowanie lub wypełnienie. Spójrz na poniższy przykład:

import { Canvas, Circle, Group, Paint } from "@shopify/react-native-skia";

export const PaintDemo = () => {
  const strokeWidth = 10;
  const r = 128 - strokeWidth / 2;
  return (
    <Canvas style={{ flex: 1 }}>
      <Group opacity={0.5}>
        <Circle cx={r + strokeWidth / 2} cy={r} r={r} color="red">
          <Paint color="red" />
          <Paint color="#adbce6" style="stroke" strokeWidth={strokeWidth} />
        </Circle>
      </Group>
    </Canvas>
  );
};

Tutaj mamy znacznik Paint wewnątrz Circle, aby wypełnić lub konturować narysowane przez nas koło. Na początku ta notacja może wydawać się dziwna, ale w rzeczywistości jest o wiele wygodniejsza do określenia relacji z różnymi API. Ta sama struktura dotyczy również Grupy. W tym przykładzie grupa posiada przeźroczystość (opacity), która wpływa na wszystko co znajduje się w środku. Ta zagnieżdżona struktura z elementami niewizualnymi przypomniała mi widżety Fluttera, takie jak Spacing, Center itp. 

Efekty i filtry

No dobrze, to teraz bardziej atrakcyjna część artykułu: Super filtry! Jednym z głównych powodów, dla którego chciałbyś użyć Skia, jest zdecydowanie szeroki zakres efektów graficznych i filtrów, których normalnie nie można znaleźć we frameworku React Native. Będąc silnikiem renderującym, Skia canvas posiada model shaderów, który pozwala modyfikować piksele na ekranie w dowolny sposób. 

Zamiast głupiej właściwości elevation chcesz mieć realny shadow z fajną miękkością w Androidzie? Żaden problem! Doskonałe menu z rozmytym obrazem tła? Da się zrobić. W zestawie znajduje się praktycznie każdy filtr, a także te bardziej złożone, jak Color Filter czy Displacement Map. Dodatkowo istnieją pewne generatory, takie jak Fractal Noise czy Turbulent Noise, które można połączyć z Displacement Map i sprawić, że nasz filtr będzie jeszcze ciekawszy. Jeśli żaden z nich nie jest wystarczający, zawsze możesz napisać własny shader i stworzyć coś unikalnego. Język shaderów jest bardzo podobny do GLSL, który jest używany w WebGL.

No dobra, to zróbmy szybkie demo:

import {
  Canvas,
  Image,
  Turbulence,
  DisplacementMap,
  useImage,
} from "@shopify/react-native-skia";
const Filter = () => {
  const image = useImage(require("./assets/girl.jpg"));
  if (!image) {
    return null;
  }
  return (
    <Canvas style={{ flex: 1 }}>
      <Image image={image} x={0} y={0} width={736} height={920} fit="cover">
        <DisplacementMap channelX="g" channelY="a" scale={20}>
          <Turbulence freqX={0.01} freqY={0.05} octaves={1} seed={2} />
        </DisplacementMap>
      </Image>
    </Canvas>
  );
};

Tutaj wybraliśmy nasz obraz i zdefiniowaliśmy mapę przemieszczeń używając Turbulence, aby wygenerować jakiś rodzaj efektu wypaczenia. Tak wyglądają efekty:

W tym przykładzie pierwszą rzeczą, którą zauważysz, jest hook useImage. React Native Skia posiada własne elementy i są one całkowicie podobne do bazowych komponentów RN, takich jak Image. Znacznik Skia <Image> przyjmuje obrazek w postaci typu SkImage, co można osiągnąć poprzez podanie ścieżki obrazka do hooka useImage. To dlatego, że Skia wykonuje się w wątku UI oddzielającym się od głównego wątku samego React Native. Różnicę zauważysz jeszcze wyraźniej, gdy zaczniesz działać z animacjami. Po załadowaniu naszego obrazka możemy ustawić dowolny filtr jako element dziedziczący znacznik Image. Można tu łączyć dowolne filtry, bawić się różnymi wartościami i osiągać różne rezultaty. Oczywiście nie wspominając o tym, że wartości te są również animowane, co omówimy w innym artykule :)

Maski

Na potrzeby tego artykułu chcę na koniec wspomnieć o funkcjach maskujących. Elementy maskujące nie są jakimiś jednolitymi kształtami, to raczej pojemnik, który przyjmuje dowolny kształt lub rysunek. Jeśli wcześniej używałeś react-native-mask, to jest to po prostu ten sam styl, który wygląda tak jak poniżej:

import {
  Canvas,
  Image,
  Turbulence,
  DisplacementMap,
  useImage,
} from "@shopify/react-native-skia";
const Filter = () => {
  const image = useImage(require("./assets/girl.jpg"));
  if (!image) {
    return null;
  }
  return (
    <Canvas style={{ flex: 1 }}>
      <Mask
        mode="luminance"
        mask={
          <Group>
            <Circle cx={210} cy={210} r={128} color="white" />
          </Group>
        }
      >
        <Image
          image={image}
          x={15}
          y={0}
          width={736 * 0.5}
          height={920 * 0.5}
          fit="cover"
        />
      </Mask>
    </Canvas>
  );
};

Element <Mask> przyjmuje węzeł, którym może być cokolwiek, o ile daje wartość luminancji lub alfa, na której działa element. Tutaj pokazujemy koło maskujące obraz, który wyglądałby jak awatar poniżej:

Możesz oczywiście rysować kształty, wielokąty, a nawet użyć filtrów turbulencji i sprawić, że obraz będzie wyglądał bardziej mętnie.

Wnioski

I to właśnie były główne funkcje React Native Skia, z których możesz korzystać. Pozostał nam jeszcze obszerny temat animacji, o którym tutaj nie wspomniałem, bo rezerwuję go na inny artykuł. Jest też kilka kompromisów, na które chciałbym zwrócić uwagę;

• Biblioteka jest stosunkowo nowa i znajduje się w fazie pomiędzy alfa a beta. Tak więc spodziewaj się błędów i problemów z wydajnością.
• Jeśli chodzi o wydajność, unikaj używania go jako elementu FlatList lub do czegoś generowanego powtarzalnie.
• Czasami własne shadery nie działają poprawnie
• Kiedy element Group ma wiele dzieci, problemy z wydajnością mogą się również pojawić. Staraj się utrzymywać liczbę na niskim poziomie.

Mimo tych i innych problemów biblioteka jest naprawdę niezła i robi świetną robotę. Społeczność jest również bardzo aktywna i responsywna, jestem pewien, że szybko naprawią błędy w nadchodzących wersjach. Gorąco zachęcam do sprawdzenia tej biblioteki już teraz i dać upust swojej kreatywności. A do tego czasu, dobrego kodowania!

 

Oryginał tekstu w języku angielskim przeczytasz tutaj.