Waveloading

JS插件实现360球形波浪动画打分样式/波浪进度条

可自定义参数

• 球体半径：radius default:200 type:number

• 进度条值：value default:50 type:number

• 运动速度：speed default:2000 type:number

• 背景颜色：bg_color default:[’#F1400D’,’#FA972C’] type:Array

• 前端波浪颜色:color defaule:‘rgba(206,206,206, .3)’ type:String

html

引入wave.js
<script src="./wave.js"></script>

javascript

window.onload=function(){var conva = new Waveloding('wave',{'radius':200,'value':30,'speed':2000,'bg_color':['red','blue'],'color':'rgba(206,206,206, .3)'		});};

效果如下

源码参考

	/*Author:Ming.Zhu
* Date:2018/11/7
* Wave.js allowed U draw a fatastic Wave loading animation
*/function Waveloding(node,options){this.WaveElement = document.getElementById(node); var __options__ = {};__options__.width = options.radius == undefined?200 : options.radius;__options__.height = options.radius == undefined? 200:options.radius;__options__.value = options.value == undefined? 50:options.value;__options__.speed = options.speed == undefined? 2000:options.speed;__options__.bg_color = options.bg_color == undefined? ['#F1400D','#FA972C']:options.bg_color;__options__.color = options.color == undefined? 'rgba(206,206,206, .3)':options.color;this.WaveElement.setAttribute('height',__options__.height + 'px') ;this.WaveElement.setAttribute('width',__options__.width + 'px') ;String.prototype.signMix= function() {if(arguments.length === 0) return this;var param = arguments[0], str= this;if(typeof(param) === 'object') {for(var key in param)str = str.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);return str;} else {for(var i = 0; i < arguments.length; i++)str = str.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);return str;}}var default_options = {'display':'block','box-sizing':' content-box','padding':' 5px','background':' -moz-linear-gradient(top, {0} 0%, {1} 100%)'.signMix(__options__.bg_color[1], __options__.bg_color[0]),'background':' -webkit-gradient(linear, left top, left bottom, color-stop(0%,{0}), color-stop(100%,{1}))'.signMix(__options__.bg_color[1], __options__.bg_color[0]),'background':' -webkit-linear-gradient(top, {0} 0%,{1} 100%)'.signMix(__options__.bg_color[1], __options__.bg_color[0]),'background':' -o-linear-gradient(top, {0} 0%,{1} 100%)'.signMix(__options__.bg_color[1], __options__.bg_color[0]),'background':' -ms-linear-gradient(top, {0} 0%,{1} 100%)'.signMix(__options__.bg_color[1], __options__.bg_color[0]),'background':' linear-gradient(to bottom, {0} 0%,{1} 100%)'.signMix(__options__.bg_color[1], __options__.bg_color[0]),'border-radius':' 100%','position':' relative','top':' 50%',}for(var key in default_options){this.WaveElement.style[key] = default_options[key]}let ctx = this.WaveElement.getContext('2d');let radians = (Math.PI / 180) * 180;let startTime = Date.now();let time = __options__.speed;let clockwise = 1;let cp1x, cp1y, cp2x, cp2y;let value = __options__.value;requestAnimationFrame(function waveDraw() {  let t = Math.min(1.0, (Date.now() - startTime) / time);if(clockwise) {cp1x = 90 + (55 * t);cp1y = __options__.width-2*value-72 + (72 * t);cp2x = 92 - (51 * t);cp2y = __options__.width-2*value+79 - (79 * t);} else {cp1x = 145 - (55 * t);cp1y = __options__.width-2*value - (72 * t);cp2x = 41 + (51 * t);cp2y = __options__.width-2*value + (79 * t);}ctx.clearRect(0, 0, __options__.width, __options__.width); ctx.beginPath();ctx.moveTo(0, __options__.width-2*value);// 绘制三次贝塞尔曲线ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, __options__.width, __options__.width-2*value);// 绘制圆弧ctx.arc(__options__.width/2, __options__.width/2, __options__.width/2, 0, radians, 0);//绘制分数文字ctx.font = '{0}px Arial'.signMix(__options__.width/3);ctx.textAlign = 'center';ctx.fillStyle = '#fff';ctx.fillText(__options__.value, __options__.width/2.4, __options__.width/1.7)//绘制文字ctx.font = '{0}px Arial'.signMix(__options__.width/5);ctx.textAlign = 'center';ctx.fillStyle = '#fff';ctx.fillText('分', __options__.width/1.26, __options__.width/1.7)//绘制轨迹填充颜色，即动态波浪线颜色ctx.fillStyle = __options__.color;// ctx.strokeStyle  = "yellow";ctx.fill();ctx.save();  if( t == 1 ) {startTime = Date.now();clockwise = !clockwise;} requestAnimationFrame(waveDraw);});}