作者:yantian | 来源:互联网 | 2023-08-20 12:07
由于在项目中想在数据加载时加一个缓冲特效,偶然间发现sonic很好用,也很方便。先看效果:使用也很简单。JavaScript代码functionplaycircle(
由于在项目中想在数据加载时加一个缓冲特效,偶然间发现sonic很好用,也很方便。
先看效果:
使用也很简单。
- 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();
}
- html中
再在html中加上sonic的js库:
这样只需要在使用的地方添加:
$("#filesdiv").html(circle.canvas);
就可以了。