支付宝小程序中的一个红包展示的动画

工作中用到的一个红包展示动画，记录一下，动画真是需要反复测试，一帧一帧的看。

index.axml

<view class="box">
  <view class="ball {{ballShow}}"></view>
  <view class="pig"></view>
</view>
<view onTap="onStart">start</view>

index.acss

.box {
    width: 100vw;
    height: 1000rpx;
    background: #ccc;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
}

.pig {
    width: 300rpx;
    height: 300rpx;
    border-radius: 50%;
    background: #f00;
}

.ball {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background: #000;
    position: absolute;
    left: 200rpx;
    bottom: 100rpx;
    transform: scale(0);
    transform-origin: top center;
}

.ball-start {
    transform: scale(.3);
    left: 200rpx;
    bottom: 100rpx;
    transition: all .2s;
}

.ball-ing {
    left: 100rpx;
    bottom: 300rpx;
    animation: mymove .2s;
    transform: scale3d(1,1,1);
    transform-origin: center center;
}

.ball-end {
    transform: scale3d(1,1,1);
    left: 200rpx;
    bottom: 500rpx;
    transition: all 1.2s;
}

@keyframes mymove {
    0% {
        transform: scale3d(1,.85,1);
    }
    100% {
        transform: scale3d(1,1,1);
    }
}

index.js

const deplay = (time) => new Promise(resolve => setTimeout(resolve,time));
Page({
  onLoad(query){

  },
  async onStart(){
    this.setData({
      ballShow: 'ball-start'
    });
    await deplay(300);
    this.setData({
      ballShow: 'ball-ing'
    });
    await deplay(200);
    this.setData({
      ballShow: 'ball-end'
    });
  }
});

欢迎关注小程序，感谢您的支持！