face-emotion.js

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

face-emotion.jsは簡単な感情表現ができるシンプルな顔パーツを設置できるJavaScriptライブラリです(jQuery非依存)。

眉毛、目、口の各パーツを操作して感情を操作する事ができます。表情は即時に変更する事もアニメーションでジワジワと変更させる事も可能です。

DEMO

簡単なデモ

スライダーで表情を自由に操作できるデモです。

使用方法

1. jsディレクトリ内のface-emotion.js(もしくはface-emotion.min.js)をHTML内で読み込みます。

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

2. HTML内に顔パーツを設置したい空のエレメントを用意します(ID属性を付けてください)。

    <div id="face"></div>
   

3. Javascript内で上記エレメントを指定してnew FaceEmotion()を実行します。第1引数に__2__で用意したエレメントのIDを指定します。

    var face = new FaceEmotion('face');
   

4. 表情の変化はnew FaceEmotion()の戻り値である変数のset()メソッドを介して行います。眉毛、目、口それぞれ__-100__～__100__の間で指定できます。__0__が無表情、負数はネガティブ系の表情、整数はポジティブ系の表情です。

    // ドヤ顔させる
    face.set({
      eyebrow: 20,
      eye: -40,
      mouth: 30
    });
   

API

■ new FaceEmotion(id[, options])

顔パーツをidのエレメントに挿入します。optionsには連想配列で顔パーツ作成時のオプションを指定できます。

指定できるオプション

• size (整数(px), デフォルト: 200)

  顔パーツのサイズを指定できます。ただしあまり小さくしすぎると表情の変化時に顔パーツがはみ出します。現段階では最低でも__150__程度は必要です。

• effect (連想配列)

  表情の変化に加えて特殊効果を付加することができます。連想配列で以下の様に指定します。

    effect: {
      tear: true,
      angry: true
    }
  

  • tear

    目の状態が__-50__を下回ると涙がこぼれてきます。

  • angry

    眉毛の状態が__50__を超えると怒マークが徐々に表示されるようになります。

戻り値

FaceEmotionオブジェクトが返ります。このオブジェクトを使用して表情変化などの操作を行います。

例

// <div id="face"></div>にちょっと大き目の顔パーツを作成(怒マーク付き)
var face = new FaceEmotion('face', {
  size: 300,
  effect: {
    angry: true
  }
});

■ set(name, value[, options])

nameで指定したパーツの表情の状態をvalueに変化させます。nameで指定できるパーツは以下の通りです。

• eyebrow (眉毛)
• eye (目)
• mouth (口)

※現段階では片方の眉毛だけといった指定はできません。

valueは__-100__～__100__の間で指定できます。__0__が無表情、負数はネガティブ系の表情、整数はポジティブ系の表情です。

optionsには表情変化時のオプションを指定できます。

指定できるオプション

• speed (整数(ミリ秒), デフォルト: 10)

  1段階あたりの表情変化のスピードを指定します。デフォルトの__10__の場合、valueを__0__から__100__に変化させるのに要する時間はspeed×100段階で約1秒となります。

• animate (真偽値, デフォルト: true)

  表情の変化をアニメーションで行うかどうか指定します。falseを指定すると即座に表情が変化します。

• complete (関数)

  表情変化完了後に呼び出されるコールバック関数です。コールバックの引数はありません。

例

// 口をアニメーションさせずに即座に笑わせる
face.set('mouth', 100, {
  animate: false
});

■ set(parts[, options])

set()の別指定方法バージョンです。複数のパーツの表情変化を一度に指定できます。

partsにパーツ名と状態値の連想配列を指定します。optionsは通常のset()と同様です。

例

// 絶望の悲しみをゆっくりと & 完了したらお知らせ
face.set({
  eyebrow: -100,
  eye: -100,
  mouth: -100
}, {
  animate: true,
  speed: 20,
  complete: function () {
    alert('orz');
  }
});

■ state()

現在の眉毛、目、口パーツの状態値を連想配列で返します。

例

vare result = face.state(); // → { eyebrow: 50, eye: 10, mouth: -40 }

対応ブラウザ

• モダンブラウザ
• IE9以上

※顔パーツはCSS3のプロパティを使用しているので、IE8以下ではドット絵のような角ばった顔になり、笑っているのか怒っているのかも判別できない状態になりますが、一応動作はします。

検討中の課題

• 初期サイズをすごく小さくしても表情変化時に顔パーツがはみ出さないようにする

  無駄に状態値計算が複雑なのでちょっと面倒。

• 左右対になるパーツの片方だけ操作出来るようにする

  眉毛とかありえない形にすることもできてしまうのがいかんともしがたい。

• 独自のパーツを追加できるようにする

  検討中。

• 髪の毛を生やす

  大穴。

Changelog

0.1.0 (2013-10-18)

• 初版リリース

ライセンス

MIT licenseで配布します。

© 2013 ktty1220