微信小程序罗盘动画

微信小程序的罗盘动画可以通过使用小程序的动画 API 来实现。以下是一种简单的实现方式：

1. 在 wxml 文件中添加一个罗盘图片：

<image src="/images/compass.png" class="compass"></image>

2. 在 wxss 文件中设置罗盘图片的样式：

.compass {
  width: 100rpx;
  height: 100rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50rpx;
  margin-left: -50rpx;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

3. 在 js 文件中获取当前设备的方向，并将罗盘图片旋转到对应的角度：

wx.onCompassChange(function (res) {
  var direction = res.direction.toFixed(0);
  var rotate = "rotate(" + direction + "deg)";
  wx.createAnimation({
    duration: 0,
    timingFunction: "linear"
  }).rotate(direction).step();
  this.setData({
    compassRotate: rotate
  });
});

其中，onCompassChange 是小程序提供的获取当前设备方向的 API，通过调用该 API 并将返回值转为整数，可以获取到当前设备的方向角度。然后，通过使用小程序的动画 API 将罗盘图片旋转到对应的角度，并将旋转后的角度赋给罗盘图片的 transform 样式即可。

以上就是一个简单的微信小程序罗盘动画的实现方式。