动态水波纹边框

![PixPin\_2025-09-05\_15-31-32.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/91140f3d777e46a0badba1c4024112e9~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5ouc5peg5b-n:q75.awebp?rk3s=f64ab15b&x-expires=1761630026&x-signature=EGrn%2FeicIYS6xkD06UFYMQz%2F32o%3D) * **绘制基础图形 (HTML/SVG)** * 我们先用 ` 动态水波纹边框

50%

进度: 50%

波纹幅度 (scale): 15

波纹频率 (baseFrequency): 0.05

波纹细节 (numOctaves): 2

``` # 第二版本-带进度条边框宽度版本 ![image.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ff8f7b9365d04b3ca163bc639f11ecf7~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg5ouc5peg5b-n:q75.awebp?rk3s=f64ab15b&x-expires=1761630026&x-signature=ExDJ%2BlkKXWL8b7muyUEk%2FZd5Z4A%3D) ``` 动态水波纹边框

50%

进度: 50%

边框宽度: 20

波纹幅度 (scale): 15

波纹频率 (baseFrequency): 0.05

波纹细节 (numOctaves): 2

``` # vue3版本 ``` ``` # react版本公共组件 ``` import React, { useState, useMemo, useId } from 'react'; // --- WavyProgress Component --- // 将 WavyProgress 组件直接定义在 App.jsx 文件中，以解决导入问题 const WavyProgress = ({ size = 250, progress = 50, strokeWidth = 20, scale = 15, frequency = 0.05, octaves = 2, activeColor = '#ceff00', inactiveColor = '#333', textColor = '#ceff00', }) => { const filterId = useId(); const radius = 50; const circumference = 2 * Math.PI * radius; const strokeDashoffset = useMemo(() => { return circumference - (progress / 100) * circumference; }, [progress, circumference]); const containerStyle = useMemo(() => ({ position: 'relative', width: `${size}px`, height: `${size}px`, }), [size]); const textStyle = useMemo(() => ({ color: textColor, position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', fontSize: `${size * 0.2}px`, fontWeight: 'bold', }), [textColor, size]); const circleStyle = { fill: 'none', strokeWidth: strokeWidth, transition: 'stroke-dashoffset 0.35s ease', strokeDasharray: `${circumference} ${circumference}`, }; return (

{`${Math.round(progress)}%`}

); }; // --- App Component --- // App 组件现在可以直接使用上面的 WavyProgress 组件 const App = () => { const [progress, setProgress] = useState(50); const [strokeWidth, setStrokeWidth] = useState(20); const [scale, setScale] = useState(15); const [frequency, setFrequency] = useState(0.05); const [octaves, setOctaves] = useState(2); // 将 CSS 样式直接嵌入到组件中 const styles = ` body { background-color: #1a1a1a; margin: 0; font-family: Arial, sans-serif; } #app-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; flex-direction: column; gap: 40px; } .controls { display: flex; flex-direction: column; gap: 15px; background: #2c2c2c; padding: 20px; border-radius: 8px; color: white; width: 300px; } .control-group { display: flex; flex-direction: column; gap: 5px; } .control-group label { display: flex; justify-content: space-between; } input[type="range"] { width: 100%; } `; return ( <>

进度: {progress}% setProgress(Number(e.target.value))} min="0" max="100" />

边框宽度: {strokeWidth} setStrokeWidth(Number(e.target.value))} min="1" max="50" step="1" />

波纹幅度 (scale): {scale} setScale(Number(e.target.value))} min="0" max="50" step="1" />

波纹频率 (frequency): {frequency.toFixed(2)} setFrequency(Number(e.target.value))} min="0.01" max="0.2" step="0.01" />

波纹细节 (octaves): {octaves} setOctaves(Number(e.target.value))} min="1" max="10" step="1" />

); }; export default App; `` # canvas-版本笔刷效果环形进度条 (流动方向修正版)

配置属性

百分比 48%

进度条粗细 16px

边缘粗糙度 3

过渡速度 7

流动速度 3

进度颜色

底环颜色

# 微信小程序测试版本 ``` # 将环形进度条改为直线形式，同时保留核心的“笔刷”和“流动”**效果**