最近、様々なサイトやバナー・ロゴ等で枠線にグラデーションがかかっている円を見かけることがあります。

Photoshopだとグラデーションオーバレイを使えば簡単に実現できますが、これをReact Native Skiaで実装してみたいと思います。

Skiaでの実装

<Circle />を描画しその子要素にSweepGradient要素を追加します。こうすることで円の描画部分のみ(今回だと枠線のみ)を対象にグラデーションをかけることができます。

const canvasSize = { width: 300, height: 300 }
const center = { x: canvasSize.width / 2, y: canvasSize.height / 2 }

<Canvas style={[canvasSize]}>
  <Circle
    cx={center.x}
    cy={center.y}
    r={100}
    strokeWidth={20}
    style="stroke"
  >
    <SweepGradient
      c={center}
      colors={["cyan", "magenta", "yellow", "cyan"]}
    />
  </Circle>
</Canvas>

複数の円にまとめてグラデーションをかける

複数の対象に対してもグラデーションをかけることが可能です。<Group />でまとめその子要素に<SweepGradient />を追加します。こうすることで対象グループに対してまとめてグラデーションをかけることができます。Groupの外側に配置した要素にはグラデーションはかかりません。

<Group>
  <Circle
    cx={center.x}
    cy={center.y}
    r={100}
    strokeWidth={20}
    style="stroke"
  />
  <Circle
    cx={center.x}
    cy={center.y}
    r={60}
    strokeWidth={20}
    style="stroke"
  />
  <SweepGradient
    c={center}
    colors={["cyan", "magenta", "yellow", "cyan"]}
  />
</Group>

円以外の対象にもグラデーションをかけてみる

最後に、円の中にテキストを配置し一緒にグラデーションをかけてみたいと思います。先の例と同様にテキストと円を<Group>で囲み、<SweepGradient>を設定すればOKです。

<Group>
  <Circle
    cx={center.x}
    cy={center.y}
    r={100}
    strokeWidth={20}
    style="stroke"
  />
  <Text font={font} x={center.x - 56} y={center.y + 12} text="Skia" />
  <SweepGradient
    c={center}
    colors={["cyan", "magenta", "yellow", "cyan"]}
  />
</Group>

コード

今回のすべてのコードはこちらから確認できます。