Kaynağa Gözat

更新素材,顺势更新第五步的工具动画

任一存 1 yıl önce
ebeveyn
işleme
4a93835e7d

+ 1 - 1
package.json

@@ -1,6 +1,6 @@
 {
   "name": "my-app",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve --mode dev",

BIN
src/assets/images/step-2-init.png


BIN
src/assets/images/step-3-init.png


BIN
src/assets/images/step-4-init.png


BIN
src/assets/images/step-6-init.png


BIN
src/assets/videos/step-1.mp4


BIN
src/assets/videos/step-2.mp4


BIN
src/assets/videos/step-3.mp4


BIN
src/assets/videos/step-4-3.mp4


BIN
src/assets/videos/step-5.mp4


+ 117 - 17
src/views/StepView5.vue

@@ -104,34 +104,134 @@ watch(workState, (vNew) => {
     transform: translate(-30%, -65%);
     width: calc(85 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     animation-name: tool-move;
-    animation-delay: 0.7s;
-    animation-duration: 1.3s;
+    animation-delay: 0.5s;
+    animation-duration: 4s;
     animation-timing-function: linear;
     animation-fill-mode: forwards;
-    left: 90%;
-    top: 10%;
+    left: 15%;
+    top: 15%;
   }
 }
 @keyframes tool-move {
-  20% {
-    left: 10%;
-    top: 30%;
+  6% {
+    left: 85%;
+    top: 15%;
   }
-  40% {
-    left: 90%;
+  6.1% {
+    left: 15%;
+    top: 32.5%;
+  }
+  12% {
+    left: 85%;
+    top: 32.5%;
+  }
+  12.1% {
+    left: 15%;
+    top: 50%;
+  }
+  18% {
+    left: 85%;
+    top: 50%;
+  }
+  18.1% {
+    left: 15%;
+    top: 67.5%;
+  }
+  24% {
+    left: 85%;
+    top: 67.5%;
+  }
+  24.1% {
+    left: 15%;
+    top: 85%;
+  }
+  30% {
+    left: 85%;
+    top: 85%;
+  }
+  30.1% {
+    left: 15%;
+    top: 15%;
+  }
+  36% {
+    left: 85%;
+    top: 15%;
+  }
+  36.1% {
+    left: 15%;
+    top: 32.5%;
+  }
+  42% {
+    left: 85%;
+    top: 32.5%;
+  }
+  42.1% {
+    left: 15%;
+    top: 50%;
+  }
+  48% {
+    left: 85%;
     top: 50%;
   }
-  60% {
-    left: 10%;
-    top: 70%;
+  48.1% {
+    left: 15%;
+    top: 67.5%;
+  }
+  54%{
+    left: 85%;
+    top: 67.5%;
+  }
+  54.1% {
+    left: 15%;
+    top: 85%;
+  }
+  60%{
+    left: 85%;
+    top: 85%;
+  }
+  60.1% {
+    left: 15%;
+    top: 15%;
+  }
+  66% {
+    left: 85%;
+    top: 15%;
+  }
+  66.1% {
+    left: 15%;
+    top: 32.5%;
+  }
+  72% {
+    left: 85%;
+    top: 32.5%;
+  }
+  72.1% {
+    left: 15%;
+    top: 50%;
+  }
+  78% {
+    left: 85%;
+    top: 50%;
+  }
+  78.1% {
+    left: 15%;
+    top: 67.5%;
+  }
+  84%{
+    left: 85%;
+    top: 67.5%;
+  }
+  84.1% {
+    left: 15%;
+    top: 85%;
   }
-  80% {
-    left: 90%;
-    top: 80%;
+  90%{
+    left: 85%;
+    top: 85%;
   }
   100% {
-    left: 10%;
-    top: 80%;
+    left: 85%;
+    top: 85%;
   }
 }
 </style>