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

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

デモのキャプチャ

Sonic – looping loaders

[ad#ad-2]

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);
デモのキャプチャ

デモ:circle

Sonicのダウンロード

Sonicは下記ページからダウンロードできます。

sponsors

top of page

©2018 coliss