Granim.jsでグラデーションをアニメーション表示してWebサイトをリッチにしよう


![Kobito.ZPkCyH.png](https://qiita-image-store.s3.amazonaws.com/0/35595/f748bcfd-226d-5271-fa59-37f97ac03b23.png "Kobito.ZPkCyH.png")


GitHubでトレンド入りしているJavaScriptライブラリ[Granim.js](https://sarcadass.github.io/granim.js/index.html)の紹介記事です。

[デモ画面](https://sarcadass.github.io/granim.js/examples.html)が用意されているのでどんなのか見てみてください。


※執筆時点（2016/09/15）のバージョンは`v1.0.5`です。
公開されて間もないため、かなりの頻度で更新されています。
バグフィックスや機能追加等の変更が入ると思います。


## 使い方
基本的には[デモ画面](https://sarcadass.github.io/granim.js/examples.html)や[API](https://sarcadass.github.io/granim.js/api.html)を見てください。

本記事ではそこを見ても分かりづらかった点を記載していきます。

---

ライブラリはzipをダウンロードした方が手軽です。（npmでも提供されています）
https://github.com/sarcadass/granim.js/releases
上記から最新版を落としておきます。


最小構成は以下の様になります。

1. &lt;canvas&gt;タグを用意
2. `granim.js`を読み込む
3. `new Granim({});`でグラデーションを設定する


```html
...
<canvas id="canvas-basic"></canvas>

<script src="granim.js"></script>

<script>
var granimInstance = new Granim({
    element: '#canvas-basic',
    direction: 'left-right',
    opacity: [1, 1],
    states : {
        "default-state": {
            gradients: [
                ['#F00', '#000'],
                ['#000', '#00F']
            ]
        }
    }
});
</script>
...
```


## API補足
[API](https://sarcadass.github.io/granim.js/api.html)で分かりづらかったところを補足しておきます。

### element
document.querySelector()で指定するセレクタの文字列を指定

### name, elToSetClassOn
これらのプロパティはグラデーションの明るいか暗いかで何らかのスタイルの変更を行いたい場合に使用します。

Granim.jsのトップページがこれを使っています。
明るい時は文字を黒ベースに、暗い時は白ベースにスタイルを切り替えています。

![Kobito.ZPkCyH.png](https://qiita-image-store.s3.amazonaws.com/0/35595/f748bcfd-226d-5271-fa59-37f97ac03b23.png "Kobito.ZPkCyH.png")

![Kobito.a5WOpu.png](https://qiita-image-store.s3.amazonaws.com/0/35595/5d59b2b6-aa49-85ce-b2fb-b8d477f2e16a.png "Kobito.a5WOpu.png")

#### name
任意の文字列でOKです

#### elToSetClassOn
`element`プロパティと同様にdocument.querySelector()で指定するセレクタの文字列を指定します。
未指定時は&lt;body&gt;に追加します。

#### 何をしているのか
グラデーションの明るさを計算して、全体的なグラデーションが暗い状態なのか明るい状態なのかを計算します。
暗い状態だった場合は`elToSetClassOn`で取得したHTML要素に以下のクラスを追加します。
`nameの値` + `-dark`

逆に明るい状態だった場合は以下の様に設定します。
`nameの値` + `-light`

例）
nameに`hoge`を指定した場合は
`hoge-dark`, `hoge-light`になります。



### isPausedWhenNotInView
描画しているグラデーションがブラウザの画面外に行った時にアニメーションを止める機能です。
グラデーションの一部が再度ブラウザの画面内にはいると動き始めます。
※スクロールイベントを監視している

### opacity
不透明度です。
opacityで指定する配列の長さはグラデーションの色数と一致させる必要があります。

例）gradientsに3色指定しているのでopacityも3つ

```
    opacity: [1, .5, 0],
    states : {
        "default-state": {
            gradients: [
                ['#485563', '#29323c', '#29323c'],
                ['#00c6ff', '#0072ff', '#0072ff']
            ]
        }
    }
```


### stateTransitionSpeed
複数のStateを切り替える際のスピードです。
※Stateはグラデーションの1セットのことです。
[デモ画面](https://sarcadass.github.io/granim.js/examples.html)の`Interactive Gradients`にStateを切り替えるサンプルがあります。


## 技術概要
元々&lt;canvas&gt;タグにはグラデーションを作るためのメソッドが用意されています。

* [createLinearGradient（線形グラデーション）](http://www.html5.jp/canvas/how4.html)
* [createRadialGradient（円形グラデーション）](http://www.html5.jp/canvas/how5.html)

内部的にはこれらの機能を細かい周期で呼び、&lt;canvas&gt;の中身を更新することでグラデーションのアニメーション化を実現しています。


## あとがき
筆者は画面がガチャガチャ動くようなWebサイトは嫌いなのですが、色が変わるぐらいだとしつこくなくて良いと思います。

[デモ画面](https://sarcadass.github.io/granim.js/examples.html)のヘッダーで使われているようにワンポイントで使うのもありだと思います。
![Kobito.mqLwjB.png](https://qiita-image-store.s3.amazonaws.com/0/35595/29eeb561-d4d3-2382-ad66-b0c7c50b0ada.png "Kobito.mqLwjB.png")