smart.jsを試してみる

はじめに

smart.jsを試してみようとデモサイトを作りました。ライブラリのダウンロードや、リファレンスは公式サイトにありますので興味のある方はご覧ください。

ちなみに僕はsmart.jsの制作者様とは何ら関わりはございません

デモ1

まずはテキストを色々アニメーションしてみよう！

smart.ready(function(S)
{
    var stage = new S.Stage("demo1");

    var text_1 = new S.Text("テキストを斜めに");
    text_1.x = 20;
    text_1.y = 80;
    text_1.size = 20;
    text_1.bold = true;
    text_1.color = "green";
    text_1.rotation = -20;
    stage.addChild(text_1); // canvasに表示オブジェクトを置く

    var text_2 = new S.Text("トゥイーンアニメ");
    text_2.x = 0;
    text_2.y = 120;
    text_2.size = 20;
    text_2.bold = true;
    text_2.color = "red";
    stage.addChild(text_2);
    S.tween.start(text_2, {alpha: 1, x: 100}, "easeOutQuad", 1); // トゥイーンアニメ

    var text_3 = new S.Text("回転");
    text_3.x = 60;
    text_3.y = 160;
    text_3.size = 20;
    text_3.bold = true;
    text_3.color = "blue";
    stage.addChild(text_3);

    var text_4 = new S.Text("点滅");
    text_4.x = 60;
    text_4.y = 220;
    text_4.size = 20;
    text_4.bold = true;
    text_4.color = "#555555";
    text_4.alpha = 0;
    stage.addChild(text_4);

    var flag = 1; // テキスト点滅用フラグ

    // スレッド処理用
    // これが毎フレーム呼ばれる
    S.timeline.enterframe(function(e)
    {
        // テキストを回転
        text_3.rotation += 5;

        // 1以上ならマイナス、0以下ならプラスをかけることで点滅を繰り返す
        if (text_4.alpha >= 1) {
            flag = -1;
        } else if (text_4.alpha <= 0) {
            flag = 1;
        }
        text_4.alpha += 0.1 * flag;
    });
});