采用Angular勾画SVG圆环形进度条
2019独角兽企业重金招聘Python工程师标准>>>
// shim layer with setTimeout fallback
// credit Erik Möller and http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
(function() {var lastTime = 0;var vendors = ['webkit', 'moz'];for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];window.cancelAnimationFrame =window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];}if (!window.requestAnimationFrame){window.requestAnimationFrame = function(callback, element) {var currTime = new Date().getTime();var timeToCall = Math.max(0, 16 - (currTime - lastTime));var id = window.setTimeout(function() { callback(currTime + timeToCall); },timeToCall);lastTime = currTime + timeToCall;return id;};}if (!window.cancelAnimationFrame){window.cancelAnimationFrame = function(id) {clearTimeout(id);};}}());angular.module('angular-svg-round-progress', []);'use strict';angular.module('angular-svg-round-progress').constant('roundProgressConfig', {max: 50,semi: false,radius: 100,color: "#45ccce",bgcolor: "#eaeaea",stroke: 15,iterations: 50,animation: "easeOutCubic"
});'use strict';angular.module('angular-svg-round-progress').service('roundProgressService', [function(){var service = {};// credits to http://modernizr.com/ for the feature testservice.isSupported = !!(document.createElementNS && document.createElementNS('http://www.w3.org/2000/svg', "svg").createSVGRect);// utility functionvar polarToCartesian = function(centerX, centerY, radius, angleInDegrees) {var angleInRadians = (angleInDegrees-90) * Math.PI / 180.0;return {x: centerX + (radius * Math.cos(angleInRadians)),y: centerY + (radius * Math.sin(angleInRadians))};};// credit to http://stackoverflow.com/questions/5736398/how-to-calculate-the-svg-path-for-an-arc-of-a-circleservice.updateState = function(value, total, R, ring, size, isSemicircle) {if(!size) return ring;var value = value >= total ? total - 0.00001 : value,type = isSemicircle ? 180 : 359.9999,perc = total === 0 ? 0 : (value / total) * type,x = size/2,start = polarToCartesian(x, x, R, perc), // in this case x and y are the sameend = polarToCartesian(x, x, R, 0),// arcSweep = endAngle - startAngle <= 180 ? "0" : "1",arcSweep = (perc <= 180 ? "0" : "1"),d = ["M", start.x, start.y,"A", R, R, 0, arcSweep, 0, end.x, end.y].join(" ");return ring.attr('d', d);};// Easing functions by Robert Penner// Source: http://www.robertpenner.com/easing/// License: http://www.robertpenner.com/easing_terms_of_use.htmlservice.animations = {// t: Current iteration// b: Start value// c: Change in value// d: Total iterationslinearEase: function(t, b, c, d) {return c * t / d + b;},easeInQuad: function (t, b, c, d) {return c*(t/=d)*t + b;},easeOutQuad: function (t, b, c, d) {return -c *(t/=d)*(t-2) + b;},easeInOutQuad: function (t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t + b;return -c/2 * ((--t)*(t-2) - 1) + b;},easeInCubic: function (t, b, c, d) {return c*(t/=d)*t*t + b;},easeOutCubic: function (t, b, c, d) {return c*((t=t/d-1)*t*t + 1) + b;},easeInOutCubic: function (t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t*t + b;return c/2*((t-=2)*t*t + 2) + b;},easeInQuart: function (t, b, c, d) {return c*(t/=d)*t*t*t + b;},easeOutQuart: function (t, b, c, d) {return -c * ((t=t/d-1)*t*t*t - 1) + b;},easeInOutQuart: function (t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t*t*t + b;return -c/2 * ((t-=2)*t*t*t - 2) + b;},easeInQuint: function (t, b, c, d) {return c*(t/=d)*t*t*t*t + b;},easeOutQuint: function (t, b, c, d) {return c*((t=t/d-1)*t*t*t*t + 1) + b;},easeInOutQuint: function (t, b, c, d) {if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;return c/2*((t-=2)*t*t*t*t + 2) + b;},easeInSine: function (t, b, c, d) {return -c * Math.cos(t/d * (Math.PI/2)) + c + b;},easeOutSine: function (t, b, c, d) {return c * Math.sin(t/d * (Math.PI/2)) + b;},easeInOutSine: function (t, b, c, d) {return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;},easeInExpo: function (t, b, c, d) {return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;},easeOutExpo: function (t, b, c, d) {return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;},easeInOutExpo: function (t, b, c, d) {if (t==0) return b;if (t==d) return b+c;if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;},easeInCirc: function (t, b, c, d) {return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;},easeOutCirc: function (t, b, c, d) {return c * Math.sqrt(1 - (t=t/d-1)*t) + b;},easeInOutCirc: function (t, b, c, d) {if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;},easeInElastic: function (t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;if (a < Math.abs(c)) { a=c; var s=p/4; }else var s = p/(2*Math.PI) * Math.asin (c/a);return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;},easeOutElastic: function (t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;if (a < Math.abs(c)) { a=c; var s=p/4; }else var s = p/(2*Math.PI) * Math.asin (c/a);return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;},easeInOutElastic: function (t, b, c, d) {var s=1.70158;var p=0;var a=c;if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);if (a < Math.abs(c)) { a=c; var s=p/4; }else var s = p/(2*Math.PI) * Math.asin (c/a);if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;},easeInBack: function (t, b, c, d, s) {if (s == undefined) s = 1.70158;return c*(t/=d)*t*((s+1)*t - s) + b;},easeOutBack: function (t, b, c, d, s) {if (s == undefined) s = 1.70158;return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;},easeInOutBack: function (t, b, c, d, s) {if (s == undefined) s = 1.70158;if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;},easeInBounce: function (t, b, c, d) {return c - service.animations.easeOutBounce (d-t, 0, c, d) + b;},easeOutBounce: function (t, b, c, d) {if ((t/=d) < (1/2.75)) {return c*(7.5625*t*t) + b;} else if (t < (2/2.75)) {return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;} else if (t < (2.5/2.75)) {return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;} else {return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;}},easeInOutBounce: function (t, b, c, d) {if (t < d/2) return service.animations.easeInBounce (t*2, 0, c, d) * .5 + b;return service.animations.easeOutBounce (t*2-d, 0, c, d) * .5 + c*.5 + b;}};return service;
}]);'use strict';angular.module('angular-svg-round-progress').directive('roundProgress', ['roundProgressService', 'roundProgressConfig', function(service, roundProgressConfig){if(!service.isSupported){return {// placeholder element to keep the structurerestrict: 'EA',template:'<div class="round-progress"></div>',replace: true};};return {restrict: "EA",scope:{current: "=",max: "=",semi: "=",radius: "@",color: "@",bgcolor: "@",stroke: "@",iterations: "@",animation: "@"},link: function (scope, element, attrs) {var ring = element.find('path'),background = element.find('circle'),options = angular.copy(roundProgressConfig),size,resetValue;var renderCircle = function(){var isSemicircle = options.semi,radius = parseInt(options.radius),stroke = parseInt(options.stroke);size = radius*2 + stroke*2;element.css({"width": size + "px","height": (isSemicircle ? size/2 : size) + "px","overflow": "hidden" // on some browsers the background overflows, if in semicircle mode});ring.attr({"stroke": options.color,"stroke-width": stroke,"transform": isSemicircle ? ('translate('+ 0 +','+ size +') rotate(-90)') : ''});background.attr({"cx": radius,"cy": radius,"transform": "translate("+ stroke +", "+ stroke +")","r": radius,"stroke": options.bgcolor,"stroke-width": stroke});};var renderState = function (newValue, oldValue){if(!angular.isDefined(newValue)){return false;};if(newValue < 0){resetValue = oldValue;return scope.current = 0;};if(newValue > options.max){resetValue = oldValue;return scope.current = options.max;};var max = options.max,radius = options.radius,isSemicircle = options.semi,easingAnimation = service.animations[options.animation],start = oldValue === newValue ? 0 : (oldValue || 0), // fixes the initial animationval = newValue - start,currentIteration = 0,totalIterations = parseInt(options.iterations);if(angular.isNumber(resetValue)){// the reset value fixes problems with animation, caused when limiting the scope.currentstart = resetValue;val = newValue - resetValue;resetValue = null;};(function animation(){service.updateState(easingAnimation(currentIteration, start, val, totalIterations),max,radius,ring,size,isSemicircle);if(currentIteration < totalIterations){requestAnimationFrame(animation);currentIteration++;};})();};scope.$watchCollection('[current, max, semi, radius, color, bgcolor, stroke, iterations]', function(newValue, oldValue, scope){// pretty much the same as angular.extend,// but this skips undefined values and internal angular keysangular.forEach(scope, function(value, key){// note the scope !== value is because `this` is part of the scopeif(key.indexOf('$') && scope !== value && angular.isDefined(value)){options[key] = value;};});renderCircle();renderState(newValue[0], oldValue[0]);});},replace:true,template:['<svg class="round-progress" xmlns="http://www.w3.org/2000/svg">','<circle fill="none"/>','<path fill="none"/>','</svg>'].join('\n')};}]);
转载于:https://my.oschina.net/u/1457074/blog/373345
采用Angular勾画SVG圆环形进度条相关推荐
- vue圆环进度条_vue圆环形进度条组件
1.先来个圆形背景,为了后续方便定位,请给它安排上position属性. CircleProgress.vue export default { name: "circle-progress ...
- css锥形渐变结合SVG实现环形进度条
css锥形渐变结合SVG实现环形进度条 准备: 锥形渐变 MDN:https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gra ...
- 自定义圆环形进度条实现
最近项目里边要用进度条,进度条中间展示进度,底部展示label,因为这个组件用的地方多,所以我就直接封装了一个通用组件. 先看一下效果图: 功能有: 圆环的颜色和进度可以自定义: 中间文字可以自定义: ...
- 微信小程序 环形进度条_Web微信小程序圆环形进度条组件CSS实现
首先理解小程序的自定义组件. 原理 看了网上的一些教程,实现圆环用的是两个半圆的旋转,通过overflow: hidden来控制的. 首先绘制底层容器,一个正方形,通过圆角变圆,用来作为未读进度的圆环 ...
- 前端 圆形进度图_图解CSS3制作圆环形进度条的实例教程
首先,当有人说你能不能做一个圆形进度条效果出来时,如果是静态完整圆形进度条,那么就很简单了: CSS Code复制内容到剪贴板 .circleprogress{ width:160px; height ...
- 用svg实现一个环形进度条
svg实现环形进度条需要用到的知识: 1.会使用path的d属性画一个圆环 //用svg的path元素的A命令画圆<pathd="M cx cym 0 -r a r r 0 1 0 0 ...
- js svg语音波动动画_SVG实现环形进度条的原理
之前在项目中遇到一个环形进度条的需求,要求能实时更新进度,脑海中瞬间便蹦出css,svg,canvas3中方案,对于3种方案个人更偏向于svg,用法简单,代码量也很少,同时也便于实时控制.具体效果如下 ...
- SVG绘制圆环进度条
在我们的大屏可视化项目中,经常会用到各种各样的图表.与传统的表格展示.枯燥的文字阐述相比,图表展示则使用户看起来更加直观.数据的展示则更加一目了然.本文基于svg绘图技术结合前端技术栈vue,以工作中 ...
- Vue 圆圈形进度条
圆圈形进度条在开发中经常遇到,这里把他封装成一个组件,实现方式为使用svg画图. 下面的代码中涉及到了svg的viewBox属性,按照张鑫旭大神的说法:SVG就像是我们的显示器屏幕,viewBox就是 ...
最新文章
- python语言解释器的全部代码都是开源的_Python IDE和解释器的区别是什么?
- 数据结构之排序算法:并归排序
- 阿里 Nacos 惊爆安全漏洞,火速升级!
- Redis闲谈:你一定需要的知识图谱
- Ubuntu 快捷截图
- 移动光猫路由改桥接降低延时初尝试
- iOS第三方开源库的吐槽和备忘 - 王培
- Receptive Field Block Net 论文阅读
- 计算机发展前景思维导图,计算机绘制思维导图有什么优势
- 计算机ncre教材,ncre教材
- 查看全文的css,如何通过纯CSS实现“点击展开全文”功能
- 9.1 DEP机制的保护原理
- HM编码器代码阅读(31)——帧间预测之AMVP/Merge模式(六)运动补偿
- 【华人学者风采】谭平 阿里人工智能实验室
- SVD分解图像压缩应用英语论文
- macos13 Ventura虚拟机安装无网络问题
- 12.synchronized的锁重入、锁消除、锁升级原理?无锁、偏向锁、轻量级锁、自旋、重量级锁
- Linux下的回收站trash
- 【数据产品案例】阿里生意参谋-竞争情报
- catia 草绘轮廓
热门文章
- org.xml.sax.SAXParseException: The string -- is not permitted within comments.
- Rabbitmq java.util.concurrent.TimeoutException小问题解决
- php截断上传,截断在文件包含和上传中的利用
- tablueau地图标记圆形_R语言在线地图神器:Leaflet for R包(三) 符号标记
- python summary writer_tensorflow中summary操作
- java实现键盘移动图片,快速移动视图与键盘
- python3 image_python3 ImageTk 安装方法
- 加密解密_作业-加密解密程序
- Java和pathion_Spring配置中的classpath:与classpath*:的区别
- java 多线程 notify_Java多线程8:wait()和notify()/notifyAll()