svg实现react/rax圆环倒计时进度条组件code|svg实现react/rax圆环倒计时进度条组件code snippet svg实现react

效果：

文章图片

不用svg几乎都是需要有额外的元素遮挡实现，但没有办法做到半透明圆环效果。纯svg画，加宽path的stroke宽度视觉上呈现圆环。（是不是高中学过的三角函数快忘光了？）
以半径32的圆环为例，注意画笔定位基准落在中心位置，需要调整viewbox尺寸避免出现圆环显示不完整。（拷贝自用）

import { createElement, useState, useEffect, useRef, useCallback } from 'rax'; interface IProps { time: number; // milliseconds style?: Rax.CSSProperties; onEnd?: () => void; } export const CircleTimer = (props: IProps) => { const curT = useRef(0); const timer = useRef(); const [point, setPoint] = useState('32 0'); useEffect(() => { return () => { if (timer.current) { clearTimeout(timer.current); } }; }, []); const calPoint = useCallback(() => { if (curT.current >= props.time) { props.onEnd && props.onEnd(); return; }timer.current = setTimeout(() => { curT.current += 50; const deg = (curT.current / props.time) * Math.PI * 2; const x = 32 + 32 * Math.sin(deg); const y = 32 - 32 * Math.cos(deg); if (curT.current < (1 / 2) * props.time) { setPoint(`${x} ${y}`); } else if (curT.current > (1 / 2) * props.time) { setPoint(`32 64 A 32 32 0 0 1 ${x} ${y}`); } calPoint(); }, 50); }, [props.time, props.onEnd]); useEffect(() => { calPoint(); }, [calPoint]); return (【svg实现react/rax圆环倒计时进度条组件code|svg实现react/rax圆环倒计时进度条组件code snippet】); };

备注：