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);
Demo:实例1
当然,利用“ Sonic ” 也可以制作目前流行的圆形“ Loading ”,这可能看起来更舒服:
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);
Demo:实例2
合理利用该JS类会制作出更多可能的效果,发挥你的想象。
如果考虑兼容低版本的浏览器,那你需要下载:cadc 在github上提供的 SonicGIF 来生成GIF“ Loading ”图片。
资源来自:“ Sonic – looping loaders ”
" />