Gjs で Clutter Timeline

タイマーアプリを Gjs と Clutter で作ってみた。これって、 GLib 使うのが一般的なのだが、 Clutter.Timeline で簡単にできたので公開。
ほとんどは、いつもどおりなので、timelineだけ説明する。

const Clutter = imports.gi.Clutter;

Clutter.init(null);

let stage = Clutter.Stage.get_default();
stage.set_title("Timeline Test");
stage.set_size(200, 200);
stage.set_background_color(new Clutter.Color({red:0, blue:0, green:0, alpha:255}));
stage.connect('destroy', Clutter.main_quit);

let actor = new Clutter.Actor();
actor.set_size(50, 50);
actor.set_position(50, 50);
actor.set_background_color(new Clutter.Color({red:0, blue:255, green:0, alpha:255}));
stage.add_actor(actor);

let timeline = new Clutter.Timeline({duration:1000});
timeline.set_loop(true);
timeline.connect('completed', function() {actor.set_position(200 * Math.random(), 200 * Math.random())});
timeline.start();

stage.show();
Clutter.main();

ここで重要なのは、以下のところ

let timeline = new Clutter.Timeline({duration:1000});
timeline.set_loop(true);
timeline.connect('completed', function() {actor.set_position(200 * Math.random(), 200 * Math.random())});
timeline.start();

Clutter.Timeline の duration(ms)を作成し、無限ループにして、completeイベント発生時に actor をランダムに動かすだけ。設定が終われば start() メソッドを呼びだせば完成。

devhelp を見ると、"Defining Timelines in ClutterScript"というのがあり、JSON 表記で設定できることが分かる。また、 "ClutterAnimationMode" というのがあり、tweener 風味の動作をさせることも可能っぽい。

ベクター画像の描画や3D 2D の表示は簡単にできそう。今後はラスタ画像の処理を調べてみる。