dos

Public/static/js/common.js

@@ -227,8 +227,8 @@ let stars = [],
     target = {
         'startX': 500,
         'startY': 500,
-        'endX': 100,
-        'endY': 100
+        'endX': pxToRem(138),
+        'endY': pxToRem(294)
     },
 
     nowX = target.startX,
@@ -355,6 +355,14 @@ function initPage() {
         let height = 61.9 + ((displacement + 10) / fontSize);
         $('.wrap-inner,.page,.bg,.personal-wrap').css('height', height + 'rem');
     }
+    calculationStep(target.startX, target.endX, target.startY, target.endY);
+    (function drawFrame() {
+        window.requestAnimationFrame(drawFrame, starCanvas);
+        ctx.fillStyle = 'rgba(255, 255, 255, 0)';
+        ctx.clearRect(0, 0, starCanvas.width, starCanvas.height);
+        animateRect(square, target);
+        moveStars();
+    }());
 }
 
 function showPage1() {
@@ -773,12 +781,17 @@ function addCustomizeFlag() {
     $('input[name=customize-flag]').val('');
 }
 
-function addFlag() {
+function addFlag(e) {
     if (firstChooseFlag) {
         $('.checked-flag-list').css('transform', 'scale(1)');
         checkFlagListStatus = true;
         firstChooseFlag = false;
     }
+    const touch = e.originalEvent.targetTouches[0];
+    target.startX = touch.pageX;
+    target.startY = touch.pageY;
+    calculationStep(target.startX, target.endX, target.startY, target.endY);
+
     $('.flag-choose-tip').removeClass('active');
     let text = $(this).find('.flag-text').text();
     flagStack.push(text);
@@ -800,15 +813,7 @@ function addFlagToList(text) {
 function showFlagPage() {
     if (page1Next) {
         page1Next = false;
-        calculationStep(target.startX, target.endX, target.startY, target.endY);
-        (function drawFrame() {
-
-            window.requestAnimationFrame(drawFrame, starCanvas);
-            ctx.fillStyle = 'rgba(255, 255, 255, 0)';
-            ctx.clearRect(0, 0, starCanvas.width, starCanvas.height);
-            animateRect(square, target);
-            moveStars();
-        }());
+
         $('.red-line').addClass('animate');
         setTimeout(function () {
             // $('.red-line').removeClass('animate');
@@ -1120,6 +1125,10 @@ function Square(x, y) {
 }
 
 function calculationStep(startX, endX, startY, endY) {
+    nowX = startX;
+    nowY = startY;
+    stepX = step;
+    stepY = step;
     differenceX = Math.abs(endX - startX);
     differenceY = Math.abs(endY - startY);
     var max = Math.max(differenceX, differenceY);