仪表盘动画

仪表盘动画

小程序中使用到了仪表盘动画，在小程序上使用方式是采用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=