Sonic html5 canvas loader

Sonic html5 canvas loader

簡介

Sonic是一款極小的js類(JavaScript Class)，它可以使用來創建客製化的讀取標誌動畫(custom loading animations)，它執行一個不中斷的迴圈，就好像一條蛇不斷追著自己的尾巴。

Sonic使用HTML5的Canvas API來完成的，它在很短的間格中部段的繪製圖形到畫面上，而這個圖形決定於你定義給它的path，首先看一下官方的DEMO


http://padolsey.net/p/Sonic/repo/demo/demo.html

範例一 - 正方形


<!doctype html>
<meta charset="utf-8" />
<title>Sonic</title>

<style>

</style>

<body>

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

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);

</script> 

</body>

在這個範例中，我們創建了一個Sonic類別，並給予高度、寬度、顏色以及最重要的路徑屬性，path是一個二微陣列，我們將要移動的路近以這樣的格式寫入
['line', startX, startY, endX, endY]

詳細模式可以參考HTML5相關解說了解
http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

創建完畢後，我們將Sonic放置到我們的畫面上，並且啟動(play)。

範例二 - 繞圓圈

在Canvas中，如果要畫曲線(橢圓、圓、拋物線等)，使用的是arc這個屬性，下面範例中會產生一個不斷繞著圓圈的讀取標示


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);

附註 : 額外參數說明

Path 參數

['line', startX, startY, endX, endY]

['bezier', startX, startY, endX, endY, cp1x, cp1y, cp2x, cp2y]

['arc', cx, cy, radius, startDegree, endDegree] (degrees, not radians!)

Create 參數

Options that you can pass to new Sonic({...}) include:

path:

An array which defines the path taken by sonic. Look at the square example above. Each array item is an array with the format [methodName, arguments...], with the available methods specified above (line, bezier and arc).

width:

The pixel width of the canvas (note: not including padding)

height:

The pixel height of the canvas (note: not including padding)

padding (default: 0): The pixel padding.

fillColor:

The canvas' context's fill color (e.g. red, rgb(255,0,0), #F00)

strokeColor:

The canvas' context's stroke color (e.g. green, rgb(0,255,0), #0F0)

fps (default: 25):

How many frames per second. More fps means smoother animation and sonic will progress through the specified path quicker. Less frames means the opposite. There shouldn't be much need to change this.

stepsPerFrame (default: 1):

This integer specifies how many steps of an animation should occur on each frame.

pointDistance (default: .05):

The distance between points (0..1) in each path (that is, each sub-path under the main path). If you draw a line, and set the pointDistance to 0.1, then there will be ten steps in the animation (ten points).

trailLength (default: 1):

The length of sonic's trail (0..1). A length of one means that it's like a snake trying to eat its own tail.

step (default: "square"):

A function OR a name of a function found in Sonic.stepMethods. This function will be called on every step of the animation. See below (under "more control") for more info on this function.

domClass (default: "sonic"):

A class to be applied to the element.

ITseer - 資訊知識分享 | 程式技術討論

2012年4月3日