技術標籤：css3技巧codeuniapphtml5vue

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>