数値が0〜nまでいったら、また0に戻って繰り返す処理

数値が0〜nまでいったら、また0に戻って繰り返す処理を書きたい時、 (例えば、スプライト画像でコマ数を掛けてアニメーションさせる時など、) if文とか使って繰り返すと面倒なので、一行で書く。

例えば、0〜10をアニメーションループの中で繰り返したい時、

// 増やしたい数をi
var i = 0;
function loop(){
   i = (1+i) % 10;
}

setInterval(loop, 1000/10);

%を使って、割られた余りを数値として使う。

transition-delayの単位を省略すると仕様では無視される

Blogを見た同僚から指摘されたので、メモ。 前回のブログで書いたようにtransitonによるアニメーションなどCSS3の記述で、 時間を表す数値0に単位を省略するとfireFoxでは無視される。

たとえば、trasitionのdelayで単位を省略するとfireFoxでは動かない。

-webkit-transition: width 1s ease-out 0;  //動く
-moz-transition: width 1s ease-out 0;　//動かない

0だから、単位を省略しても良いかと思ったけど、 そんなことは無い。

-webkit-transition: width 1s ease-out 0;  //動く
-moz-transition: width 1s ease-out 0s;　//動く

さすがに0以外はchromeでも省略しちゃだめ。

-webkit-transition: width 1s ease-out 5;  //動かない
-moz-transition: width 1s ease-out 5s;　//動く

本来W3Cの仕様でもちゃんと書いてあるようで…。

http://www.w3.org/TR/css3-values/#time

焦ってると意外とこういうところで時間浪費しそうだから気をつけよう。。

矩形の辺をtransitionでアニメーションさせる

矩形のメニューをhoverすると、周りのラインが伸縮するアニメーションがかっこ良かったので、真似してみました。

複雑なラインのアニメーションだとSVGを使うのが良いかもしれませんが、 単純にこの手もあったかぁと思ったので、 真似してみました。

作るものはこんなの。↓

htmlで矩形のラインを表現するとしたら、borderを使いますが、 ここでは各辺のラインをそれぞれアニメーションさせたいので、 幅1pxのdivを各辺に配置し、色はbackground-colorで表現しています。

<div class="rect">
    <div class="t"></div>
    <div class="r"></div>
    <div class="b"></div>
    <div class="l"></div>
</div>

CSSのpositionでそれぞれ位置に設置します。 横幅や高さなど使い回す部分はsassの変数に入れます。

$w: 200px;
$h: 200px;
$lineW: 1px;
$lineColor: #fff;

.rect {
    width: $w;
    height: $h;
    position: relative;
    margin: 100px auto;
  
    .l{
        position: absolute;
        width: $lineW;
        height: $h;
        background-color: $lineColor;
        left: 0;
        top: 0;
    }
    
    .t{
        position: absolute;
        width: $w;
        height: $lineW;
        background: $lineColor;
        left: 0;
        top: 0;
    }
    
    .r{
        position: absolute;
        width: $lineW;
        height: $h;
        background-color: $lineColor;
        top: 0;
        right: 0;
    }
    
    .b{
        position: absolute;
        width: $w;
        height: $lineW;
        background-color: $lineColor;
        bottom: 0;
        left: 0;
     }

これで、矩形ができました。 次に書く辺をhoverしたら線を伸縮させたいので、 上記のそれぞれの辺にtransitionを記述します。 左と右の辺はheightが伸縮して、上と下の辺はwidthが伸縮します。

.l{
    position: absolute;
    width: $lineW;
    height: $h;
    background-color: $lineColor;
    left: 0;
    top: 0;
    -webkit-transition: height .7s ease-out 0, top .7s ease-out 0;
    -moz-transition: height .7s ease-out 0, top .7s ease-out 0;
    -ms-transition: height .7s ease-out 0, top .7s ease-out 0;
    transition: height .7s ease-out 0, top .7s ease-out 0;
}

.t{
    position: absolute;
    width: $w;
    height: $lineW;
    background: $lineColor;
    left: 0;
    top: 0;
    -webkit-transition: width .7s ease-out 0;
    -moz-transition: width .7s ease-out 0;
    -ms-transition: width .7s ease-out 0;
    transition: width .7s ease-out 0;
}

.r{
    position: absolute;
    width: $lineW;
    height: $h;
    background-color: $lineColor;
    top: 0;
    right: 0;
    -webkit-transition: height .7s ease-out 0;
    -moz-transition: height .7s ease-out 0;
    -ms-transition: height .7s ease-out 0;
    transition: height .7s ease-out 0;
}

.b{
    position: absolute;
    width: $w;
    height: $lineW;
    background-color: $lineColor;
    bottom: 0;
    left: 0;
    -webkit-transition: width .7s ease-out 0, left .7s ease-out 0;
    -moz-transition: width .7s ease-out 0, left .7s ease-out 0;
    -ms-transition: width .7s ease-out 0, left .7s ease-out 0;
    transition: width .7s ease-out 0, left .7s ease-out 0;
}

ここで、少しポイントなのはleftとbottmのdivはtransionのプロパティが２つ設定している点。 基本的に、各辺の始点が左上なので、上記の2つの辺はそのまま伸縮すると、 方向が他の辺と違う微妙なアニメーションになります。

なので、上記の二辺は伸縮と同時にpositionを移動させることで、 他の辺と統一的な伸縮アニメーションにすることができます。

最後にhoverしたときの値を設定します。

&:hover > .t, &:hover >.b{
    width: 0;
}
&:hover >.b{
    left: $w;        
}
&:hover > .r, &:hover > .l{
    height: 0;        
}
&:hover > .l{
    top: $h;
}

先ほど書いたように、leftとbottomだけ、positionの値も変えています。 これで、hoverすると伸縮するアニメーションができました。 UIなどで使えそうですね。

illustratorからパスデータをcanvasに描画する方法

イラレのパスをcanvasのパスとして描画するメモです。 イラレのプラグインを入れれば簡単にできます。

プラグインをダウンロード

ググるとCS5まで対応したプラグインはすぐ出てきます。 [CS5までの方はこちら] http://www.visitmix.com/labs/ai2canvas/index.html

自分のはCS6なので、CS6用のプラグインを探していたのですが、調べているうちに、上記のアップデート版の記事を発見しました。 [CS6以上はこちら] http://blog.mikeswanson.com/post/29634279264/ai2canvas

CS5.5はどうすんだろと思いつつ、上記のプラグインをインストールします。

イラレで書き出す

イラレでパスを描き、[ファイル>書き出し]を選ぶとcanvasという項目が現れます。

書き出すと、htmlを生成してくれるので、中をのぞくとcanvasを記述してくれちゃってます。

これで、複雑なパスをclip()して画像のマスクを作ったり、線をアニメーションさせてたりできますね。

【宣伝】

最近canvas周りの技術について本を書きました。 上記の方法も使い、イラレのパスをcanvasでアニメーションさせる方法を書いています。

CSSで3D表現しようず！ マウスの動きで回転するレイヤーを表現

あれ、いつの間にかマークダウン形式で記事が書けるようになってる…。まあいいか。 木曜日はモック曜日として、なんか案件で使えそうなモックを作っていこうと思ってます。

前回の記事では、perspectiveについて書きましたが、 それを元にパースを付けたタグ（レイヤー）をマウスに付随して回転する演出モックを作ります。 （なんか案件で使えそうなのか微妙ですが…）

こんなん↓

今回はJavaScriptのみです。cssで3Dとか言っときながら…。 まず、IDやら、角度やら、奥行の距離の変数を作ります。

var pic = document.getElementById('pic'),
    viewport = document.getElementById('world'),
    picXAngle = 0, //レイヤーのx軸の角度
    picYAngle = 0, //レイヤーのy軸の角度
    d = 0; //奥行の距離

次にマウスが動きにあわせて、角度を算出し、 最後に回転する画像レイヤーのスタイル(Transform)を更新する関数を実行します。

window.addEventListener('mousemove', function(e){
    picYAngle = -( .5 - ( e.clientX / window.innerWidth )) * 180; // x軸の角度を算出
    picXAngle = ( .5 - ( e.clientY / window.innerHeight )) * 180; // y軸の角度を算出
    
    picXAngle = Math.ceil(picXAngle); //小数点以下を切り上げ
    picYAngle = Math.ceil(picYAngle); //小数点以下を切り上げ
    
   updateView(); // 描画する関数を呼びます。
});

次に描画する関数を作ります。 変数dは特に変化してませんが、一応値があとで変化させられるように設定してます。 あとは先ほどマウスの回転に合わせて角度の値が変化するので、 その値がcssに反映されます。

function updateView() {
    /*webkit用*/
    pic.style.webkitTransform = 'translateZ(' + d + 'px) \
        rotateX(' + picXAngle + 'deg) \
        rotateY(' + picYAngle + 'deg)';
    
    /*ff用*/
    pic.style.mozTransform = 'translateZ(' + d + 'px) \
        rotateX(' + picXAngle + 'deg) \
        rotateY(' + picYAngle + 'deg)';
    
    pic.style.transform = 'translateZ(' + d + 'px) \
        rotateX(' + picXAngle + 'deg) \
        rotateY(' + picYAngle + 'deg)';
}

これくらいなら簡単に実装できるし（IE検証してないけど）、 ちょっと驚きのある演出になるのではないでしょうか。

ソース全体は最初に貼ったjsdo.itを見てください。

CSSで3D表現しようず！ perspectiveのmozとwebkitのちょっとした違い。

ブログ始めました。はてなブログでマークダウンどうやんの？って思いながら書いてます。

CSSの奥行きをつけるperspectiveでハマったのでちょっとメモです。

まず、画像を傾かせてパースを付けたものを作りたいとします。
こんなの↓

htmlはこんな感じ。

<div id="world">

    <div id="pic"><img src="http://jsrun.it/assets/a/e/M/E/aeMEX.jpg" width="300" height="300" alt="うさぎかわいい"></div>

</div>

 CSSでは、
まず傾かせたい#picのx軸を回転させて、3D空間に描画されるよう、
transform-style: preserve-3dを指定します。
※実際はベンダープレフィックスをつけましょー。

#pic {

　transform-style: preserve-3d;

　transform: rotateX(50deg);
}

#worldの子要素が3Dになるように作りたいので、
#worldに奥行きに深度を設定するperspectiveを指定します。

#world {
　perspective: 300;

}

ここでちょっとハマリポイントが…。
実際はprefixつけるのでこんな感じ。

#world {
　-webkit-perspective: 300;

　-moz-perspective: 300;

　perspective: 300;

}

※IEとOperaはどうなるかまだ調べてません。すみません。すみません。

でも、これ、Firefoxで効きません。
アレなんでだろーと思ってちょこっといじってたら、これで動きました。

#world {
　-webkit-perspective: 300;

　-moz-perspective: 300px;

　perspective: 300;

}

-moz-perspectiveには単位が必要なんですね！逆にwebkitはpx付けると動きませんヽ(=´▽`=)ﾉ
まあ、このへんはどうにかして欲しいけど、しょうが無いですね。


全体のコードは下記をご覧くださいませ。