回れよ回れ!!

CSS on 10 Mar , 2015

開発途中でローディングGIFや、プログレスバーのデザインが出来上がるのを待っている間
デバック用にとりあえず処理中の状態を見えるようにする時、css3のtransformを使って遊んでいます。
何をするかというと、単純にトリガーになった要素を transform:rotate で回転させているだけ。
transformもアイデア次第で色々利用できると思います。
具体的には、

var Rotate = function(element, step, sec) {
    this.step = 1;
    this.sec = 10;
    this.elm = element;
    this.r = 0;
    this.end = true;
    this.hTimer = null;

    if (arguments.length > 1) {
        this.step = step;
        if (arguments.length > 2) {
            this.sec = sec;
        }
    }
};

Rotate.prototype = function() {
    var obj = {
        run : function() {
            if (this.end) {
                return false;
            }
            this.r += this.step;
            if (this.r > 360 || this.r < -360) {
                this.r = 0;
            }
            $(this.elm).css({
                transform : 'rotate(' + this.r + 'deg)'
            });
        },
        start : function(step, sec) {
            this.end = false;
            if (arguments.length > 0) {
                this.step = step;
                if (arguments.length > 1) {
                    this.sec = sec;
                }
            }
            this.run();
            var _self = this;
            _self.hTimer = setTimeout(function() {
                _self.run();
                _self.hTimer = setTimeout(arguments.callee, _self.sec);
            }, this.sec);
        },
        stop : function() {
            this.end = true;
            clearTimeout(this.hTimer);
            this.hTimer = null;
            $(this.elm).css({
                transform : 'rotate(0deg)'
            });
        }
    };
    return obj;
}();

Rotateクラス見たいなのを作り、

$('.information').click(function(){
    var r = new Rotate(this, 10);
    r.start();
    //何やら時間のかかる処理を行う。
    //......

    //処理が終わったら
    r.stop();
    delete r;
});

とこんな感じで、必要な要素を回転させる。
ただ、この Rotate はちょっとカクカクするので、本格的に何かに利用しようとしたらスムーズに動作するよう
書き換える必要がありますが、transform おもしろい!というサンプルです。