小程序css动画实现图标围绕盒子旋转

js代码

    // 计算功能图标旋转角度
    let deg = 360; // 圆的总角度
    let menuList = this.menuList; // 获取menuList内数据
    let itemDeg = deg / menuList.length;
    // 获取原生小程序对象
    let that = this.$wxpage;
    // 遍历菜单
    menuList.forEach( ( item , index , self ) => {
        item.rotate = index * itemDeg;
      // 创建小程序动画
      that.animate(`.menu_icon${index}` , [
        { rotate : index * itemDeg },
        { rotate : 360 * 50 + index * itemDeg } // 小程序动态添加的动画无法设置永远循环 ， 所以通过延长时间和旋转圈数的方式达到长时间生效
      ] , 6000000 , function () {
        console.log('animate')
      })
      // 图片反向动画
      that.animate(`.menu_image${index}` , [ // 如果不设置反向动画 图标旋转过程中会随着盒子角度改变而旋转
        { rotate : 360 * 50 -index * itemDeg },
        { rotate : -index * itemDeg }
      ] , 6000000 , function(){
        console.log('imgAnimate');
      })
    })

menuList数据结构

    menuList : [
      {
        icon : 'https://ka.yijishi.top/uploads/image/20201217/1.gif',
        rotate : '',
      },
      {
        icon : 'https://ka.yijishi.top/uploads/image/20201217/2.gif',
        rotate : '',
      },
      {
        icon : 'https://ka.yijishi.top/uploads/image/20201217/3.gif',
        rotate : '',
      },
      {
        icon : 'https://ka.yijishi.top/uploads/image/20201217/4.gif',
        rotate : '',
      },
      {
        icon : 'https://ka.yijishi.top/uploads/image/20201217/5.gif',
        rotate : '',
      },
    ]

html结构

      <view class="menu poa">
        <view wx:for="{{menuList}}" class="menu_icon{{index}}" >
          <image src="{{item.icon}}"  class="menu_image{{index}}" />
        </view>
      </view>

css

  // 功能入口图标
  .menu {
    width: 50vw;
    height: 375rpx;
    left: 48%;
    transform : translate(-46% , -61%);
    view {
    position: absolute;
    width: 95rpx;
    left: 0;
    top: 0;
    transform-origin : 47vw / 2 243rpx !important;
      image {
        position: absolute;
        left: 0;
        top: 0;
        width: 95rpx;
        height : 140rpx;
      }
    }
  }
}