表情をアニメーションでコントロールできるニコちゃんマーク風な顔パーツを作成するJavaScriptライブラリを作成しました。 #JavaScript

百聞は一見にしかなんちゃらということで、まずはデモをお試しください。

というように、簡単な感情表現ができるシンプルな顔パーツを設置できるJavaScriptライブラリです(jQueryは必要ありません)。すべてのパーツの変化はスタイル操作で行っているので画像なども不要です。JavaScriptのソース1つ読み込むだけで使用できます。

設置した顔パーツの眉毛、目、口の各パーツを操作して表情を操作する事ができます。アニメーションの有無や表情変化のスピードも変更可能です。

表情例

face-emotion.jsをHTML内で読み込みます。

<script type="text/javascript" src="/path/to/face-emotion.js"></script>

HTML内に顔パーツを設置したい空のエレメントを用意します(ID属性を付けてください)。
```
<div id="face"></div>
```
Javascript内で上記エレメントを指定してnew FaceEmotion()を実行します。第1引数に2で用意したエレメントのIDを指定します。
```
var face = new FaceEmotion('face');
```
表情の変化はnew FaceEmotion()の戻り値である変数のset()メソッドを介して行います。眉毛、目、口それぞれ-100～100の間で指定できます。0が無表情、負数はネガティブ系の表情、整数はポジティブ系の表情です。
```
// ドヤ顔させる
face.set({
  eyebrow: 20,
  eye: -40,
  mouth: 30
});
```

その他細かいオプションなどについてはGitHubリポジトリのREADME.mdをご覧ください。

モダンブラウザとIE9以上で動作します。IE8以下でも一応動きますが、CSS3のスタイルを多用しているのでスタイルが反映されずマインクラフトのキャラクターみたいな顔になってしまいます。

まあこれはこれで味があっていいかもしれませんが。

以上、使い道があるのかどうか微妙なライブラリの紹介でした。