css3 + js实现环形进度条，旋转圆形，旋转环形

css3+js实现环形进度条

一种实现环形进度条的案例，旋转圆圈

先上效果图

使用语言

CSS，VUE，UNI-APP
本示例的元素赋值部分为vue写法，如果你不是用的vue环境，需要重写style赋值代码行

核心样式说明

clip-path:polygon(50% 50%, 50% 0, 52%, 1%);
border: 30rpx solid #f00;
border-radius: 50%;

使用clip-path的polygon区域选择功能，一点一点将圆形边框显示出来，第一个点50% 50%是初始点，在圆心，后面的点按照环形的出现顺序排列在环上

核心js(javascript)说明

// 角度与x，y轴百分比数据转换函数
calc(rate){
	rate = (rate + 180) * -1
	let x = (Math.sin(rate * Math.PI/180) + 1) / 2
	let y = (Math.cos(rate * Math.PI/180) + 1) / 2
	return Math.round(x * 100) + "% " + Math.round(y * 100) + "%"
}

calc函数中rate = (rate + 180) * -1 将原本从底部开始逆时针旋转的动画调整为远点为顶部的顺时针。同学们如有方向和起始点的修改可以修改这里。

// 驱动环形旋转的定时函数
let si = setInterval(() => {
	// 角度，从0 开始
	let d = 0;
	// 累加的最大值
	let totalTime = 10000;
	// 保存的环上的点数组数据
	let dotData = []
	// 计算并保存当前角度的
	dotData.push(this.calc(d / totalTime * 360))
	// 将计算的点数据赋值给页面环元素(vue写法)
	this.cycleCss = "polygon(50% 50%," + dotData.join(",") + ")"
	if(d >= totalTime){
		clearInterval(si)
		console.info("结束")
	} else {
		d = d + 50;
	}
}, 50)

完整代码如下(uni-app版)

<template>
	<view class="content">
		<view class="wrapper">
			<view class="cycle" :style="{clipPath: cycleCss}"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				cycleCss: "polygon(50% 0)"
			}
		},
		onLoad() {
			let d = 0;
			let totalTime = 10000;
			let dotData = []
			let si = setInterval(() => {
				dotData.push(this.calc(d / totalTime * 360))
				this.cycleCss = "polygon(50% 50%," + dotData.join(",") + ")"
				if(d >= totalTime){
					clearInterval(si)
					console.info("结束")
				} else {
					d = d + 50;
				}
			}, 50)
		},
		methods: {
			calc(rate){
				rate = (rate + 180) * -1
				let x = (Math.sin(rate * Math.PI/180) + 1) / 2
				let y = (Math.cos(rate * Math.PI/180) + 1) / 2
				return Math.round(x * 100) + "% " + Math.round(y * 100) + "%"
			}
		}
	}
</script>

<style>
	.cycle {
		width: 170rpx;
		height: 170rpx;
		border: 30rpx solid #f00;
		border-radius: 50%;
		margin-left: -5rpx;
		margin-top: -5rpx;
	}
	.wrapper{
		margin: 30rpx;
		border-radius: 50%;
		width: 220rpx;
		height: 220rpx;
		overflow: hidden;
	}
</style>