culorijsライブラリとbezier-easingライブラリを組み合わせてカスタムグラディエントカラーを作ってみよう

こんにちわ。nap5です。

culorijsライブラリとbezier-easingライブラリを組み合わせてカスタムグラディエントカラーの作り方を紹介したいと思います。

デモサイトです。

Hello React!

デモコードです。

Glitch Code Editor ･ﾟ✧

使用したライブラリは以下になります。

culorijsライブラリはこちらです。

Getting Started · culori

bezier-easingライブラリはこちらです。

GitHub - gre/bezier-easing: cubic-bezier implementation for your JavaScript animation easings – MIT License

一部D3の関数も呼び出しています。

D3 by Observable | The JavaScript library for bespoke data visualization

完成した関数はこちらです。

import * as d3 from 'd3';
import {transform} from 'framer-motion';
import {samples, interpolate, formatHex} from 'culori';
import easing from 'bezier-easing';

const makeGradient = (step, interpolateColor) => {
  const bezier = easing(0, 0, 0.18, 0.99);
  const result = samples(step)
    .map(bezier)
    .map(transform([0, 1], [0.2, 0.8]))
    .map((t)=>{
      return {t,color:interpolateColor(t)}
    })
    .map((info)=>{
      return {...info, color: formatHex(info.color)}
    })
    .map((info) => {
      return `${info.color} ${info.t * 100}%`;
    });
  return result.join();
};

この関数の呼び出し側では以下のようにします。

const gradient = makeGradient(5, d3.interpolateInferno);
console.log(gradient);

以下の関数ではデフォルトだとステップを一定間隔で刻みます。

samples(step)

そこで、ベジェ関数でステップに変化を与えています。

cubic-bezier.com

const bezier = easing(0, 0, 0.18, 0.99);

次にtransformで入力と出力を引数に定義していきます。
欲しい数値リストを出力側で調節します。
この場合、[0,1]を[0.2,0.8]へ変換しています。

transform([0, 1], [0.2, 0.8])

あとは得られた数値リストを色へ変換しています。
ベジェ関数で動きを持たせた値をパーセント変換に使用しているところがポイントです。

    .map((t)=>{
      return {t,color:interpolateColor(t)}
    })
    .map((info)=>{
      return {...info, color: formatHex(info.color)}
    })
    .map((info) => {
      return `${info.color} ${info.t * 100}%`;
    });

パラメータを調節して自分だけのグラディエントカラーを作ってみるのも面白いかもしれませんね。

デモコードでコメントアウトした部分をいろいろいじってみるのがいいかもしれません。

Glitch Code Editor ･ﾟ✧

最近では、Twitterでモックアップ動画を公開しているので、こちらもよかったら、覗いてみてください。

Tweets by napzak5

最後に、Udemyでコースを公開しました。
良かったら覗いてみてください。

FaunaDBを使用したRSSキュレーションミニシステムの構築

また、コースの内容紹介記事は以下になります。

簡単ですが、以上です。