-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathringLoad.js
145 lines (134 loc) · 4.89 KB
/
ringLoad.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
/*进度条插件*/
/**
* [ringLoader description]
* options = { [默认配置]
* width: 400, [进度条圆的最大半径,即为画布的宽]
* lineWidth: 20, [进度条的弧线宽度]
* start: 5/6, [进度条开始位置,弧度制]
* end: 1/6, [进度条结束位置,弧度制]
* easing:'easeInQuad', [进度条动画]
* bgcolor: '#e1e1e1', [进度条底色]
* ptcolor: '#fe7a28' [进度条完成时的颜色]
* };
*/
$.fn.ringLoader = function(option) {
var options,remInit,drawArc,drawPross,init,d,ctx,_this,inittimer,init,tween,
opts_bg = {},opts_pt = {};
tween = {
easeInQuad: function(pos){
return Math.pow(pos, 2);
},
easeOutQuad: function(pos){
return -(Math.pow((pos-1), 2) -1);
},
easeInOutQuad: function(pos){
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,2);
return -0.5 * ((pos-=2)*pos - 2);
},
easeInCubic: function(pos){
return Math.pow(pos, 3);
},
easeOutCubic: function(pos){
return (Math.pow((pos-1), 3) +1);
},
easeInOutCubic: function(pos){
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,3);
return 0.5 * (Math.pow((pos-2),3) + 2);
},
easeInQuart: function(pos){
return Math.pow(pos, 4);
},
easeOutQuart: function(pos){
return -(Math.pow((pos-1), 4) -1)
},
easeInOutQuart: function(pos){
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,4);
return -0.5 * ((pos-=2)*Math.pow(pos,3) - 2);
},
easeInQuint: function(pos){
return Math.pow(pos, 5);
},
easeOutQuint: function(pos){
return (Math.pow((pos-1), 5) +1);
},
easeInOutQuint: function(pos){
if ((pos/=0.5) < 1) return 0.5*Math.pow(pos,5);
return 0.5 * (Math.pow((pos-2),5) + 2);
}
}
_this = this;
if($(_this).length <= 0){
return true;
}
ctx = $(_this)[0].getContext("2d");
ctx.imageSmoothingEnabled = true;
ctx.translate(0.5, 0.5);
if(!$(_this).attr("data-percent")){
$(_this).attr("data-percent","0");
}
options = {
width: 400,
lineWidth: 20,
start: 5/6,
end: 1/6,
easing:'easeInOutQuint',
bgcolor: '#e1e1e1',
ptcolor: '#fe7a28'
};
if (option !== undefined) {
$.extend(options, option);
};
remInit = function(n,dpr){
/*dpr: true || false*/
var font = parseInt($("html").css("font-size"));
n = n/64*font;
n = dpr?n*window.devicePixelRatio:n;
return n;
};
opts_bg = {
width: remInit(options.width,true),
lineWidth: remInit(options.lineWidth,true),
start: options.start,
end: options.end,
color: options.bgcolor
};
opts_pt = {
width: remInit(options.width,true),
lineWidth: remInit(options.lineWidth,true),
start: options.start,
end: options.end,
color: options.ptcolor
};
console.log(opts_pt.lineWidth);
drawArc = function(opts){
ctx.beginPath();
ctx.strokeStyle = opts.color;
/*中心坐标加5修正*/
ctx.arc(remInit(options.width+10,true)/2, remInit(options.width+10,true)/2, opts.width/2-opts.lineWidth, Math.PI*opts.start, Math.PI*opts.end, false);
ctx.lineWidth = remInit(opts.lineWidth)*2;
ctx.lineCap = "round";
ctx.stroke();
};
drawPross = function(){
d=parseFloat($(_this).attr("data-percent"));
if(d >= 101){
clearInterval(inittimer);
opts_pt.end = 13/6;
drawArc(opts_bg);
drawArc(opts_pt);
return false;
}
ctx.clearRect(0,0,remInit(options.width,true),remInit(options.width,true));
opts_pt.end = (5+8*tween[options.easing](d/100))/6;
drawArc(opts_bg);
drawArc(opts_pt);
$(_this).attr("data-percent",d+1);
};
init = function(){
/*大小加10修正*/
$(_this).attr('width',remInit(options.width+20,true)).attr('height',remInit(options.width+20,true));
$(_this).css('width',remInit(options.width+20)).css('height',remInit(options.width+20));
inittimer = setInterval(function(){drawPross();},10);
};
init();
}