仪表盘动画

最新推荐文章于 2025-03-25 14:23:03 发布

荼蘼小主

最新推荐文章于 2025-03-25 14:23:03 发布

阅读量1.3k

点赞数 3

文章标签： javascript css3 html html5 es6

本文链接：https://blog.csdn.net/weixin_43998944/article/details/109742436

版权

这篇博客介绍了如何在小程序和H5中实现仪表盘动画，由于小程序中canvas的适配问题，作者选择了使用CSS来制作。通过设置透明刻度图片、绝对定位、CSS3旋转属性和角度计算实现颜色变化。利用countUp.js库完成数字滚动和颜色动画效果，提供代码片段和GitHub链接供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

仪表盘动画

小程序中使用到了仪表盘动画，在小程序上使用方式是采用canvas 去绘制的，canvas 绘制是需要一定时间，并且绘制出来的图在华为p30 p40 上有很大概览的适配性问题，后期需要使用h5 开发相同功能，果断抛弃了canvas 采用了css 来实现了仪表盘动画

效果图

在这里插入图片描述

实现思路

1、让ui给一张底部为透明的刻度图片，绝对定位，设置z-index 值
2、准备个盒子相同与刻度图片相同宽高的绝对定位叠到刻度图片上
3、通过css3的旋转属性，旋转以便达到变色的效果
4、计算旋转角度，公式为：180/100 , 其中180表示半圆， 100表示的是总分100分，这个就可以根据公司需求来做了

附上代码片段

        <div class="indicator">
          <div class="keduimg"><img src="~assets/images/aKeyMatch/bg_data.png" alt=""></div>
          <div class="score" :style="{color: scoreStyle}">{
   {
   detailMessage.score}}</div>
          <!-- 大刻度 -->
          <div class="rotate" :style="{'

最低0.47元/天解锁文章