html5webloading
说明: Collect some generated web pages based on HTML 5 technology Loading animation, animation canvas loaders, namely familiar website Loading effects, this is not the real Loading, is based on the CSS 3 draw out Loading animation effects, can be used for web page Loading, these all are very delicate, small animation animation smooth smooth, is a high-quality goods.
文件列表:
codesc.net\html5 canvas超酷loading\demo\circle.html (659, 2015-04-09)
codesc.net\html5 canvas超酷loading\demo\index.html (5859, 2013-11-07)
codesc.net\html5 canvas超酷loading\demo\rainbow.html (1286, 2013-11-07)
codesc.net\html5 canvas超酷loading\demo\square.html (543, 2013-11-07)
codesc.net\html5 canvas超酷loading\src\sonic.js (5972, 2011-08-26)
codesc.net\html5 canvas超酷loading\demo (0, 2015-04-09)
codesc.net\html5 canvas超酷loading\src (0, 2015-04-09)
codesc.net\html5 canvas超酷loading (0, 2015-04-09)
codesc.net (0, 2015-04-09)
## Sonic.js
[See the live demo!](http://padolsey.net/p/Sonic/repo/demo/demo.html)
Sonic is a tool that you can use to create spinny-loady-thingies on the fly. It's best for shapes that loop.
E.g. a square:
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 demo: http://padolsey.net/p/Sonic/repo/demo/square.html
### How does it work?
Sonic works by drawing a shape (by default a square, `fillRect`) at tiny intervals along a pre-defined path. You define the path via the `path` option:
Drawing methods are specified in the `path` array like so:
[methodName, arguments...]
### Methods and their arguments:
* `['line', startX, startY, endX, endY]`
* `['bezier', startX, startY, endX, endY, cp1x, cp1y, cp2x, cp2y]`
* `['arc', cx, cy, radius, startDegree, endDegree]` (degrees, not radians!)
### Options
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 `
近期下载者:
相关文件:
收藏者: