match_applet/unpackage/dist/dev/mp-weixin/pagesHome/team/components/circle.wxml

<wxs module="animateModule">

	var Timing = {
		easeIn: function easeIn(pos) {
			return Math.pow(pos, 3);
		},
		easeOut: function easeOut(pos) {
			return Math.pow(pos - 1, 3) + 1;
		},
		easeInOut: function easeInOut(pos) {
			if ((pos /= 0.5) < 1) {
				return 0.5 * Math.pow(pos, 3);
			} else {
				return 0.5 * (Math.pow(pos - 2, 3) + 2);
			}
		},
		linear: function linear(pos) {
			return pos;
		}
	};


	function setTimeout(t, cb, d) {
		if (d > 0) {
			var s = getDate().getTime();
			var fn = function() {
				if (getDate().getTime() - s > d) {
					cb && cb();
				} else
					t.requestAnimationFrame(fn);
			}
			fn();
		} else
			cb && cb();
	}


	function Animation(opts) {
		opts.duration = typeof opts.duration === 'undefined' ? 1000 : opts.duration;
		opts.timing = opts.timing || 'linear';
		var delay = 17;

		function createAnimationFrame() {
			if (typeof setTimeout !== 'undefined') {
				return function(step, delay) {







					setTimeout(opts.instance, function() {
						var timeStamp = getDate()
						step(timeStamp);
					}, delay)

				};
			} else if (typeof requestAnimationFrame !== 'undefined') {
				return requestAnimationFrame;
			} else {
				return function(step) {
					step(null);
				};
			}
		};
		var animationFrame = createAnimationFrame();
		var startTimeStamp = null;
		var _step = function step(timestamp) {
			if (timestamp === null) {
				opts.onProcess && opts.onProcess(1);
				opts.onAnimationFinish && opts.onAnimationFinish();
				return;
			}
			if (startTimeStamp === null) {
				startTimeStamp = timestamp;
			}
			if (timestamp - startTimeStamp < opts.duration) {
				var process = (timestamp - startTimeStamp) / opts.duration;
				var timingFunction = Timing[opts.timing];
				process = timingFunction(process);

				opts.onProcess && opts.onProcess(process);
				animationFrame(_step, delay);
			} else {
				opts.onProcess && opts.onProcess(1);
				opts.onAnimationFinish && opts.onAnimationFinish();
			}
		};
		animationFrame(_step, delay);
	}

	function getPath(deg) {
		var path = '50% 50%'
		//各个锚点
		var ps = ['0% 0%', '100% 0%', '100% 100%', '0% 100%']
		var ps1 = path + ',' + ps[0]
		var ps2 = ps1 + ',' + ps[1]
		var ps3 = ps2 + ',' + ps[2]
		var ps4 = ps3 + ',' + ps[3]
		var ops = [
			function(per) {
				return ps1 + ',' + (per + '% 0%')
			},
			function(per) {
				return ps2 + ',' + ('100% ' + per + '%')
			},
			function(per) {
				return ps3 + ',' + (100 - per) + '% 100%'
			},
			function(per) {
				return ps4 + ',' + '0% ' + (100 - per) + '%'
			},
		]
		if (deg == 0) {
			return 'polygon(50% 50%, 50% 0%)'
		} else if (deg % 360 == 0) {
			return ''
		}
		var idx = parseInt(deg / 90) % 4
		var pdeg = deg % 90
		var per = pdeg / 90 * 100
		if (ops[idx]) {
			return 'polygon(' + ops[idx](per) + ')'
		} else {
			return ''
		}
	}

	function setDeg(newValue, oldValue, ownerInstance, instance) {
		var odeg = oldValue * 360
		var deg = newValue * 360
		var offset = deg - odeg

		var ds = instance.getDataset()
		if (!ds.animate) {
			var path = getPath(deg)
			instance.setStyle({
				'clip-path': path,
			})
			return
		}
		Animation({
			instance: ownerInstance,
			timing: 'easeInOut',
			duration: 300,
			onProcess: function onProcess(process) {
				var pdeg = odeg + process * offset
				var path = getPath(pdeg)
				var com = ownerInstance.selectComponent('.circle');
				com.setStyle({
					'clip-path': path,
				})
			},
			onAnimationFinish: function onAnimationFinish() {}
		});
	}
	module.exports = {
		pro: setDeg,
	}

</wxs>
<view class="circle-progress-bar data-v-2577f78a" style="{{'width:' + j + ';' + ('height:' + k)}}"><view class="circle data-v-2577f78a" change:prop="{{animateModule.pro}}" prop="{{a}}" data-animate="{{b}}" style="{{'transform:' + c + ';' + ('border:' + d)}}"></view><view wx:if="{{e}}" class="bg data-v-2577f78a" style="{{'background:' + f}}"></view><view wx:if="{{g}}" class="border-back data-v-2577f78a" style="{{'border:' + h}}"></view><view class="center data-v-2577f78a"><text class="data-v-2577f78a">{{i}}</text></view></view>