测试路径动画功能

hookehuyr
Commit 62c2e8aa944e3aab6e3b5d0d2ea2ded310af38fa 62c2e8aa 1 parent 8f2cab0a
Showing 4 changed files with 102 additions and 21 deletions
src/components/Floor/floor.css
src/components/Floor/index.vue
src/components/Floor/pin.js
src/views/inner.vue
--- a/src/components/Floor/floor.css
View file @62c2e8a
+++ b/src/components/Floor/floor.css
View file @62c2e8a
@@ -369,17 +369,24 @@ button:focus {
 @media (max-width: 767px) {
   /* 在窗口宽度小于等于767px时应用的样式 */
   .level.level--current {
-	-webkit-transform: translateZ(0rem) rotate3d(0,0,1,20deg);
+		-webkit-transform: translateZ(3rem) rotate3d(0,0,1,20deg);
-	/* go to center */
+		/* go to center */
-	transform: translateZ(0rem) rotate3d(0,0,1,20deg);
+		transform: translateZ(3rem) rotate3d(0,0,1,20deg);
-}
+	}
+	.mall--content-open .level.level--current {
+		-webkit-transform: translateZ(-3rem) rotate3d(0,0,1,20deg);
+		/* go to center */
+		transform: translateZ(-3rem) rotate3d(0,0,1,20deg);
+	}
 }
 /* Navigation classes */
 .levels--open .level,
 .levels--open .level::after {
-	-webkit-transition: -webkit-transform 1s, opacity 1s;
+	/* -webkit-transition: -webkit-transform 1s, opacity 1s;
-	transition: transform 1s, opacity 1s;
+	transition: transform 1s, opacity 1s; */
+	-webkit-transition: -webkit-transform 0.45s, opacity 0.45s;
+	transition: transform 0.45s, opacity 0.45s;
 	-webkit-transition-delay: 0s;
 	transition-delay: 0s;
 }
--- a/src/components/Floor/index.vue
View file @62c2e8a
+++ b/src/components/Floor/index.vue
View file @62c2e8a
 <!--
  * @Date: 2023-07-27 11:04:04
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-07 18:13:15
+ * @LastEditTime: 2023-08-10 17:13:50
  * @FilePath: /map-demo/src/components/Floor/index.vue
  * @Description: 文件描述
 -->
@@ -24,7 +24,7 @@
 							<van-icon name="arrow-up" size="1.25rem" />
 						</span>
 					</div>
-					<div v-if="level_show" class="close-level icon" @click.native="onCloseLevel">
+					<div v-if="level_show" class="close-level icon" @click.native="onCloseLevelAll">
 						<span>
 							<van-icon name="points" size="1.25rem" />
 						</span>
@@ -40,9 +40,9 @@
             <img class="surroundings__map" src="./surroundings.svg" alt="Surroundings" />
           </div> -->
 					<div class="levels">
-						<div v-for="(level, index) in level_list" :key="index" @click.capture="onFloorClick(index + 1)"
+						<div v-for="(level, index) in level_list" :key="index" @click.capture="onFloorClick(index + 1, $event)"
 							:class="['level', 'level--' + (index + 1)]">
-							<div v-html="level.svg"></div>
+							<div class="level_svg" v-html="level.svg"></div>
 							<div class="level__pins">
 								<a @click="clickPin(item, $event)" v-for="(item, index) in level.pin" :key="index" class="pin" :style="item.style"
 									:data-category="item.category" :data-space="item.space">
@@ -57,6 +57,14 @@
 								</a>
 							</div>
 							<div class="level_after">L{{ index + 1 }}</div>
+							<div v-if="level_show && index === 3" class="level_btn">
+								<div v-if="!svg_animate_status" @click="createSafeAnimation(true)" style="font-size: 0.75rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
+									查看安全路线
+								</div>
+								<div v-else @click="createSafeAnimation(false)" style="font-size: 0.75rem; transform: rotateZ(-15deg) rotateX(5deg) translateZ(40vmin);">
+									关闭安全路线
+								</div>
+							</div>
 						</div>
 					</div>
 				</div>
@@ -147,15 +155,24 @@ export default {
 					],
 					show: true
 				},
-			]
+			],
+			svg_animate_status: false,
+			svg_animate: `
+				<path id="myPath" d="M 689 525 L 889 474 L 670 230 L 473 223 L 462 95" fill="none" stroke="#D49333" stroke-width="5"></path>
+				<circle id="myCircle" cx="0" cy="0" r="10" fill="blue">
+					<animateMotion dur="8s" repeatCount="indefinite">
+						<mpath href="#myPath" />
+					</animateMotion>
+				</circle>
+			`
 		}
 	},
 	async mounted() {
-		if (!wxInfo().isPC) { // 移动端
+		// if (!wxInfo().isPC) { // 移动端
-			$('.level.level--current').css('transform', 'translateZ(1rem) rotate3d(0,0,1,20deg)');
+		// 	$('.level.level--current').css('transform', 'translateZ(1rem) rotate3d(0,0,1,20deg)');
-		} else { // PC端
+		// } else { // PC端
-			$('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)');
+		// 	$('.level.level--current').css('transform', 'translateZ(15vmin) rotate3d(0,0,1,20deg)');
-		}
+		// }
 	},
 	methods: {
 		clearPinShow() {
@@ -164,7 +181,7 @@ export default {
 			});
 			$('.mall').removeClass('mall--content-open');
 		},
-		onFloorClick(level) {
+		onFloorClick(level, evt) {
 			this.level_show = level;
 			$('.levels').addClass('levels--open').addClass(`levels--selected-${level}`);
 			$(`.level--${level}`).addClass('level--current');
@@ -186,8 +203,15 @@ export default {
 			this.level_show = '';
 			this.clearPinShow();
 		},
-		onClose() {
+		onCloseLevelAll() {
 			this.onCloseLevel();
+			// 清除动画
+			if (this.svg_animate_status) {
+				this.createSafeAnimation(false);
+			}
+		},
+		onClose() {
+			this.onCloseLevelAll();
 			this.$emit('close');
 		},
 		onClickCloseIcon() {
@@ -287,6 +311,27 @@ export default {
 					item.show = false;
 				}
 			});
+		},
+		createSafeAnimation(flag) { // 创建安全动画路径，固定生成动画方法
+			let insertString = '';
+			let level = 4;
+			if (flag) { // 打开
+				this.svg_animate_status = true;
+				insertString = this.svg_animate;
+				let insertIndex = this.level_list[3].svg.indexOf('</svg>');
+				// 添加相应动画
+				let modifiedString = this.level_list[3].svg.slice(0, insertIndex) + insertString;
+				this.level_list[3].svg = modifiedString + '</svg>';
+			} else { // 关闭
+				this.svg_animate_status = false;
+				let originalString = this.level_list[3].svg;
+				let searchTerm = this.svg_animate;
+				let startIndex = originalString.indexOf(searchTerm);
+				let endIndex = startIndex + searchTerm.length - 1;
+				// 删除相应动画
+				let modifiedString = originalString.substring(0, startIndex) + originalString.substring(endIndex + 1);
+				this.level_list[3].svg = modifiedString;
+			}
 		}
 	}
 }
@@ -370,4 +415,21 @@ export default {
 		transform: rotateZ(25deg) rotateX(-60deg) translateZ(15vmin);
 	}
 }
+
+.level_btn {
+	  font-size: 0.75rem;
+    line-height: 0;
+    position: absolute;
+    z-index: 100;
+    top: -2em;
+    right: 0;
+    white-space: nowrap;
+    color: #7d7d86;
+    -webkit-transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
+    transform: rotateZ(45deg) rotateX(-70deg) translateZ(5vmin);
+    -webkit-transition: -webkit-transform 1s, color 0.3s;
+    transition: transform 1s, color 0.3s;
+    -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+    transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
+}
 </style>
--- a/src/components/Floor/pin.js
View file @62c2e8a
+++ b/src/components/Floor/pin.js
View file @62c2e8a
 /*
  * @Date: 2023-08-01 13:55:03
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-07 16:02:25
+ * @LastEditTime: 2023-08-10 16:51:33
  * @FilePath: /map-demo/src/components/Floor/pin.js
  * @Description: 文件描述
  */
--- a/src/views/inner.vue
View file @62c2e8a
+++ b/src/views/inner.vue
View file @62c2e8a
 <!--
  * @Date: 2023-05-19 14:54:27
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-08-07 18:20:34
+ * @LastEditTime: 2023-08-10 08:36:04
  * @FilePath: /map-demo/src/views/inner.vue
  * @Description: 内部地图主体页面
 -->
@@ -277,7 +277,7 @@ export default {
       point_range: [ // 景区范围经纬度
         [120.585111, 31.316084], [120.585111, 31.316084], [120.589488, 31.313197], [120.585422, 31.313005]
       ],
-      show_floor_popup: false,
+      show_floor_popup: true,
     }
   },
   async mounted() {
@@ -761,6 +761,18 @@ export default {
       this.map.add([this.current_route]);
       // 获取定位打标记
       this.setLocation();
+      // TEMP：临时显示测试地址
+      this.location_marker = new AMap.LabelMarker({
+        icon: {
+          image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',
+          anchor: 'bottom-center',
+          size: [36, 36],
+        },
+        position: new AMap.LngLat(120.587706, 31.314197),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+      });
+      this.map.add(this.location_marker);
+      // 定位到当前位置中心
+      this.map.setZoomAndCenter(this.zoom, [120.587706, 31.314197]);
       // this.location_marker = new AMap.Marker({
       //   icon: new AMap.Icon({
       //     image: 'https://cdn.ipadbiz.cn/xys/map/%E5%AE%9A.png',