upp

pc/src/assets/img/map/aaa.xmp

@@ -1,146 +0,0 @@
-<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
-<x:xmpmeta xmlns:x="adobe:ns:meta/" x:xmptk="Adobe XMP Core 7.1-c000 79.4d2f597, 2021/09/01-20:51:22        " rdfhash="A80EDEBF33CC50AE6152CB296B73935C" merged="0">
- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
-  <rdf:Description rdf:about=""
-    xmlns:xmpMM="http://ns.adobe.com/xap/1.0/mm/"
-    xmlns:stEvt="http://ns.adobe.com/xap/1.0/sType/ResourceEvent#"
-    xmlns:stRef="http://ns.adobe.com/xap/1.0/sType/ResourceRef#"
-    xmlns:xmp="http://ns.adobe.com/xap/1.0/"
-    xmlns:xmpDM="http://ns.adobe.com/xmp/1.0/DynamicMedia/"
-    xmlns:tiff="http://ns.adobe.com/tiff/1.0/"
-    xmlns:creatorAtom="http://ns.adobe.com/creatorAtom/1.0/"
-    xmlns:stDim="http://ns.adobe.com/xap/1.0/sType/Dimensions#"
-    xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmpMM:InstanceID="xmp.iid:e2074a62-b355-2045-88b5-0d895cd12404"
-   xmpMM:DocumentID="e1f23059-15ab-c024-1b96-4c7600000041"
-   xmpMM:OriginalDocumentID="xmp.did:36c1b453-97f3-7449-a16c-7c6493a12495"
-   xmp:MetadataDate="2023-05-11T17:52:35+08:00"
-   xmp:ModifyDate="2023-05-11T17:52:35+08:00"
-   xmp:CreatorTool="Adobe Premiere Pro 2022.0 (Windows)"
-   xmp:CreateDate="2023-05-11T17:52:04+08:00"
-   xmpDM:videoFrameRate="24.000000"
-   xmpDM:videoFieldOrder="Progressive"
-   xmpDM:videoPixelAspectRatio="1/1"
-   xmpDM:audioSampleRate="48000"
-   xmpDM:audioSampleType="Compressed"
-   xmpDM:audioChannelType="Stereo"
-   xmpDM:startTimeScale="24"
-   xmpDM:startTimeSampleSize="1"
-   dc:format="WebM">
-   <xmpMM:History>
-    <rdf:Seq>
-     <rdf:li
-      stEvt:action="saved"
-      stEvt:instanceID="1ff6942d-8e29-d638-9a01-51180000006e"
-      stEvt:when="2023-05-11T17:52:35+08:00"
-      stEvt:softwareAgent="Adobe Premiere Pro 2022.0 (Windows)"
-      stEvt:changed="/"/>
-     <rdf:li
-      stEvt:action="created"
-      stEvt:instanceID="xmp.iid:3687d0e2-d133-0e47-9e16-6a8b94639829"
-      stEvt:when="2023-05-11T17:52:32+08:00"
-      stEvt:softwareAgent="Adobe Premiere Pro 2022.0 (Windows)"/>
-     <rdf:li
-      stEvt:action="saved"
-      stEvt:instanceID="xmp.iid:310f39a0-99da-c94e-ad9b-5d6648dd0f6c"
-      stEvt:when="2023-05-11T17:52:35+08:00"
-      stEvt:softwareAgent="Adobe Premiere Pro 2022.0 (Windows)"
-      stEvt:changed="/"/>
-     <rdf:li
-      stEvt:action="saved"
-      stEvt:instanceID="xmp.iid:e2074a62-b355-2045-88b5-0d895cd12404"
-      stEvt:when="2023-05-11T17:52:35+08:00"
-      stEvt:softwareAgent="Adobe Premiere Pro 2022.0 (Windows)"
-      stEvt:changed="/metadata"/>
-    </rdf:Seq>
-   </xmpMM:History>
-   <xmpMM:Ingredients>
-    <rdf:Bag>
-     <rdf:li
-      stRef:instanceID="142728e8-70fa-1f8a-6ee5-e0f600000088"
-      stRef:documentID="6d047dd5-7005-7bac-47da-04330000005b"
-      stRef:fromPart="time:31752000000f254016000000d328104000000f254016000000"
-      stRef:toPart="time:0d328104000000f254016000000"
-      stRef:filePath="fogTransitionIn1080p.mp4"
-      stRef:maskMarkers="None"/>
-    </rdf:Bag>
-   </xmpMM:Ingredients>
-   <xmpMM:Pantry>
-    <rdf:Bag>
-     <rdf:li>
-      <rdf:Description
-       xmp:CreateDate="2022-04-11T09:15:32Z"
-       xmp:ModifyDate="2023-05-11T17:51:26+08:00"
-       xmp:MetadataDate="2023-05-11T17:51:26+08:00"
-       tiff:Orientation="1"
-       xmpMM:InstanceID="142728e8-70fa-1f8a-6ee5-e0f600000088"
-       xmpMM:DocumentID="6d047dd5-7005-7bac-47da-04330000005b"
-       xmpMM:OriginalDocumentID="xmp.did:fa80e015-4ce1-a445-9af5-2fd6c64982d9">
-      <xmpDM:duration
-       xmpDM:value="2100"
-       xmpDM:scale="1/1000"/>
-      <xmpMM:History>
-       <rdf:Seq>
-        <rdf:li
-         stEvt:action="saved"
-         stEvt:instanceID="142728e8-70fa-1f8a-6ee5-e0f600000088"
-         stEvt:when="2023-05-11T17:51:26+08:00"
-         stEvt:softwareAgent="Adobe Premiere Pro 2022.0 (Windows)"
-         stEvt:changed="/"/>
-       </rdf:Seq>
-      </xmpMM:History>
-      </rdf:Description>
-     </rdf:li>
-    </rdf:Bag>
-   </xmpMM:Pantry>
-   <xmpMM:DerivedFrom
-    stRef:instanceID="xmp.iid:3687d0e2-d133-0e47-9e16-6a8b94639829"
-    stRef:documentID="xmp.did:3687d0e2-d133-0e47-9e16-6a8b94639829"
-    stRef:originalDocumentID="xmp.did:3687d0e2-d133-0e47-9e16-6a8b94639829"/>
-   <creatorAtom:windowsAtom
-    creatorAtom:extension=".prproj"
-    creatorAtom:invocationFlags="/L"
-    creatorAtom:uncProjectPath="\\?\C:\Users\xiaoyu\Desktop\无标题项目.prproj"/>
-   <creatorAtom:macAtom
-    creatorAtom:applicationCode="1347449455"
-    creatorAtom:invocationAppleEvent="1129468018"/>
-   <xmpDM:projectRef
-    xmpDM:type="movie"/>
-   <xmpDM:videoFrameSize
-    stDim:w="1920"
-    stDim:h="1080"
-    stDim:unit="pixel"/>
-   <xmpDM:duration
-    xmpDM:value="31"
-    xmpDM:scale="1/24"/>
-   <xmpDM:startTimecode
-    xmpDM:timeFormat="24Timecode"
-    xmpDM:timeValue="00:00:00:03"/>
-   <xmpDM:altTimecode
-    xmpDM:timeValue="00:00:00:03"
-    xmpDM:timeFormat="24Timecode"/>
-  </rdf:Description>
- </rdf:RDF>
-</x:xmpmeta>
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                                                                                                    
-                           
-<?xpacket end="w"?>

pc/src/assets/styles/base.css

@@ -114,7 +114,7 @@ textarea {
   }
 }
 .yunSon2 {
-  animation: moveyun 8s linear infinite alternate;
+  animation: moveyun 10s linear infinite alternate;
 }
 @keyframes moveyun {
   0% {

pc/src/assets/styles/base.less

@@ -147,7 +147,7 @@ textarea {
 
 
 .yunSon2 {
-  animation: moveyun 8s linear infinite alternate;
+  animation: moveyun 10s linear infinite alternate;
 }
 
 // 动画帧

pc/src/pages/A0Map/index.module.scss

@@ -4,7 +4,19 @@
   position: relative;
 
   :global {
-    .videoBox {
+
+    .moveCCC{
+      position: absolute;
+      z-index: 100;
+      right: 20px;
+      top: 20px;
+      background-color: aqua;
+      padding: 10px;
+      cursor: pointer;
+      border-radius: 10px;
+    }
+
+    .videoBoxMove {
       opacity: 1;
       pointer-events: auto;
       transition: all 1s;
@@ -14,10 +26,26 @@
       left: 0;
       width: 100%;
       height: 100%;
+      display: flex;
 
-      &>video {
+      .videoRow {
+        position: absolute;
+        top: 0;
+        left: 0;
+        opacity: 0;
         width: 100%;
+        height: 100%;
+
+        &>img {
+          pointer-events: none;
+          width: 100%;
+          height: 100%;
+        }
       }
+      .videoRowAc{
+        opacity: 1;
+      }
+
     }
 
     .videoBoxHide {

pc/src/pages/A0Map/index.tsx

@@ -1,8 +1,14 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import styles from "./index.module.scss";
 import maoBacImg from "@/assets/img/map/mapBac.jpg";
-import staVideo from "@/assets/img/map/staVideo.mp4";
 import classNames from "classnames";
+import { envUrl } from "@/utils/history";
 
 function A0Map() {
   const mapBac1 = useRef<HTMLDivElement>(null);
@@ -23,21 +29,13 @@ function A0Map() {
     }
   }, []);
 
-  const [videoInd, setVidoeInd] = useState(1);
+  const [videoInd, setVidoeInd] = useState(true);
 
   // 视频的播放
-  const videoPlayFu = useCallback(() => {
-    const dom1 = document.querySelector("#video1") as HTMLVideoElement;
-    if (dom1) {
-      dom1.play();
-      dom1.onended = () => {
-        setVidoeInd(0);
-      };
-    }
-  }, []);
+  const videoPlayFu = useCallback(() => {}, []);
 
   useEffect(() => {
-    if (videoInd === 1) videoPlayFu();
+    if (videoInd) videoPlayFu();
   }, [videoInd, videoPlayFu]);
 
   useEffect(() => {
@@ -50,13 +48,58 @@ function A0Map() {
     }
   }, [mouseMoveFu]);
 
+  const [moveInd, setMoveInd] = useState(0);
+
+  // 30个动画帧div
+  const moveDiv = useMemo(() => {
+    const arr: any = [];
+
+    for (let i = 0; i <= 30; i++) {
+      arr.push(
+        <div
+          className={classNames("videoRow", moveInd === i ? "videoRowAc" : "")}
+          key={i}
+        >
+          <img src={`${envUrl}/yunMove/yan_${i}.png`} alt="" />
+        </div>
+      );
+    }
+    return arr;
+  }, [moveInd]);
+
+  const moveTime = useRef(-1);
+
+  useEffect(() => {
+    if (videoInd) {
+      clearInterval(moveTime.current);
+      let num = 0;
+      moveTime.current = window.setInterval(() => {
+        setMoveInd(num);
+        num++;
+        if (num > 30) {
+          clearInterval(moveTime.current);
+          setVidoeInd(false);
+        }
+      }, 50);
+    }
+
+    return () => {
+      clearInterval(moveTime.current);
+    };
+  }, [videoInd]);
+
   return (
     <div className={styles.A0Map}>
-      {/* 2个视频 */}
+      {/* 测试开场动画帧 */}
+      <div className="moveCCC" onClick={() => setVidoeInd(true)}>
+        开始
+      </div>
+
+      {/* 开场动画帧 */}
       <div
-        className={classNames("videoBox", videoInd !== 1 ? "videoBoxHide" : "")}
+        className={classNames("videoBoxMove", !videoInd ? "videoBoxHide" : "")}
       >
-        <video id="video1" src={staVideo} muted></video>
+        {moveDiv}
       </div>
 
       {/* 一级地图 */}
@@ -66,8 +109,8 @@ function A0Map() {
         </div>
       </div>
       <div className="yunBox">
-      <div className="yunSon1"></div>
-      <div className="yunSon2"></div>
+        <div className="yunSon1"></div>
+        <div className="yunSon2"></div>
       </div>
     </div>
   );