Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
zhangyupeng
/
getty-show
1
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

fix: save

gemercheung 1 éve
szülő
7097c633bb
commit
5cb8da8ad4
7 módosított fájl, 72 hozzáadás és 52 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 1 0
      index.html
  2. 1 1
      package.json
  3. 29 24
      src/App.jsx
  4. 13 8
      src/components/Viewer.jsx
  5. 3 0
      src/view/Section1.jsx
  6. 22 2
      src/view/Section3.jsx
  7. 3 17
      src/view/Section7.jsx

+ 1 - 0
index.html
Fájl Megtekintése 

@@ -4,6 +4,7 @@
 
     <meta charset="UTF-8" />
 
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
+    <script src="https://4dkk.4dage.com/v4-test/www/viewer/static/lib/vconsole.js"></script>
 
     <title>Vite + React</title>
 
   </head>
 
   <body>

+ 1 - 1
package.json
Fájl Megtekintése 

@@ -7,7 +7,7 @@
 
     "dev": "vite --host 0.0.0.0",
 
     "build": "vite build",
 
     "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
 
-    "preview": "vite preview"
 
+    "preview": "vite preview --host 0.0.0.0"
 
   },
 
   "dependencies": {
 
     "@emotion/react": "^11.11.4",

+ 29 - 24
src/App.jsx
Fájl Megtekintése 

@@ -35,14 +35,8 @@ let resizeTimer = null;
 
 
 function App() {
 
   const container = useRef();
 
-  const { debug, scrollSpeed } = useControls({
 
+  const { debug } = useControls({
 
     debug: false,
 
-    scrollSpeed: {
 
-      value: 0.66,
 
-      min: 0,
 
-      max: 1,
 
-      step: 0.01,
 
-    },
 
   });
 
   const handlerResize = () => {
 
     clearTimeout(resizeTimer);
 
@@ -76,29 +70,40 @@ function App() {
 
     window.addEventListener("resize", handlerResize, false);
 
     handlerResize();
 
     document.documentElement.style.overflow = "auto";
 
+    var vConsole = new window.VConsole();
 
+    if (debug) {
 
+      vConsole.showSwitch()
 
+    } else {
 
+
 
+      vConsole.hideSwitch()
 
+    }
 
   });
 
+  const props = {
 
+    // scrollSpeed: scrollSpeed,
 
+    debug: debug,
 
+  };
 
 
   return (
 
     <div ref={container}>
 
       <Opening></Opening>
 
 
-      <Section1 debug={debug} />
 
-      <Section2 debug={debug} />
 
-      <Section3 debug={debug} />
 
-      <Section4 debug={debug} />
 
-      <Section5 debug={debug} />
 
-      <Section6 debug={debug} />
 
-      <Section7 debug={debug} />
 
-      <Section8 debug={debug} />
 
-      <Section9 debug={debug} />
 
-      <Section10 debug={debug} />
 
-      <Section11 debug={debug} />
 
-      <Section12 debug={debug} />
 
-      <Section13 debug={debug} />
 
-      <Section14 debug={debug} />
 
-      <Section15 debug={debug} />
 
-      <Section16 debug={debug} />
 
-      <Section17 debug={debug} />
 
+      <Section1 {...props} />
 
+      <Section2 {...props} />
 
+      <Section3 {...props} />
 
+      <Section4 {...props} />
 
+      <Section5 {...props} />
 
+      <Section6 {...props} />
 
+      <Section7 {...props} />
 
+      <Section8 {...props} />
 
+      <Section9 {...props} />
 
+      <Section10 {...props} />
 
+      <Section11 {...props} />
 
+      <Section12 {...props} />
 
+      <Section13 {...props} />
 
+      <Section14 {...props} />
 
+      <Section15 {...props} />
 
+      <Section16 {...props} />
 
+      <Section17 {...props} />
 
     </div>
 
   );
 
 }

+ 13 - 8
src/components/Viewer.jsx
Fájl Megtekintése 

@@ -10,10 +10,6 @@ import { gsap, ScrollTrigger } from "gsap/all";
 
 import LazyLoad from "react-lazyload";

 import { css } from "@emotion/react";

 

-// const isDebug = Number(import.meta.env.VITE_APP_DEBUG) === 1;

-const isDebug = false;

-console.log("isDebug", isDebug);

-

 export default function Viewer(props) {

   const lazyHeight = 0.01 * parseFloat(props.height) * window.innerHeight;

   // offset={1e4}

@@ -21,14 +17,17 @@ export default function Viewer(props) {
 
     return isValidElement(element)

       ? cloneElement(element, {

           parentHeight: props.height,

+          debug: props.debug,

         })

       : element;

   });

-

+  const debug = props.debug || false;

   // console.log("lazyHeight", lazyHeight);

   return (

     <LazyLoad height={lazyHeight} offset={1e4}>

-      <ViewerInner {...props}>{allChildren}</ViewerInner>

+      <ViewerInner {...props} debug={debug}>

+        {allChildren}

+      </ViewerInner>

     </LazyLoad>

   );

 }

@@ -44,6 +43,7 @@ Viewer.propTypes = {
 
   pause: PropTypes.object,

   children: PropTypes.any,

   debug: PropTypes.bool,

+  scrollSpeed: PropTypes.number,

 };

 

 class ViewerInner extends Component {

@@ -91,6 +91,11 @@ class ViewerInner extends Component {
 
       this.timeline.kill(true);

     }

   }

+  componentDidUpdate() {

+    if (this.props.debug) {

+      this.timeline.scrollTrigger.refresh();

+    }

+  }

 

   componentDidMount() {

     this.fullFrameCount = this.props.frameCount;

@@ -198,7 +203,7 @@ class ViewerInner extends Component {
 
         start: "top top",

         end: "bottom bottom",

         ease: "none",

-        markers: isDebug,

+        markers: this.props.debug || false,

         onUpdate: (trigger) => {

           //处理processloading

           if (!this.lastProgress) {

@@ -256,7 +261,7 @@ class ViewerInner extends Component {
 
   initializeEnterTween() {

     const duration = this.props.enterTween.duration || 1;

     let openPin = false;

-    console.warn("this.props.enterTween", duration, this.props.enterTween);

+    // console.warn("this.props.enterTween", duration, this.props.enterTween);

     gsap.set(this.viewerRef.current, {

       yPercent: -100 * duration,

     });

+ 3 - 0
src/view/Section1.jsx
Fájl Megtekintése 

@@ -12,6 +12,8 @@ import {
 
 export default function Section1(props) {

   // eslint-disable-next-line react/prop-types

   const debug = props.debug || false;

+  // eslint-disable-next-line react/prop-types

+  const scrollSpeed = props.scrollSpeed || 0.66;

   return (

     <Viewer

       name="Lion Render"

@@ -19,6 +21,7 @@ export default function Section1(props) {
 
       height={"1300vh"}

       frameCount={300}

       debug={debug}

+      scrollSpeed={scrollSpeed}

       pause={{

         298: 40,

       }}

+ 22 - 2
src/view/Section3.jsx
Fájl Megtekintése 

@@ -1,7 +1,11 @@
 
 import { Action } from "../action";

 import Viewer from "../components/Viewer";

-

-import { TimeLineLabelText } from "../components/TimeLineText";

+import { Style } from "../style/section";

+import {

+  TimeLineLabelText,

+  TimeLineWallText,

+  ButtonText,

+} from "../components/TimeLineText";

 

 export default function Section3(props) {

   // eslint-disable-next-line react/prop-types

@@ -24,6 +28,22 @@ export default function Section3(props) {
 
       >

         <div>美索不达米亚人认为，人乃为服务于神而造。</div>

       </TimeLineLabelText>

+

+      <TimeLineWallText

+        className={"wall-text"}

+        progressPosition={0.725}

+        duration={0.35}

+      >

+        <div css={Style.DescriptionStyle}>

+          <div className="desc-title">测试文案：不知名文物</div>

+          <div className="desc-sub-title">公元前11-1010年</div>

+          <div className="desc-t-title">不知名文物</div>

+          <ButtonText>

+            <i>不知名文物</i>

+            ，测试文案：不知名文物，测试文案：不知名文物，测试文案：不知名文物，测试文案：不知名文物F。©中国艺术博物馆版权所有

+          </ButtonText>

+        </div>

+      </TimeLineWallText>

     </Viewer>

   );

 }

+ 3 - 17
src/view/Section7.jsx
Fájl Megtekintése 

@@ -24,23 +24,9 @@ export default function Section7(props) {
 
         duration={0.3}

         progressPosition={0.09}

       >

-        <div

-          css={css`

-            font-weight: 300;

-            font-size: 18px;

-            width: 50%;

-            max-width: 600px;

-            padding: 8px 12px;

-            margin-right: 20px;

-            margin-left: auto;

-            background: rgba(0, 0, 0, 0.7);

-            border-radius: 2px;

-          `}

-        >

-          <div>

-            测试文案： 四维时代致力于人工智能三维数字化技术的.

-            研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。

-          </div>

+        <div>

+          测试文案： 四维时代致力于人工智能三维数字化技术的.

+          研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。

         </div>

       </TimeLineLabelText>

     </Viewer>