偶然发现的一个页面加载缓冲特效 sonic

由于在项目中想在数据加载时加一个缓冲特效，偶然间发现sonic很好用，也很方便。
先看效果：

使用也很简单。

1. JavaScript代码

function playcircle(){    circle= new Sonic({            width: 100,            height: 100,            stepsPerFrame: 1,            trailLength: 1,            pointDistance: .02,            fps: 30,            fillColor: '#05E2FF',            step: function(point, index) {                this._.beginPath();                this._.moveTo(point.x, point.y);                this._.arc(point.x, point.y, index * 7, 0, Math.PI*2, false);                this._.closePath();                this._.fill();            },            path: [                ['arc', 50, 50, 30, 0, 360]            ]    });    circle.play();}

1. html中
   再在html中加上sonic的js库：
   <script type="text/javascript" src="Resources/JavaScript/sonic.js"></script>
   这样只需要在使用的地方添加：

$("#filesdiv").html(circle.canvas);

就可以了。