[JS]自分仕様のかなりかっこいいローディング用アニメーションを生成できる -Sonic Creator
Post on:2013年4月3日
sponsors
かっこいいデザインのローディング用アニメーションのCanvas版、アニメーションGIF版、CSSスプライトPNG版を同時に作成できるオンラインサービスを紹介します。
Sonic Creatorの前に、まずはSonicのデモから。
Sonicは、HTML5 Canvasを使ってローディング用のアニメーションを作成する超軽量（約3K）のスクリプトで、実装方法などは下記をご覧ください。
今回紹介するのは、このSonicをコードベースでオンラインで簡単に設計でき、それをアニメーションGIFやCSSスプライト用のPNG画像を生成するオンラインツールです。
使い方は簡単です。
まずは、ギャラリーからベースとなるローディングのデザインを選択します。
一番左のデザインを選択
デザインを選択すると、そのローディングのコードを表示します。
コード
コードはオンラインで編集可能で、カラー・スピード・サイズなどを簡単に変更できます。
編集したコードはすぐにCanvas版に反映されます。
Canvas版
同時に、アニメーションGIF版も生成されます。
アニメーションGIF版
CSSスプライト用のPNG版も生成されます。
CSSスプライト用のPNG版
「View the CSS3...」をクリックすると、PNG版用のCSS3も生成されます。
PNG版のCSS3のコード
sponsors
