[WeiXinStable]2025/5/6转盘

wxml

<!--index.wxml-->
<navigation-bar title="罗盘动画" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<view class="anim-pic">
<image src="/images/img.png" animation="{{animation}}" />
</view>
<view class="anim-btns"> 
<button bind:tap='rotate'>旋转</button>
<button bind:tap="scale">缩放</button>
<button bind:tap="translate">移动</button>
<button bind:tap="skew">倾斜</button>
<button class="btn-two" bind:tap="rotateAndScale">旋转并缩放</button>
<button class="btn-two" bind:tap="rotateThenScale">旋转后缩放</button>
<button class="btn-two" bind:tap="all">同时展示全部</button>
<button class="btn-two">按顺序展示全部</button>
<button class="btn-reset" bind:tap="reset">回到原始状态</button>
</view>

wxss

/* pages/compass/compass.wxss */
page {
  background: #f1f1f1;
}

.anim-pic {
  width: 400rpx;
  height: 400rpx;
  margin: 40rpx auto;
}

.anim-pic image {
  width: 400rpx;
  height: 400rpx;
}

.anim-btns {
  padding: 20rpx 10rpx;
  border-top: 1px solid #ccc;
  display: flex;
  flex-grow: 1;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  height: 600rpx;
}

.anim-btns button {
  background: #fff;
  width: 160rpx;
  margin: 10rpx auto;
  height: 100rpx;
  font-weight: normal;
  padding-left: 0;
  padding-right: 0;
}

.anim-btns button.btn-reset {
  width: 610rpx;
}

.anim-btns button.btn-two {
  width: 300rpx;
  font-size: 16px;
}

js

// index.js
Page({
  data:{
    animation:{}
  },
  onReady(){
    this.animation=wx.createAnimation({
      duration:2000,
      timingFunction:"ease"
    })
  },
  rotate(){
    this.animation.rotate(Math.random()*720-360).step()
    this.setData({
      animation:this.animation.export()
    })
  },
  translate(){
    this.animation.translate(Math.random()*90,Math.random()*90).step()
    this.setData({
      animation: this.animation.export()
    });
  },
  scale() {
    this.animation.scale(2).step(); 
    this.setData({
      animation: this.animation.export()
    });
  },
  skew(){
    this.animation.skew(Math.random()*90,Math.random()*90).step()
    this.setData({
      animation:this.animation.export()
    })
  },
  rotateAndScale(){
    this.animation.rotate(Math.random()*720-360).step()
    this.animation.scale(Math.random()*2).step()
    this.setData({
      animation:this.animation.export()
    })
  },
  rotateThenScale(){
    this.animation.rotate(Math.random()*720-360).step()
    this.setData({
      animation:this.animation.export()
    })
    this.animation.scale(Math.random()*2).step()
    this.setData({
      animation:this.animation.export()
    })
  },
  reset(){
    this.animation.rotate(0).scale(1).translate(0,0).skew(0,0).step({
      duration:0
    })
    this.setData({
      animation:this.animation.export()
    })
  },
  all(){
    this.animation.rotate(Math.random()*720-360).step()
    this.animation.scale(2).step();
    this.animation.translate(Math.random()*90,Math.random()*90).step()
    this.animation.skew(Math.random()*90,Math.random()*90).step()
    this.setData({
      animation:this.animation.export()
    })
  }
})