GNOME Shell Extension の Tweener を調べてみた

Tweener でアニメーションができるという話を前回書いたけど、gnome-shell 付属の tweener.js は単なる wrapper で、中身が空っぽなので調べてみました。
tweener の本家は、 http://code.google.com/p/tweener/ ですが、ドキュメントは
http://hosted.zeh.com.br/tweener/docs/en-us/ のほうが良いでしょう。超訳の http://www.tonpoo.com/tweener/index2.html もあるので、英語が苦手な人はどうぞ。

gnome-extension-tool で作成した extension.js の中で、 Tween を使っているところは1箇所で、 Tweener.addTween() を使ってアニメーションを実行しているだけである。この第１引数の text は StLabel 型のオブジェクトで、このオブジェクトの property をTweener を使って変更しながら再描画しています。第２引数の JSON オブジェクトで、アニメーションの設定を行なっています。 JSON オブジェクトは、{ property: value, ...} という感じになっていて、 StLabel 型オブジェクトの property と Tweener の property が混在しているから、若干わかりにくくなっています。

Tweener の property は、 http://www.tonpoo.com/tweener/parameters/index.html や、 http://hosted.zeh.com.br/tweener/docs/en-us/parameters/index.html を参照してください。後で説明する transition 以外では、前のアニメーション終了からアニメーションを開始するまでの待機時間を秒単位で設定する delay 、アニメーションの時間を秒単位で設定する time 、アニメーション開始時に実行される関数を指定する onStart 、アニメーション終了時に実行される関数を指定する onComplete ぐらいを理解していれば良いと思います。
再描画時に実行される onUpdate も使えそうなのですが、処理が遅くなりそうな気がします。

さて、Tweener の重要 property の transition ですが、これは変数の変化曲線を示します。 http://www.tonpoo.com/tweener/misc/transitions.html や http://hosted.zeh.com.br/tweener/docs/en-us/misc/transitions.html を見て、お気に入りの曲線を選びましょう。easeOutInBounce なんか面白そうな曲線です。実際試すとちょっとうざいのですが。。。

StLabel 型オブジェクトの property は devhelp の St Reference Manual の StLabel を見れば分かるのですが、変更可能なものは text property しかなく、数値で変更できるものではないので、 Tweener のアニメーションのパラメータとしては使えません。
親の型は StWidget ですが、こちらも数値で指定できる property は無さそうです。
StWidget の親の型は ClutterActor です。これは、 devhelp の Clutter Reference Manual を調べてください。

ClutterActor 型の property で数値で指定できるもので、変更するとアニメーションになりそうなものには以下のものがあります。
"width" ClutterActor の幅
"height" ClutterActor の高さ
"x" ClutterActor の左上のモニタ上の x 座標
"y" ClutterActor の左上のモニタ上の y 座標
"opacity" 不透明度 (255〜0) 0 が完全透過

回転の rotation-angle や、拡大縮小の scale は、指定するとエラーになるので、どうやら使えないようです。試してみないとわからないのはちょっとつらいですね。

デフォルトでは、 opacity を 255 から 0 に変化させて消えさせていますが、
{ width: 0, height: 0, ...} にすると、小さくなって消えます。文字が小さくならないので、 height をいじらず width だけいじったほうが StLabel 型では面白いと思います。
また、 {x: 0, y: 0, ...} にすると左上に行って消えますし、 {x: monitor.width, y: monitor.height, ...} にすると右下に行って消えます。

設定を変更したら、Alt + F2 を押して r を入力し Enter キーを押して、 gnome-shell を再起動してください。うまく動作していない(panel に歯車アイコンが出てこない)場合は、 Alt + F2 を押して lg を入力し Enter キーを押して、Errors または、　Extensions を見てください。おそらく、何らかのエラーが出力されています。

ということで、 Tweener を使って StLabel 型オブジェクトのアニメーション (大きさの変更、位置の変更、不透明度の変更)ができることが分かります。 St ライブラリのオブジェクトを使っている限りは、少なくともこれぐらいのアニメーションが簡単にできるので、いろいろ試してみてください。個人的には、 Tweener の time property は 1 (秒) にするとユーザーがイライラしなくて済むのでお勧めしておきます。