[JS]かなりかっこいいデザインのローディング用アニメーションを生成するスクリプト -Sonic

サイト構築 -JavaScript

Post on:2011年8月29日

sponsorsr

HTML5 Canvasを使って、ローディング用のアニメーションを作成する超軽量（約3K）のスクリプトを紹介します。

Sonic – looping loaders

[ad#ad-2]

Sonicのデモ
Sonicの実装
Sonicのダウンロード

Sonicのデモ

デモページではそのかっこいいローディング用アニメーションを楽しめます。

デモページ

Sonicの実装

Square（矩形）とCircle（円形）を例に実装方法を紹介します。

外部ファイル

当スクリプトを外部ファイルとして指定します。

<script src="sonic.js"></script>

JavaScript: Square（矩形）

あとは、JavaScriptで記述するだけです。

var square = new Sonic({
    width: 100,
    height: 100,
    fillColor: '#000',
    path: [
        ['line', 10, 10, 90, 10],
        ['line', 90, 10, 90, 90],
        ['line', 90, 90, 10, 90],
        ['line', 10, 90, 10, 10]
    ]
});

square.play();

document.body.appendChild(square.canvas);

デモ：Square

[ad#ad-2]

JavaScript: Circle（円形）

var circle = new Sonic({
    width: 50,
    height: 50,
    padding: 50,
    strokeColor: '#000',
    pointDistance: .01,
    stepsPerFrame: 3,
    trailLength: .7,
    step: 'fader',
    setup: function() {
        this._.lineWidth = 5;
    },
    path: [
        ['arc', 25, 25, 25, 0, 360]
    ]
});
 
circle.play();
 
document.body.appendChild(circle.canvas);