先吐槽一下陪踩，微信官方雖然支持了Animation，但是對(duì)動(dòng)畫(huà)的控制卻做的不夠到位悉抵，比如動(dòng)畫(huà)開(kāi)始和結(jié)束的監(jiān)聽(tīng)肩狂，一直存在不生效的bug，久久未能解決姥饰。還有動(dòng)畫(huà)的過(guò)程也不能控制暫停和繼續(xù)傻谁。以下是我自己的解決方案，主要就是用了兩個(gè)動(dòng)畫(huà)列粪，一個(gè)是動(dòng)的审磁，一個(gè)是暫停的，暫停和繼續(xù)是通過(guò)兩個(gè)動(dòng)畫(huà)切換進(jìn)行的岂座。效果如下

效果圖：

kpp8l-fivcj.gif

掃碼動(dòng)畫(huà)暫停的時(shí)候态蒂，將掃描線設(shè)置在了中間位置，可以在代碼中自行調(diào)整

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">開(kāi)始掃描</view>
    <view class="input-button" bindtap="pauseScan">暫停掃描</view>
  </view>
</view>

js代碼：

Page({

  data: {
    //掃描線動(dòng)畫(huà)
    scanAnimation: null,
    //重復(fù)掃描的定時(shí)器
    scanInterval: null,
    //是否正在掃描中
    isScanning: false
  },

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

  },

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

  },

  /**
   * 開(kāi)始動(dòng)畫(huà)的時(shí)候费什，首先創(chuàng)建一個(gè)立馬執(zhí)行的掃描動(dòng)畫(huà)钾恢，再創(chuàng)建一個(gè)循環(huán)執(zhí)行掃描動(dòng)畫(huà)的定時(shí)器
   * 
   * 定時(shí)器設(shè)置比一套完整掃碼動(dòng)畫(huà)時(shí)間稍大，是為了應(yīng)對(duì)初始化的時(shí)候鸳址，動(dòng)畫(huà)執(zhí)行稍慢的情況
   */
  startScan() {
    if (this.data.isScanning) {
      return false
    } else {
      this.createScanAnimatiion()
      this.data.scanInterval = setInterval(() => {
        this.createScanAnimatiion()
      }, 6100)
    }
  },

  /**
   * 創(chuàng)建掃描動(dòng)畫(huà)
   */
  createScanAnimatiion() {
    var animation = wx.createAnimation({});
    animation.translateY(220).step({
      duration: 3000
    }).translateY(0).step({
      duration: 3000
    });
    this.setData({
      scanAnimation: animation.export(),
      isScanning: true
    })
  },

  /**
   * 創(chuàng)建暫停動(dòng)畫(huà)
   */
  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()
    }
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏
   */
  onHide() {
    if (this.data.scanInterval) {
      clearInterval(this.data.scanInterval);
      this.data.scanInterval = null;
    }
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載
   */
  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;
}