uniapp 高德地图webjs 陀螺仪旋转动效丝滑实现

问题：用uniapp 开发地图功能，选用了高德地图webjs进行开发，其中就有一个点位陀螺仪的功能需求， 需要读取陀螺仪的经纬度，然后点位小图标根据陀螺仪的方向进行旋转。类似我们经常用高德地图的定位 导航功能里面的点位陀螺仪。

尝试1： 使用marker标记里面的angle，进行更新marker点位方向，但是存在一个问题，就是旋转是瞬间 发生，然后多次渲染，感觉动画效果会一卡一卡的。

this.locationMarker = new AMap.Marker({
         zIndex: 1,
         icon: new AMap.Icon({
             image: selectIco.selectIco,
             size: new AMap.Size(56, 56), //图标大小
             imageSize: new AMap.Size(56, 56)
        }),
        angle: addressObj.angle || 0,  // 旋转角度
        offset: new AMap.Pixel(-28, -28),
        position: [lng, lat],
});

尝试2： 使用css动画，比较丝滑一点，但是也不是和高德一样非常丝滑的存在，最终发现css动画中的贝赛尔曲线，完美解决

.LocationMarker {
	width: 56px;
	height: 56px;
	/* 贝塞尔曲线 */
	transition: transform cubic-bezier(0.1, 0.7, 1.0, 0.1) 0.8s;
	/* 平滑过渡效果 */
}


this.locationMarker = new AMap.Marker({
        zIndex: 1,
        content: `<div class="LocationMarker" style="transform: rotate(${addressObj.angle}deg);"><img style="width:100%;height:100%" src="${selectIco.selectIco}"></img></div>`,
        // angle: addressObj.angle || 0,
        offset: new AMap.Pixel(-28, -28),
        position: [lng, lat],
});