微信小程序 使用animation对象实现风水罗盘动画，任务需求： (1) 实现旋转动画效果； (2) 实现缩放动画效果； (3) 实现移动动画效果； (4) 实现倾斜动画效果； (5) 实现旋转和缩放动画同时效果； (6) 实现旋转后缩放动画效果。 实现手指触摸旋转罗盘，点击界面上的按钮来操纵罗盘

下面是实现手指触摸旋转罗盘，点击界面上的按钮来操纵罗盘的微信小程序示例代码：

wxml文件：

<view class="container">
  <view class="compass" animation="{{compassAnimation}}" bindtouchstart="startRotate" bindtouchmove="rotate" bindtouchend="stopRotate">
    <image class="bg" src="/images/compass_bg.png"></image>
    <image class="pointer" src="/images/compass_pointer.png"></image>
  </view>
  <view class="control">
    <button class="btn" bindtap="rotateLeft">左旋转</button>
    <button class="btn" bindtap="rotateRight">右旋转</button>
    <button class="btn" bindtap="rotateZoomIn">放大</button>
    <button class="btn" bindtap="rotateZoomOut">缩小</button>
    <button class="btn" bindtap="rotateMove">移动</button>
    <button class="btn" bindtap="rotateTilt">倾斜</button>
    <button class="btn" bindtap="rotateZoomAndRotate">旋转和缩放</button>
    <button class="btn" bindtap="rotateAfterZoom">旋转后缩放</button>
  </view>
</view>

js文件：

Page({
  data: {
    compassAnimation: {}, // 罗盘动画对象
    startX: 0, // 手指起始位置的X坐标
    startY: 0, // 手指起始位置的Y坐标
    currentRotate: 0, // 当前罗盘的旋转角度
    currentScale: 1, // 当前罗盘的缩放比例
    currentTranslateX: 0, // 当前罗盘的X轴平移距离
    currentTranslateY: 0, // 当前罗盘的Y轴平移距离
    currentSkewX: 0, // 当前罗盘的X轴倾斜角度
    currentSkewY: 0 // 当前罗盘的Y轴倾斜角度
  },
  // 开始旋转
  startRotate(e) {
    this.setData({
      startX: e.touches[0].clientX,
      startY: e.touches[0].clientY
    });
  },
  // 旋转
  rotate(e) {
    let rotate = this.data.currentRotate + (e.touches[0].clientX - this.data.startX) / 2;
    this.setData({
      compassAnimation: wx.createAnimation({
        duration: 0,
        timingFunction: 'linear'
      }).rotate(rotate).export(),
      currentRotate: rotate,
      startX: e.touches[0].clientX,
      startY: e.touches[0].clientY
    });
  },
  // 停止旋转
  stopRotate(e) {
    this.setData({
      startX: 0,
      startY: 0
    });
  },
  // 左旋转
  rotateLeft() {
    let rotate = this.data.currentRotate - 30;
    this.setData({
      compassAnimation: wx.createAnimation({
        duration: 300,
        timingFunction: 'linear'
      }).rotate(rotate).export(),
      currentRotate: rotate
    });
  },
  // 右旋转
  rotateRight() {
    let rotate = this.data.currentRotate + 30;
    this.setData({
      compassAnimation: wx.createAnimation({
        duration: 300,
        timingFunction: 'linear'
      }).rotate(rotate).export(),
      currentRotate: rotate
    });
  },
  // 放大
  rotateZoomIn() {
    let scale = this.data.currentScale + 0.1;
    this.setData({
      compassAnimation: wx.createAnimation({
        duration: 300,
        timingFunction: 'linear'
      }).scale(scale).export(),
      currentScale: scale
    });
  },
  // 缩小
  rotateZoomOut() {
    let scale = this.data.currentScale - 0.1;
    this.setData({
      compassAnimation: wx.createAnimation({
        duration: 300,
        timingFunction: 'linear'
      }).scale(scale).export(),
      currentScale: scale
    });
  },
  // 移动
  rotateMove() {
    let translateX = this.data.currentTranslateX + 50;
    let translateY = this.data.currentTranslateY + 50;
    this.setData({
      compassAnimation: wx.createAnimation({
        duration: 300,
        timingFunction: 'linear'
      }).translate(translateX, translateY).export(),
      currentTranslateX: translateX,
      currentTranslateY: translateY
    });
  },
  // 倾斜
  rotateTilt() {
    let skewX = this.data.currentSkewX + 30;
    let skewY = this.data.currentSkewY + 30;
    this.setData({
      compassAnimation: wx.createAnimation({
        duration: 300,
        timingFunction: 'linear'
      }).skew(skewX, skewY).export(),
      currentSkewX: skewX,
      currentSkewY: skewY
    });
  },
  // 旋转和缩放
  rotateZoomAndRotate() {
    let rotate = this.data.currentRotate + 30;
    let scale = this.data.currentScale + 0.1;
    this.setData({
      compassAnimation: wx.createAnimation({
        duration: 300,
        timingFunction: 'linear'
      }).rotate(rotate).scale(scale).export(),
      currentRotate: rotate,
      currentScale: scale
    });
  },
  // 旋转后缩放
  rotateAfterZoom() {
    let rotate = this.data.currentRotate + 30;
    let scale = this.data.currentScale + 0.1;
    this.setData({
      compassAnimation: wx.createAnimation({
        duration: 300,
        timingFunction: 'linear'
      }).rotate(rotate).export()
    });
    let that = this;
    setTimeout(function() {
      that.setData({
        compassAnimation: wx.createAnimation({
          duration: 300,
          timingFunction: 'linear'
        }).scale(scale).export(),
        currentRotate: rotate,
        currentScale: scale
      });
    }, 300);
  }
})

上述示例代码实现了罗盘动画的旋转、缩放、移动、倾斜等效果，并且提供了按钮来操纵罗盘。同时，通过绑定触摸事件来实现手指触摸旋转罗盘的效果。