2021-09-24 微信小程序 翻牌动画

效果

结构

 <view class='main' style='display:{{cardDisplay}}' bindtap="closeCardDisplayFuc">
        <view class="" wx:if="{{showImg}}">
            <!-- 正面的框 -->
            <view class="box b1" animation="{{animationMain}}" data-id="1">
                <image src="{{src1}}"></image>
            </view>
            <!-- 背面的框 -->
            <view class="box b2" animation="{{animationBack}}" data-id="2">
                <image src="{{src2}}"></image>
            </view>
            <view class="close" bindtap="closeCardDisplayFuc"></view>
        </view>
    </view>

样式

 //   抽卡  动画
    .main {
        display: none;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 1001;

        /* transform: translate(-50%,-50%); */
        /* //子元素获得透视效果  */
        -webkit-perspective: 1500;
        -moz-perspective: 1500;
    }

    .box {
        position: absolute;
        top: 174rpx;
        left: 0rpx;
        width: 750rpx;
        height: 985rpx;
        transition: all 1s;
        backface-visibility: hidden;
        // border-radius: 10px;
        cursor: pointer;
        z-index: 10002;
    }

    .box image {
        // border-radius: 10px;
        width: 100%;
        height: 100%;
    }

    .b1 {
        /* background:skyblue; */
        opacity: 0.9;   
        transform: scale(0, 0);  //默认隐藏
    }


    .b2 {
        /* background:tomato; */
        transform: rotateY(-180deg);
    }

动画

  /**
* 卡片翻转
*/
  rotateFn: async function (e) {
          this.setData({
        animationMain: null,
        animationBack: null,
        showImg: false
      })
       setTimeout(function () {
            that.setData({
              cardDisplay: "block",
              showImg: true,
              src1: 'https://static.sprucesmart.com/cardCollecting/bac.png ',
         src2:'https://static.sprucesmart.com/cardCollecting/card_huan.png',
            })
            setTimeout(() => {
              var id = e.currentTarget.dataset.id
              that.animation_main = wx.createAnimation({
                duration: 600,
                timingFunction: 'linear',
              })
              that.animation_back = wx.createAnimation({
                duration: 600,
                timingFunction: 'linear',
                delay: 600
              })
              //背面图展示  并旋转180度
              that.animation_main.scale(1, 1).step().rotateY(180).step()
              //正面图旋转展示
              that.animation_back.rotateY(0).step()
              that.setData({
                animationMain: that.animation_main.export(),
                animationBack: that.animation_back.export(),
              })
            }, 500);
          }, 800);
     },