在微信小程序用动画做一个时钟具体案例代码

当我们使用微信小程序时，可以通过使用WXML、WXSS、JS和JSON等技术实现动画效果，下面是一个简单的实现时钟动画的案例代码：

WXML文件：

<view class="clock">
  <view class="hour-hand" style="transform: rotate({{hourAngle}}deg);"></view>
  <view class="minute-hand" style="transform: rotate({{minuteAngle}}deg);"></view>
  <view class="second-hand" style="transform: rotate({{secondAngle}}deg);"></view>
  <view class="dot"></view>
</view>

WXSS文件：

.clock {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  background-color: #fff;
  position: relative;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, .2);
}

.dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background-color: #000;
  position: absolute;
  top: calc(50% - 5rpx);
  left: calc(50% - 5rpx);
}

.hour-hand,
.minute-hand,
.second-hand {
  position: absolute;
  top: calc(50% - 2rpx);
  left: calc(50% - 1rpx);
  background-color: #000;
}

.hour-hand {
  width: 4rpx;
  height: 40rpx;
}

.minute-hand {
  width: 3rpx;
  height: 60rpx;
}

.second-hand {
  width: 2rpx;
  height: 80rpx;
}

JS文件：

Page({
  data: {
    hourAngle: '',
    minuteAngle: '',
    secondAngle: ''
  },
  
  onLoad: function () {
    this.timer();
    setInterval(() => {
      this.timer();
    },1000);
  },

  timer: function () {
    const now = new Date();
    const hour = now.getHours();
    const minute = now.getMinutes();
    const second = now.getSeconds();
    const hourAngle = (hour * 30 + minute / 2) % 360;
    const minuteAngle = (minute * 6 + second / 10) % 360;
    const secondAngle = second * 6 % 360;

    this.setData({
      hourAngle,
      minuteAngle,
      secondAngle
    })
  }
})

JSON文件：

{
  "navigationBarTitleText": "时钟动画"
}

以上代码实现了一个简单的时钟动画，其中利用了CSS3的旋转属性transform和JavaScript中的Date对象来获取当前的时间。