从学校回来后，已经连上了9天的班。。

白天写代码，晚上回家大佬组织在线测试。。。

从双休→单休→不休 [○･｀Д´･ ○]

好了，说说动画吧。实现一个动画效果以开红包为效果。点击旋转着出现，再点旋转着消失

一.效果图

1.

2.

二、代码

1.redPackte.wxml

<button bindtap='takeReaPacket' class="btn">抢红包</button>

<view  wx:if="{{isShow}}" class='mask'>
  <view animation="{{animationData}}" class='redPacket'>
    <view class='desc'>
      <image src='{{manIcon}}'></image>
      <text class='desc-name'>盘子呐</text>
      <text class='desc-tip'>给你发了一个红包</text>
    </view>
    <view class='btn-ok'>
      <image src='{{openIcon}}'></image>
    </view>
    <view bindtap='close' class='btn-close'>
      <image src='{{close}}'></image>
    </view>
  </view>
</view>

2.redPackte.wxss

.btn{
  background: #fe6c0b;
  width: 80%;
  color: #fff;
  margin-top: 300rpx;
  border-radius: 50rpx;
}
.mask{
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
}
.redPacket{
  background-image:url(https://manager.diandianxc.com/index/redPacket.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 80%;
  height: 900rpx;
  position: fixed;
  top:10%;
  left:10%;
  z-index: 110;
}
.desc{
  display: flex;
  align-content: center;
  align-items: center;
  flex-direction: column;
  color: #ecdc87;
  height: 610rpx;

}
.desc image{
  width: 120rpx;
  height: 120rpx;
  margin-top: 50rpx;
  border-radius: 20rpx;
}
.desc-name{
  font-size: 50rpx;
  margin: 50rpx 0;
}
.btn-ok{
  width: 150rpx;
  height: 150rpx;
  margin: 0 auto;
  border-radius: 50%;
}
.btn-ok image{
  width: 100%;
  height: 100%;
}
.btn-close image{
  width: 90rpx;
  height: 90rpx;
  position: absolute;
  left: 42%;
  bottom:-125rpx;
}

3.redPackte.js

Page({

  data: {
    openIcon:'https://manager.diandianxc.com/index/open.png',
    manIcon:'https://manager.diandianxc.com/crue.jpg',
    close:'https://manager.diandianxc.com/index/close.png',
    isShow:false,
    animationData:{}
  },

  takeReaPacket(e){
    this.util('open');
  },

  util(currentStatu){
    //第1步：创建动画实例
    var animation = wx.createAnimation({
      transformOrigin: "50% 50%",
      duration: 200,
      timingFunction: 'linear',
      delay: 0
    });

    //第2步：这个动画的实例赋值给当前的动画实例
    this.animation = animation;

    //第3步：执行第一组动画
    animation.opacity(0).rotateX(-100).step();

    //第4步：导出动画对象赋给数据对象存储
    this.setData({
      animationData: animation.export()
    })

    //第5步：设置定时器到指定时候，执行第二组动画
    setTimeout(function () {
      //执行第二组动画
      animation.opacity(1).rotateX(0).step();
      //给数据对象存储的第一组动画，更替为执行完第二组动画的动画对象
      this.setData({
        animationData: animation
      })

      //关闭
      if(currentStatu == 'close'){
        this.setData({
          isShow:false
        })
      }
    }.bind(this),200);

    //显示
    if (currentStatu=='open'){
      this.setData({
        isShow:true
      })
    }
  },

  close(e){
    this.util('close');
  },
})

最后放个链接动画集合：

https://blog.csdn.net/qq_20100573/article/details/79010180