21.微信小程序之动画animation

灰太狼 2022-03-25 09:36 216阅读 0赞

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

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

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

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

# 一.效果图 #

1.![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70][]

2.![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 1][]

# 二、代码 #

**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][https_blog.csdn.net_qq_20100573_article_details_79010180]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70]: /images/20220325/50fb2d4bf39a4922a4c4c73dcb27e289.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbnppbmE_size_16_color_FFFFFF_t_70 1]: /images/20220325/9f97deed034848499f294fe349453547.png
[https_blog.csdn.net_qq_20100573_article_details_79010180]: https://blog.csdn.net/qq_20100573/article/details/79010180