scanner: Update qr arc animation before qr is found

Also update the hint text.

scanner/app.wxss

@@ -17,3 +17,7 @@ page {
     font-size: 1rem;
     padding: 0.6rem;
 }
+
+.hidden {
+    display: none;
+}

scanner/pages/camera/camera.js

@@ -25,7 +25,7 @@ Page({
    * Page initial data
    */
   data: {
-    hint_text: '对齐定位点',
+    hint_text: '查找二维码',
     enable_debug: false,
     debug_countdown: 10,
     camera_flash: "off",
@@ -46,6 +46,8 @@ Page({
     frame_uploaded: 0,
     last_frame_upload_time: 0,
     frame_upload_seq_num: 0,
+    qrarc_class: "sm",
+    qrmarkers_class: "hidden",
   },
 
   make_hint_text(r) {
@@ -67,8 +69,9 @@ Page({
       } else if (err.includes("energy check failed") || err.includes("cannot detect angle")) {
         return "移近一点";
       }
+      return "对齐定位点";
     }
-    return "对齐定位点";
+    return "查找二维码";
   },
 
   log(...what) {
@@ -336,6 +339,8 @@ Page({
         ctx.setZoom({ zoom: rule.zoom });
         this.setData({
           zoom: rule.zoom,
+          qrmarkers_class: "",
+          qrarc_class: "lg"
         });
       }
       if (!this.listener) {

scanner/pages/camera/camera.wxml

@@ -6,13 +6,13 @@
         </image>
         <image class="gray" src="/static/black.png" class="gray"></image>
     </view>
-    <view class="qrarc">
+    <view class="qrarc {{ qrarc_class }}">
         <image class="topleft arc" src="/static/arc.png"></image>
         <image class="topright arc" src="/static/arc.png"></image>
         <image class="bottomleft arc" src="/static/arc.png"></image>
         <image class="bottomright arc" src="/static/arc.png"></image>
     </view>
-    <view class="qrmarkers">
+    <view class="qrmarkers {{ qrmarkers_class }}">
         <image class="square" src="/static/qrmarkers.png">
         </image>
     </view>

scanner/pages/camera/camera.wxss

@@ -233,7 +233,16 @@ view.brighter view.text {
     width: 80rpx;
 }
 
-view.qrarc {
+
+view.qrarc.sm {
+    width: 350rpx;
+    height: 350rpx;
+    margin: 360rpx 200rpx;
+    position: absolute;
+    animation: qrarc-anime 1.2s ease-in-out infinite;
+}
+
+view.qrarc.lg {
     width: 550rpx;
     height: 550rpx;
     margin: 260rpx 100rpx;