Shader Animation с использованием Skia

Skia позволяет создавать шейдеры, используя свой синтаксис, похожий на OpenGL, под названием SkSL (Skia Shading Language).

Пример работы с шейдерами:

import {Skia, Canvas, Shader, Fill} from "@shopify/react-native-skia";
 
const source = Skia.RuntimeEffect.Make(`
vec4 main(vec2 pos) {
  // normalized x,y values go from 0 to 1, the canvas is 256x256
  vec2 normalized = pos/vec2(256);
  return vec4(normalized.x, normalized.y, 0.5, 1);
}`)!;
 
const SimpleShader = () => {
  return (
    <Canvas style={{ width: 256, height: 256 }}>
      <Fill>
        <Shader source={source} />
      </Fill>
    </Canvas>
  );
};

Поиграться с шейдерами можно в Playground, а на видео — пример реализации Shader для анимации кредитной карты на базе туториала.

В нём подробно описан процесс и ментальная модель создания подобных эффектов.

React Native World | Навигация по каналу