仪表盘动画设计思路

此次为工作中遇到的一个仪表盘动画，特此把思路写下来，一遍后续好用

效果图

也就是根据分数不同走到不同的位置

思路

1. 需要准备刻度图片，底色是白色，刻度位置为透明，绝对定位，设置z-index值
2. 在刻度图片下面准备一个颜色的盒子，盒子的宽，高和刻度的一致，绝对定位，设置z-index值并小于刻度的z-index值
3. 通过css3的旋转属性，旋转刻度下面的颜色盒子，以来达到颜色的变换
4. 计算旋转的角度 公式为：180/100*分数 注意分数最大值100分

通过上述思路之后，布局的效果图如下

附上小程序中设计这个动画+数字动画的代码片段

html样式

vue中的js

// 计数器动画js请查看上一篇文章
import CountUp from './countUp.js';
export default{
data() {
		return {
			animationData: {} //仪表盘动画对象
		};
	},
computed: {
		scoreStyle() {
			return `rgb(${this.getRGB()})`;
		}
	},
// 创建仪表盘动画
		setMeterAnimation() {
			hideLoading();
			const _this = this;
			const meterAnimation = uni.createAnimation({
				duration: 2000,
				timingFunction: 'ease-in-out',
				transformOrigin: 'top center'
			});
			let resultScore = this.resultScore,
				rotateDeg = (180 / 100) * resultScore,
				endRGB = this.scoreStyle;
			meterAnimation
				.rotate(rotateDeg)
				.backgroundColor(endRGB)
				.step();
			this.animationData = meterAnimation.export();
			let countUp = new CountUp(0, resultScore, 0, 3.8, {
				printValue(value) {
					_this.resultScore = value;
				}
			});
			countUp.start();
		},
		// 获取颜色值
		getRGB() {
			let color = '116, 196, 58',
				score = this.resultScore;
			if (score > 30 && score <= 49) {
				color = '84, 140, 255';
			} else if (score > 50 && score <= 69) {
				color = '242, 159, 84';
			} else if (score > 70 && score <= 100) {
				color = '230, 86, 86';
			}
			return color;
		}
	}

css样式