--- theme: condensed-night-purple --- ![4711705568245_.pic.jpg](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/20c840ddab9941f986a9d809cfd884a0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1706&h=1280&s=182661&e=jpg&b=446e8f) # 帮助阅读此篇文章主要是为了实现仪表盘功能，前后过了4种方案，每篇方案从逻辑、代码、效果、问题四个方面出发。最后个人总结。同时**非常非常**希望有大佬能够提供一个方案，个人实在想不到实现方案了 # 需求 h5页面中，做一个环形仪表盘（如下图），需要一个从0%到实际百分比的增长过渡动效 ![未命名.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/278e0da84ab243efba147200b6e717ff~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=223&h=223&s=44227&e=png&a=1&b=fefcfc) # 前提使用前端原生Html、css、js语言实现, 不打算借助第三方插件。 # 最初Scheme 将UI图片作为背景，上面放一个白色div作为遮罩，再利用css3将白色div旋转，从而达到过渡效果。 #### 代码如下: ```

``` #### 效果如下: ![屏幕录制2024-01-29 13.50.58.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d8e6ea50c034d20848dd2a5697b84c0~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=518&h=518&s=310606&e=gif&f=86&b=fdfdfd) #### 出现问题：由于仪表盘整体大于180度，所以白色div，在最开始遮挡全部仪表盘，那么旋转一定角度后一定会覆盖UI图。 # 进化Scheme 根据上面出现的问题，想到与UI沟通将仪表盘改成180度效果（解决不了问题，就把问题解决掉），该方案由于改变了原型之后会导致UI过于丑，就没有进行深度测试。 # 超进化Scheme 根据上面两个方案的结合，想到将方案1中的白色div换成一张指针图片，利用css3旋转追针，达到过渡效果，但此方案也是改了UI效果。 #### 代码如下: ```

``` #### 效果如下: ![屏幕录制2024-01-29 15.44.31.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d47caa4ea6cf4f36af1fd4a067d75316~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=518&h=518&s=306444&e=gif&f=50&b=fdfcfc) #### Now: 此时大脑宕机了，在我的前端知识基础上，想不到能够完美实现UI效果的方案了。于是和同事探讨了一下，了解到element-plus中的进度条有类似的效果，于是打算看一下源码，了解到它是svg实现的。发现新大陆又开始尝试svg实现。 # 究极进化Scheme 利用svg，做一个带白色的背景圆环A，再做一个带有渐变背景色的进度圆环B, 利用进度圆环的偏移值、显示长度、断口长度配合css3过渡实现过渡效果。 #### 代码如下: ```

``` #### 效果如下： ![屏幕录制2024-01-29 15.46.35.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/071dca2e992f41a8983b81984dfb07ed~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=518&h=518&s=128165&e=gif&f=31&b=f5f5f5) #### 问题：基本实现，但是还有一个问题是，渐变色是两点之间的线性渐变，无法做到圆环的顺时针渐变。 # 总结 - 单纯前端不是万能的😂😂😂😂 - 个人认为这个需求还是能够实现的 - **希望有da lao能出个方案** - 加油，继续搞