tweener-perf.js

const Lang = imports.lang;
const Signals = imports.signals;

const Tweener = imports.tweener.tweener;
const Clutter = imports.gi.Clutter;

Clutter.init(null);

let white = Clutter.Color.get_static(Clutter.StaticColor.WHITE);
let black = Clutter.Color.get_static(Clutter.StaticColor.BLACK);

let stage = new Clutter.Stage({ background_color: black });
stage.show();

const ClutterFrameTicker = new Lang.Class({
    Name: 'ClutterFrameTicker',

    _init : function() {
        this._timeline = new Clutter.Timeline({ duration: 1000*1000 });
        this._timeline.set_loop(true);
        this._timeline.connect('new-frame', Lang.bind(this,
            function(timeline, frame) {
                this._onNewFrame(frame);
            }));
    },

    _onNewFrame : function(frame) {
        this.emit('prepare-frame');
    },

    getTime: function() {
        return this._timeline.get_elapsed_time();
    },

    start: function() {
        this._timeline.start();
    },

    stop: function() {
        this._timeline.stop();
    }
});
Signals.addSignalMethods(ClutterFrameTicker.prototype);
Tweener.setFrameTicker(new ClutterFrameTicker());

let w = stage.width, h = stage.height;
let hw = w / 2, hh = h / 2;
let rad = Math.sqrt(hw*hw + hh*hh);
function createDots(num) {
    let dots = [];
    for (let i = 0; i < num; i++) {
        let dot = new Clutter.Actor({ background_color: white });
        stage.add_child(dot);
        dots.push(dot);
    }
    return dots;
}

function start(a) {
    a.width = 4;
    a.height = 4;
    a.x = hw;
    a.y = hh;
}

const durationS = 1;
const durationMS = durationS * 1000;

const animations = {
    tweener: function(dot) {
        start(dot);
        let angle = Math.random() * Math.PI * 2;

        Tweener.addTween(dot, { width: 32, height: 32,
                                x: Math.cos(angle) * rad + hw,
                                y: Math.sin(angle) * rad + hh,
                                transition: 'easeInCubic',
                                time: durationS,
                                delay: Math.random() * durationS,
                                onComplete: function() { mode(dot); } });
    },

    clutter_old: function(dot) {
        start(dot);
        let timeline = new Clutter.Timeline({ duration: durationMS,
                                              delay: Math.random() * durationMS });
        timeline.connect('stopped', function() { mode(dot); } );
        let angle = Math.random() * Math.PI * 2;
        let anim = dot.animate_with_timelinev(Clutter.AnimationMode.EASE_IN_CUBIC, timeline,
                                              ['width', 'height', 'x', 'y'],
                                              [32, 32, Math.cos(angle) * rad + hw, Math.sin(angle) * rad + hh]);
    },

    clutter_new: function(dot) {
        start(dot);
        let angle = Math.random() * Math.PI * 2;
        dot.save_easing_state();
        dot.set_position(Math.cos(angle) * rad + hw, Math.sin(angle) * rad + hh);
        dot.set_size(32, 32);
        dot.set_easing_delay(Math.random() * durationMS);
        dot.set_easing_mode(Clutter.AnimationMode.EASE_IN_CUBIC);
        dot.set_easing_duration(durationMS);
        dot.connect('transitions-completed', function() { mode(dot); });
        dot.restore_easing_state();
    },
};

const mode = animations[ARGV[0]] || animations.tweener;

let dots = createDots(300);
dots.forEach(mode);

Clutter.main();