微信小程序 扫描框动画

先吐槽一下，微信官方虽然支持了Animation，但是对动画的控制却做的不够到位，比如动画开始和结束的监听，一直存在不生效的bug，久久未能解决。还有动画的过程也不能控制暂停和继续。以下是我自己的解决方案，主要就是用了两个动画，一个是动的，一个是暂停的，暂停和继续是通过两个动画切换进行的。效果如下

效果图：

kpp8l-fivcj.gif

扫码动画暂停的时候，将扫描线设置在了中间位置，可以在代码中自行调整

wxml代码：

<view>
  <view class="scan-container">
    <view class="scan-box" />
    <view class='scan-animation' animation="{{scanAnimation}}" />
  </view>
  <view class="footer-container">
    <view class="input-button" bindtap="startScan">开始扫描</view>
    <view class="input-button" bindtap="pauseScan">暂停扫描</view>
  </view>
</view>

js代码：

Page({

  data: {
    //扫描线动画
    scanAnimation: null,
    //重复扫描的定时器
    scanInterval: null,
    //是否正在扫描中
    isScanning: false
  },

  /**
   * Lifecycle function--Called when page load
   */
  onLoad() {

  },

  /**
   * Lifecycle function--Called when page show
   */
  onShow() {

  },

  /**
   * 开始动画的时候，首先创建一个立马执行的扫描动画，再创建一个循环执行扫描动画的定时器
   * 
   * 定时器设置比一套完整扫码动画时间稍大，是为了应对初始化的时候，动画执行稍慢的情况
   */
  startScan() {
    if (this.data.isScanning) {
      return false
    } else {
      this.createScanAnimatiion()
      this.data.scanInterval = setInterval(() => {
        this.createScanAnimatiion()
      }, 6100)
    }
  },

  /**
   * 创建扫描动画
   */
  createScanAnimatiion() {
    var animation = wx.createAnimation({});
    animation.translateY(220).step({
      duration: 3000
    }).translateY(0).step({
      duration: 3000
    });
    this.setData({
      scanAnimation: animation.export(),
      isScanning: true
    })
  },

  /**
   * 创建暂停动画
   */
  createPauseAnimation() {
    var pauseAnimation = wx.createAnimation({});
    pauseAnimation.translateY(100).step({
      duration: 0
    });
    this.setData({
      scanAnimation: pauseAnimation.export(),
      isScanning: false
    })
  },

  /**
   * 暂停扫描
   */
  pauseScan() {
    if (this.data.isScanning) {
      clearInterval(this.data.scanInterval)
      this.createPauseAnimation()
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    if (this.data.scanInterval) {
      clearInterval(this.data.scanInterval);
      this.data.scanInterval = null;
    }
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    if (this.data.scanInterval) {
      clearInterval(this.data.scanInterval);
      this.data.scanInterval = null;
    }
  },

})

wxss代码

page {
  width: 100%;
  height: 100%;
}

.scan-container {
  display: flex;
  justify-content: center;
  margin-top: 60rpx;
  width: 100%;
}

.scan-box {
  position: relative;
  width: 500rpx;
  height: 500rpx;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAApoAAAJwCAYAAAAp08EbAAAAAXNSR0IArs4c6QAAIABJREFUeF7t3VGOXcUVQNH7PAWCJaaAxAAa4p6W6RF0PK02pAeAlCkg2TAFPz5QpE7ygV6JXc7lrPxZ8j31atX52Ipi5fL4dHc9/OdWgY8P98+vb/3I3ydAgAABAgTOKfD4dPfhOI4vz/nrP9+vvgjNJXyhucTmIwIECBAgcE4Bobn2bkJzzU1orrn5igABAgQInFJAaK49m9BccxOaa26+IkCAAAECpxQQmmvPJjQX3C7H5de3b378ZuFTnxAgQIAAAQInFHj3/rufrsf1ixP+9M/6k4XmAr/QXEDzCQECBAgQOLGA0Fx7PKG54CY0F9B8QoAAAQIETiwgNNceT2guuAnNBTSfECBAgACBEwsIzbXHE5prbv4x0JqbrwgQIECAwCkF/GOgtWcTmmtuQnPNzVcECBAgQOCUAkJz7dmE5pqb0Fxz8xUBAgQIEDilgNBcezahueYmNNfcfEWAAAECBE4pIDTXnu3m0Hy4f76sHeUrAgQIECBAgACBMwvc+n9dLjTP/Np+OwECBAgQIEBgo4DQ3IjtKAIECBAgQIDAJAGhOem13ZUAAQIECBAgsFFAaG7EdhQBAgQIECBAYJKA0Jz02u5KgAABAgQIENgoIDQ3YjuKAAECBAgQIDBJQGhOem13JUCAAAECBAhsFBCaG7EdRYAAAQIECBCYJCA0J722uxIgQIAAAQIENgoIzY3YjiJAgAABAgQITBIQmpNe210JECBAgAABAhsFhOZGbEcRIECAAAECBCYJCM1Jr+2uBAgQIECAAIGNAkJzI7ajCBAgQIAAAQKTBITmpNd2VwIECBAgQIDARgGhuRHbUQQIECBAgACBSQJCc9JruysBAgQIECBAYKOA0NyI7SgCBAgQIECAwCQBoTnptd2VAAECBAgQILBRQGhuxHYUAQIECBAgQGCSgNCc9NruSoAAAQIECBDYKCA0N2I7igABAgQIECAwSUBoTnptdyVAgAABAgQIbBQQmhuxHUWAAAECBAgQmCQgNCe9trsSIECAAAECBDYKCM2N2I4iQIAAAQIECEwSEJqTXttdCRAgQIAAAQIbBYTmRmxHESBAgAABAgQmCQjNSa/trgQIECBAgACBjQJCcyO2owgQIECAAAECkwSE5qTXdlcCBAgQIECAwEYBobkR21EECBAgQIAAgUkCQnPSa7srAQIECBAgQGCjgNDciO0oAgQIECBAgMAkAaE56bXdlQABAgQIECCwUUBobsR2FAECBAgQIEBgkoDQnPTa7kqAAAECBAgQ2CggNDdiO4oAAQIECBAgMElAaE56bXclQIAAAQIECGwUEJobsR1FgAABAgQIEJgkIDQnvba7EiBAgAABAgQ2CgjNjdiOIkCAAAECBAhMEhCak17bXQkQIECAAAECGwWE5kZsRxEgQIAAAQIEJgkIzUmv7a4ECBAgQIAAgY0CQnMjtqMIECBAgAABApMEhOak13ZXAgQIECBAgMBGAaG5EdtRBAgQIECAAIFJAkJz0mu7KwECBAgQIEBgo4DQ3IjtKAIECBAgQIDAJAGhOem13ZUAAQIECBAgsFFAaG7EdhQBAgQIECBAYJKA0Jz02u5KgAABAgQIENgoIDQ3YjuKAAECBAgQIDBJQGhOem13JUCAAAECBAhsFBCaG7EdRYAAAQIECBCYJCA0J722uxIgQIAAAQIENgoIzY3YjiJAgAABAgQITBIQmpNe210JECBAgAABAhsFhOZGbEcRIECAAAECBCYJCM1Jr+2uBAgQIECAAIGNAkJzI7ajCBAgQIAAAQKTBITmpNd2VwIECBAgQIDARgGhuRHbUQQIECBAgACBSQIrofnhJdDluLx6+efrcf308s8P98+vJ4G6KwECBAgQIECAwO8Cj093N3Xj5b/hrtfrV/8RnpfLz3AJECBAgAABAgQI3NqNQtPOECBAgAABAgQILAn80X9BKTSXWH1EgAABAgQIECAgNO0AAQIECBAgQIBAIiA0E1ZDCRAgQIAAAQIEhKYdIECAAAECBAgQSASEZsJqKAECBAgQIECAgNC0AwQIECBAgAABAomA0ExYDSVAgAABAgQIEBCadoAAAQIECBAgQCAREJoJq6EECBAgQIAAAQJC0w4QIECAAAECBAgkAkIzYTWUAAECBAgQIEBAaNoBAgQIECBAgACBREBoJqyGEiBAgAABAgQICE07QIAAAQIECBAgkAgIzYTVUAIECBAgQIAAAaFpBwgQIECAAAECBBIBoZmwGkqAAAECBAgQICA07QABAgQIECBAgEAiIDQTVkMJECBAgAABAgSEph0gQIAAAQIECBBIBIRmwmooAQIECBAgQICA0LQDBAgQIECAAAECiYDQTFgNJUCAAAECBAgQEJp2gAABAgQIECBAIBEQmgmroQQIECBAgAABAkLTDhAgQIAAAQIECCQCQjNhNZQAAQIECBAgQEBo2gECBAgQIECAAIFEQGgmrIYSIECAAAECBAgITTtAgAABAgQIECCQCAjNhNVQAgQIECBAgAABoWkHCBAgQIAAAQIEEgGhmbAaSoAAAQIECBAgIDTtAAECBAgQIECAQCIgNBNWQwkQIECAAAECBISmHSBAgAABAgQIEEgEhGbCaigBAgQIECBAgIDQtAMECBAgQIAAAQKJgNBMWA0lQIAAAQIECBAQmnaAAAECBAgQIEAgERCaCauhBAgQIECAAAECQtMOECBAgAABAgQIJAJCM2E1lAABAgQIECBAQGjaAQIECBAgQIAAgURAaCashhIgQIAAAQIECAhNO0CAAAECBAgQIJAICM2E1VACBAgQIECAAAGhaQcIECBAgAABAgQSAaGZsBpKgAABAgQIECAgNO0AAQIECBAgQIBAIiA0E1ZDCRAgQIAAAQIEhKYdIECAAAECBAgQSASEZsJqKAECBAgQIECAgNC0AwQIECBAgAABAomA0ExYDSVAgAABAgQIEBCadoAAAQIECBAgQCAREJoJq6EECBAgQIAAAQJC0w4QIECAAAECBAgkAkIzYTWUAAECBAgQIEBAaNoBAgQIECBAgACBREBoJqyGEiBAgAABAgQICE07QIAAAQIECBAgkAgIzYTVUAIECBAgQIAAAaFpBwgQIECAAAECBBIBoZmwGkqAAAECBAgQICA07QABAgQIECBAgEAiIDQTVkMJECBAgAABAgSEph0gQIAAAQIECBBIBIRmwmooAQIECBAgQICA0LQDBAgQIECAAAECiYDQTFgNJUCAAAECBAgQEJp2gAABAgQIECBAIBEQmgmroQQIECBAgAABAkLTDhAgQIAAAQIECCQCQjNhNZQAAQIECBAgQEBo2gECBAgQIECAAIFEQGgmrIYSIECAAAECBAgITTtAgAABAgQIECCQCAjNhNVQAgQIECBAgAABoWkHCBAgQIAAAQIEEgGhmbAaSoAAAQIECBAgIDTtAAECBAgQIECAQCIgNBNWQwkQIECAAAECBISmHSBAgAABAgQIEEgEhGbCaigBAgQIECBAgIDQtAMECBAgQIAAAQKJgNBMWA0lQIAAAQIECBAQmnaAAAECBAgQIEAgERCaCauhBAgQIECAAAECQtMOECBAgAABAgQIJAJCM2E1lAABAgQIECBAQGjaAQIECBAgQIAAgURAaCashhIgQIAAAQIECAhNO0CAAAECBAgQIJAICM2E1VACBAgQIECAAAGhaQcIECBAgAABAgQSAaGZsBpKgAABAgQIECAgNO0AAQIECBAgQIBAIiA0E1ZDCRAgQIAAAQIEhKYdIECAAAECBAgQSASEZsJqKAECBAgQIECAgNC0AwQIECBAgAABAomA0ExYDSVAgAABAgQIEBCadoAAAQIECBAgQCAREJoJq6EECBAgQIAAAQJC0w4QIECAAAECBAgkAkIzYTWUAAECBAgQIEBAaNoBAgQIECBAgACBREBoJqyGEiBAgAABAgQICE07QIAAAQIECBAgkAgIzYTVUAIECBAgQIAAAaFpBwgQIECAAAECBBIBoZmwGkqAAAECBAgQICA07QABAgQIECBAgEAiIDQTVkMJECBAgAABAgSEph0gQIAAAQIECBBIBIRmwmooAQIECBAgQICA0LQDBAgQIECAAAECiYDQTFgNJUCAAAECBAgQEJp2gAABAgQIECBAIBEQmgmroQQIECBAgAABAkLTDhAgQIAAAQIECCQCQjNhNZQAAQIECBAgQEBo2gECBAgQIECAAIFEQGgmrIYSIECAAAECBAgITTtAgAABAgQIECCQCAjNhNVQAgQIECBAgAABoWkHCBAgQIAAAQIEEgGhmbAaSoAAAQIECBAgIDTtAAECBAgQIECAQCIgNBNWQwkQIECAAAECBISmHSBAgAABAgQIEEgEhGbCaigBAgQIECBAgIDQtAMECBAgQIAAAQKJgNBMWA0lQIAAAQIECBAQmnaAAAECBAgQIEAgERCaCauhBAgQIECAAAECQtMOECBAgAABAgQIJAJCM2E1lAABAgQIECBAQGjaAQIECBAgQIAAgURAaCashhIgQIAAAQIECAhNO0CAAAECBAgQIJAICM2E1VACBAgQIECAAAGhaQcIECBAgAABAgQSAaGZsBpKgAABAgQIECAgNO0AAQIECBAgQIBAIiA0E1ZDCRAgQIAAAQIEhKYdIECAAAECBAgQSASEZsJqKAECBAgQIECAgNC0AwQIECBAgAABAomA0ExYDSVAgAABAgQIEBCadoAAAQIECBAgQCAREJoJq6EECBAgQIAAAQJC0w4QIECAAAECBAgkAkIzYTWUAAECBAgQIEBAaNoBAgQIECBAgACBREBoJqyGEiBAgAABAgQICE07QIAAAQIECBAgkAgIzYTVUAIECBAgQIAAAaFpBwgQIECAAAECBBIBoZmwGkqAAAECBAgQICA07QABAgQIECBAgEAiIDQTVkMJECBAgAABAgSEph0gQIAAAQIECBBIBIRmwmooAQIECBAgQICA0LQDBAgQIECAAAECiYDQTFgNJUCAAAECBAgQEJp2gAABAgQIECBAIBEQmgmroQQIECBAgAABAkLTDhAgQIAAAQIECCQCQjNhNZQAAQIECBAgQEBo2gECBAgQIECAAIFEQGgmrIYSIECAAAECBAgITTtAgAABAgQIECCQCAjNhNVQAgQIECBAgAABoWkHCBAgQIAAAQIEEgGhmbAaSoAAAQIECBAgIDTtAAECBAgQIECAQCIgNBNWQwkQIECAAAECBISmHSBAgAABAgQIEEgEhGbCaigBAgQIECBAgIDQtAMECBAgQIAAAQKJgNBMWA0lQIAAAQIECBAQmnaAAAECBAgQIEAgERCaCauhBAgQIECAAAECQtMOECBAgAABAgQIJAJCM2E1lAABAgQIECBAQGjaAQIECBAgQIAAgURAaCashhIgQIAAAQIECAhNO0CAAAECBAgQIJAICM2E1VACBAgQIECAAAGhaQcIECBAgAABAgQSAaGZsBpKgAABAgQIECAgNO0AAQIECBAgQIBAIiA0E1ZDCRAgQIAAAQIEhKYdIECAAAECBAgQSASEZsJqKAECBAgQIECAgNC0AwQIECBAgAABAomA0ExYDSVAgAABAgQIEBCadoAAAQIECBAgQCAREJoJq6EECBAgQIAAAQJC0w4QIECAAAECBAgkAkIzYTWUAAECBAgQIEBAaNoBAgQIECBAgACBREBoJqyGEiBAgAABAgQICE07QIAAAQIECBAgkAgIzYTVUAIECBAgQIAAAaFpBwgQIECAAAECBBIBoZmwGkqAAAECBAgQICA07QABAgQIECBAgEAiIDQTVkMJECBAgAABAgSEph0gQIAAAQIECBBIBIRmwmooAQIECBAgQICA0LQDBAgQIECAAAECiYDQTFgNJUCAAAECBAgQEJp2gAABAgQIECBAIBEQmgmroQQIECBAgAABAkLTDhAgQIAAAQIECCQCQjNhNZQAAQIECBAgQEBo2gECBAgQIECAAIFEQGgmrIYSIECAAAECBAgITTtAgAABAgQIECCQCAjNhNVQAgQIECBAgAABoWkHCBAgQIAAAQIEEgGhmbAaSoAAAQIECBAgIDTtAAECBAgQIECAQCIgNBNWQwkQIECAAAECBISmHSBAgAABAgQIEEgEhGbCaigBAgQIECBAgIDQtAMECBAgQIAAAQKJgNBMWA0lQIAAAQIECBAQmnaAAAECBAgQIEAgERCaCauhBAgQIECAAAECQtMOECBAgAABAgQIJAJCM2E1lAABAgQIECBAQGjaAQIECBAgQIAAgURAaCashhIgQIAAAQIECAhNO0CAAAECBAgQIJAICM2E1VACBAgQIECAAAGhaQcIECBAgAABAgQSAaGZsBpKgAABAgQIECAgNO0AAQIECBAgQIBAIiA0E1ZDCRAgQIAAAQIEhKYdIECAAAECBAgQSASEZsJqKAECBAgQIECAgNC0AwQIECBAgAABAomA0ExYDSVAgAABAgQIEBCadoAAAQIECBAgQCAREJoJq6EECBAgQIAAAQJC0w4QIECAAAECBAgkAkIzYTWUAAECBAgQIEBAaNoBAgQIECBAgACBREBoJqyGEiBAgAABAgQICE07QIAAAQIECBAgkAgIzYTVUAIECBAgQIAAAaFpBwgQIECAAAECBBIBoZmwGkqAAAECBAgQICA07QABAgQIECBAgEAiIDQTVkMJECBAgAABAgSEph0gQIAAAQIECBBIBIRmwmooAQIECBAgQICA0LQDBAgQIECAAAECiYDQTFgNJUCAAAECBAgQEJp2gAABAgQIECBAIBEQmgmroQQIECBAgAABAkLTDhAgQIAAAQIECCQCQjNhNZQAAQIECBAgQEBo2gECBAgQIECAAIFEQGgmrIYSIECAAAECBAgITTtAgAABAgQIECCQCAjNhNVQAgQIECBAgAABoWkHCBAgQIAAAQIEEgGhmbAaSoAAAQIECBAgIDTtAAECBAgQIECAQCIgNBNWQwkQIECAAAECBISmHSBAgAABAgQIEEgEhGbCaigBAgQIECBAgIDQtAMECBAgQIAAAQKJgNBMWA0lQIAAAQIECBAQmnaAAAECBAgQIEAgERCaCauhBAgQIECAAAECQtMOECBAgAABAgQIJAJCM2E1lAABAgQIECBAQGjaAQIECBAgQIAAgURAaCashhIgQIAAAQIECAhNO0CAAAECBAgQIJAICM2E1VACBAgQIECAAAGhaQcIECBAgAABAgQSAaGZsBpKgAABAgQIECAgNO0AAQIECBAgQIBAIiA0E1ZDCRAgQIAAAQIEhKYdIECAAAECBAgQSASEZsJqKAECBAgQIECAgNC0AwQIECBAgAABAomA0ExYDSVAgAABAgQIEBCadoAAAQIECBAgQCAREJoJq6EECBAgQIAAAQJC0w4QIECAAAECBAgkAkIzYTWUAAECBAgQIEBAaNoBAgQIECBAgACBREBoJqyGEiBAgAABAgQICE07QIAAAQIECBAgkAgIzYTVUAIECBAgQIAAAaFpBwgQIECAAAECBBIBoZmwGkqAAAECBAgQICA07QABAgQIECBAgEAiIDQTVkMJECBAgAABAgSEph0gQIAAAQIECBBIBIRmwmooAQIECBAgQICA0LQDBAgQIECAAAECiYDQTFgNJUCAAAECBAgQEJp2gAABAgQIECBAIBEQmgmroQQIECBAgAABAkLTDhAgQIAAAQIECCQCQjNhNZQAAQIECBAgQEBo2gECBAgQIECAAIFEQGgmrIYSIECAAAECBAgITTtAgAABAgQIECCQCAjNhNVQAgQIECBAgAABoWkHCBAgQIAAAQIEEgGhmbAaSoAAAQIECBAgIDTtAAECBAgQIECAQCIgNBNWQwkQIECAAAECBISmHSBAgAABAgQIEEgEhGbCaigBAgQIECBAgIDQtAMECBAgQIAAAQKJgNBMWA0lQIAAAQIECBAQmnaAAAECBAgQIEAgERCaCauhBAgQIECAAAECQtMOECBAgAABAgQIJAJCM2E1lAABAgQIECBAQGjaAQIECBAgQIAAgURAaCashhIgQIAAAQIECAhNO0CAAAECBAgQIJAICM2E1VACBAgQIECAAAGhaQcIECBAgAABAgQSAaGZsBpKgAABAgQIECAgNO0AAQIECBAgQIBAIiA0E1ZDCRAgQIAAAQIEhKYdIECAAAECBAgQSASEZsJqKAECBAgQIECAgNC0AwQIECBAgAABAomA0ExYDSVAgAABAgQIEBCadoAAAQIECBAgQCAREJoJq6EECBAgQIAAAQJC0w4QIECAAAECBAgkAkIzYTWUAAECBAgQIEBAaNoBAgQIECBAgACBREBoJqyGEiBAgAABAgQICE07QIAAAQIECBAgkAgIzYTVUAIECBAgQIAAAaFpBwgQIECAAAECBBIBoZmwGkqAAAECBAgQICA07QABAgQIECBAgEAiIDQTVkMJECBAgAABAgSEph0gQIAAAQIECBBIBIRmwmooAQIECBAgQICA0LQDBAgQIECAAAECiYDQTFgNJUCAAAECBAgQEJp2gAABAgQIECBAIBEQmgmroQQIECBAgAABAkLTDhAgQIAAAQIECCQCQjNhNZQAAQIECBAgQEBo2gECBAgQIECAAIFEQGgmrIYSIECAAAECBAgITTtAgAABAgQIECCQCAjNhNVQAgQIECBAgAABoWkHCBAgQIAAAQIEEgGhmbAaSoAAAQIECBAgIDTtAAECBAgQIECAQCIgNBNWQwkQIECAAAECBISmHSBAgAABAgQIEEgEhGbCaigBAgQIECBAgIDQtAMECBAgQIAAAQKJgNBMWA0lQIAAAQIECBAQmnaAAAECBAgQIEAgERCaCauhBAgQIECAAAECQtMOECBAgAABAgQIJAJCM2E1lAABAgQIECBAQGjaAQIECBAgQIAAgURAaCashhIgQIAAAQIECAhNO0CAAAECBAgQIJAICM2E1VACBAgQIECAAAGhaQcIECBAgAABAgQSAaGZsBpKgAABAgQIECAgNO0AAQIECBAgQIBAIiA0E1ZDCRAgQIAAAQIEhKYdIECAAAECBAgQSASEZsJqKAECBAgQIECAgNC0AwQIECBAgAABAomA0ExYDSVAgAABAgQIEBCadoAAAQIECBAgQCAREJoJq6EECBAgQIAAAQJC0w4QIECAAAECBAgkAkIzYTWUAAECBAgQIEBAaNoBAgQIECBAgACBREBoJqyGEiBAgAABAgQICE07QIAAAQIECBAgkAgIzYTVUAIECBAgQIAAAaFpBwgQIECAAAECBBIBoZmwGkqAAAECBAgQICA07QABAgQIECBAgEAiIDQTVkMJECBAgAABAgSEph0gQIAAAQIECBBIBIRmwmooAQIECBAgQICA0LQDBAgQIECAAAECiYDQTFgNJUCAAAECBAgQEJp2gAABAgQIECBAIBEQmgmroQQIECBAgAABAkLTDhAgQIAAAQIECCQCQjNhNZQAAQIECBAgQEBo2gECBAgQIECAAIFEQGgmrIYSIECAAAECBAgITTtAgAABAgQIECCQCAjNhNVQAgQIECBAgAABoWkHCBAgQIAAAQIEEgGhmbAaSoAAAQIECBAgIDTtAAECBAgQIECAQCIgNBNWQwkQIECAAAECBISmHSBAgAABAgQIEEgEhGbCaigBAgQIECBAgIDQtAMECBAgQIAAAQKJgNBMWA0lQIAAAQIECBAQmnaAAAECBAgQIEAgERCaCauhBAgQIECAAAECQtMOECBAgAABAgQIJAJCM2E1lAABAgQIECBAQGjaAQIECBAgQIAAgURAaCashhIgQIAAAQIECAhNO0CAAAECBAgQIJAICM2E1VACBAgQIECAAAGhaQcIECBAgAABAgQSAaGZsBpKgAABAgQIECAgNO0AAQIECBAgQIBAIiA0E1ZDCRAgQIAAAQIEhKYdIECAAAECBAgQSASEZsJqKAECBAgQIECAgNC0AwQIECBAgAABAomA0ExYDSVAgAABAgQIEBCadoAAAQIECBAgQCAREJoJq6EECBAgQIAAAQJC0w4QIECAAAECBAgkAkIzYTWUAAECBAgQIEBAaNoBAgQIECBAgACBREBoJqyGEiBAgAABAgQICE07QIAAAQIECBAgkAgIzYTVUAIECBAgQIAAAaFpBwgQIECAAAECBBIBoZmwGkqAAAECBAgQICA07QABAgQIECBAgEAiIDQTVkMJECBAgAABAgSEph0gQIAAAQIECBBIBIRmwmooAQIECBAgQICA0LQDBAgQIECAAAECiYDQTFgNJUCAAAECBAgQEJp2gAABAgQIECBAIBEQmgmroQQIECBAgAABAkLTDhAgQIAAAQIECCQCQjNhNZQAAQIECBAgQEBo2gECBAgQIECAAIFEQGgmrIYSIECAAAECBAgITTtAgAABAgQIECCQCAjNhNVQAgQIECBAgAABoWkHCBAgQIAAAQIEEgGhmbAaSoAAAQIECBAgIDTtAAECBAgQIECAQCLwh6H5+HT34eXJl+Py6uWfr8f108s/P9w/v05+qaEECBAgQIAAAQL/1wK3duPl8enuesuNHu6fL7f8fX+XAAECBAgQIEDgryFwazcKzb/Gu7sFAQIECBAgQCAXEJo5sQMIECBAgAABAjMFhObMd3drAgQIECBAgEAuIDRzYgcQIECAAAECBGYKCM2Z7+7WBAgQIECAAIFcQGjmxA4gQIAAAQIECMwUEJoz392tCRAgQIAAAQK5gNDMiR1AgAABAgQIEJgpIDRnvrtbEyBAgAABAgRyAaGZEzuAAAECBAgQIDBTQGjOfHe3JkCAAAECBAjkAkIzJ3YAAQIECBAgQGCmgNCc+e5uTYAAAQIECBDIBYRmTuwAAgQIECBAgMBMAaE5893dmgABAgQ92xmtAAAENElEQVQIECCQCwjNnNgBBAgQIECAAIGZAkJz5ru7NQECBAgQIEAgFxCaObEDCBAgQIAAAQIzBYTmzHd3awIECBAgQIBALiA0c2IHECBAgAABAgRmCgjNme/u1gQIECBAgACBXEBo5sQOIECAAAECBAjMFBCaM9/drQkQIECAAAECuYDQzIkdQIAAAQIECBCYKSA0Z767WxMgQIAAAQIEcgGhmRM7gAABAgQIECAwU0Boznx3tyZAgAABAgQI5AJCMyd2AAECBAgQIEBgpoDQnPnubk2AAAECBAgQyAWEZk7sAAIECBAgQIDATAGhOfPd3ZoAAQIECBAgkAsIzZzYAQQIECBAgACBmQJCc+a7uzUBAgQIECBAIBcQmjmxAwgQIECAAAECMwWE5sx3d2sCBAgQIECAQC4gNHNiBxAgQIAAAQIEZgoIzZnv7tYECBAgQIAAgVxAaObEDiBAgAABAgQIzBQQmjPf3a0JECBAgAABArmA0MyJHUCAAAECBAgQmCkgNGe+u1sTIECAAAECBHIBoZkTO4AAAQIECBAgMFNAaM58d7cmQIAAAQIECOQCQjMndgABAgQIECBAYKaA0Jz57m5NgAABAgQIEMgFhGZO7AACBAgQIECAwEwBoTnz3d2aAAECBAgQIJALCM2c2AEECBAgQIAAgZkCQnPmu7s1AQIECBAgQCAXEJo5sQMIECBAgAABAjMFhObMd3drAgQIECBAgEAuIDRzYgcQIECAAAECBGYKCM2Z7+7WBAgQIECAAIFcQGjmxA4gQIAAAQIECMwUEJoz392tCRAgQIAAAQK5gNDMiR1AgAABAgQIEJgpIDRnvrtbEyBAgAABAgRyAaGZEzuAAAECBAgQIDBTQGjOfHe3JkCAAAECBAjkAkIzJ3YAAQIECBAgQGCmgNCc+e5uTYAAAQIECBDIBYRmTuwAAgQIECBAgMBMAaE5893dmgABAgQIECCQCwjNnNgBBAgQIECAAIGZAnlozmT9n1t/fLh/fs2CAAECBAgQmCHw+HT34TiOL2fc9s+75eXWMv3zjj71JKF56ufz4wkQIECAwG0CQvM2r3//baG55iY019x8RYAAAQIETikgNNeeTWiuuQnNNTdfESBAgACBUwoIzbVnE5prbh+/f/PPr9Y+9RUBAgQIECBwNoF/vP/2Z/8bzdtfTWjebnZcjsuvb9/8+M3Cpz4hQIAAAQIETijw7v13P12P6xcn/Omf9ScLzQV+obmA5hMCBAgQIHBiAaG59nhCc8FNaC6g+YQAAQIECJxYQGiuPZ7QXHC7HK9+efvmh68XPvUJAQIECBAgcEKBd+///q/r8elvJ/zpn/UnC801fv/qfM3NVwQIECBA4JQC/tX52rMJzTU3obnm5isCBAgQIHBKAaG59mxCc81NaK65+YoAAQIECJxSQGiuPdtv1TvN8XqCp7IAAAAASUVORK5CYII=);
  background-size: 100% 100%;
}

.scan-animation {
  position: absolute;
  margin-top: 10rpx;
  width: 400rpx;
  height: 6rpx;
  background-color: green;
  border-radius: 50%;
}

.footer-container {
  display: flex;
  justify-content: center;
  padding: 80rpx 30rpx 40rpx 30rpx;
}

.input-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180rpx;
  height: 64rpx;
  border-radius: 54rpx;
  color: #eee;
  font-size: 32rpx;
  margin: 20rpx;
  background-color: #333333;
}