偶然发现的一个页面加载缓冲特效 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);

就可以了。