小程序实现公告栏等3D翻转效果

最终效果

 

<view class='announce' animation='{{rotate3dA}}'>
      <view class='announce1'>
        <image class='award_user' src='{{userInfo.avatarUrl}}'></image>
        <text>恭喜188****2222用户中奖成为幸运儿</text>
      </view>
      <view class='announce2'>
        <image class='award_user' src='{{userInfo.avatarUrl}}'></image>
        <text>恭喜188****3333用户中奖成为幸运儿</text>
      </view>
      <view class='announce3'>
        <image class='award_user' src='{{userInfo.avatarUrl}}'></image>
        <text>恭喜188****4444用户中奖成为幸运儿</text>
      </view>
      <view class='announce4'>
        <image class='award_user' src='{{userInfo.avatarUrl}}'></image>
        <text>恭喜188****5555用户中奖成为幸运儿</text>
      </view>
    </view>

.announce {
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: perspective(400px) rotatex(0deg) rotatey(0deg);/*拥有近大远小透视效果*/
  transform-style: preserve-3d;/*设置为3d空间*/
  position: relative;
  /* animation: xuanzhuan 5s cubic-bezier(0.0,0.0,0.0,0.0) infinite forwards; *//*css控制無限翻轉效果*/
}

@keyframes xuanzhuan {
  from {
    transform: perspective(400px) rotatex(0deg);
  }

  to {
    transform: perspective(400px) rotatex(360deg);
  }
}

.announce view {
  display: flex;
  align-items: center;
  position: relative;
  background-color: #fff;
}

.announce1 {
  /* background-color: red; */
  transform:  rotatex(270deg) translatez(12.5px);
}

.announce2{
  transform: rotatex(90deg) translatez(12.5px);
  /* background-color: yellow; */
  margin-top: -25px;
}
.announce3{
  transform: rotatex(180deg) translatez(12.5px);
  /* background-color: green; */
  margin-top: -25px;
}
.announce4{
  transform:translatez(12.5px);
  /* background-color: blue; */
  margin-top: -25px;
}

.announce view text {
  line-height: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 475rpx;
}

最好在onshow中調用rotate3d方法，因為在離開頁面和小程序時，需要清除計時器，如果在onload中調用，當清除計時器后，只有在重啟小程序后，計時器會再次生效，重新進入寫有計時器的頁面並不會使其再次生效，

// 3D翻转
  rotate3d: function () {
    var that = this
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
    that.data.setInt = setInterval(function () {
      i++
      //rotate3d: 参数 x,y,z轴,  翻转度数
      //其中x,y,z轴为0-1范围，y轴设置为1，代表以y轴为旋转轴
      animation.rotate3d(1, 0, 0, 90*i).step()
      that.setData({
        rotate3dA: animation.export()
      })
    },3000)
  },
onUnload: function(){
    var that = this
    i = 0
    //離開頁面時，使公告還原
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
    animation.rotate3d(1, 0, 0, 0).step()
    that.setData({
      rotate3dA: animation.export()
    })
    clearInterval(that.data.setInt)
  },
  onHide: function(){
    var that = this
    i = 0
    //離開頁面時，使公告還原
    var animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'ease'
    })
    animation.rotate3d(1, 0, 0, 0).step()
    that.setData({
      rotate3dA: animation.export()
    })
    clearInterval(that.data.setInt)
  },
  onShow: function(){
    var that = this
    that.rotate3d()
  }