fix: save

.env

@@ -1,3 +1,3 @@
 VITE_PUBLIC_DIR="/"
 VITE_APP_DEBUG=0
-VITE_APP_SOURCE=https://houseoss.4dkankan.com/project/nanjinbwg-demo/getty-image/
+VITE_APP_SOURCE=https://houseoss.4dkankan.com/project/getty-show-demo/getty-image/

.env.development

@@ -1,3 +1,3 @@
 VITE_PUBLIC_DIR="/"
-VITE_APP_SOURCE=https://houseoss.4dkankan.com/project/nanjinbwg-demo/getty-image/
+VITE_APP_SOURCE=https://houseoss.4dkankan.com/project/getty-show-demo/getty-image/
 VITE_APP_DEBUG=1

.env.production

@@ -1,3 +1,3 @@
 VITE_PUBLIC_DIR="./"
-VITE_APP_SOURCE=https://houseoss.4dkankan.com/project/nanjinbwg-demo/getty-image/
+VITE_APP_SOURCE=https://houseoss.4dkankan.com/project/getty-show-demo/getty-image/
 VITE_APP_DEBUG=1

getWebp.sh

@@ -1,10 +1,10 @@
 
 #!/bin/sh
 
-for i in {1..98}
+for i in {1..40}
 do
     item=$(printf %04d $i)
-    projectID="michaux-steadi-10fps-873-rev1"
+    projectID="enheduanna-steadi-10fps-873-rev1"
     url="https://static.getty.edu/mesopotamia/$projectID/$item.webp"
     mkdir -p ./public/$projectID
     curl $url --output ./public/$projectID/$item.webp

src/App.jsx

@@ -23,6 +23,7 @@ import Section15 from "./view/Section15";
 import Section16 from "./view/Section16";
 import Section17 from "./view/Section17";
 
+import Trans from "./view/Trans";
 import Closing from "./view/Closing";
 
 import { useControls } from "leva";
@@ -107,6 +108,7 @@ function App() {
       <Section8 {...props} />
       <Section9 {...props} />
       <Section10 {...props} />
+      <Trans {...props} />
       <Section11 {...props} />
       <Section12 {...props} />
       <Section13 {...props} />

src/components/Viewer.jsx

@@ -83,8 +83,20 @@ class ViewerInner extends Component {
     this.lastProgress = false;
     this.isBelow = true;
     this.isAbove = false;
+    this.init = this.init.bind(this);
+    this.init(props);
+  }
 
-    props.debug && console.log("init ", props.name);
+  init(props) {
+    this.props = props;
+    props.debug && console.log("init", props.name);
+    this.fullFrameCount = props.frameCount;
+    this.frame = props.startFrame || 0;
+    if (this.props.pause) {
+      Object.keys(this.props.pause).forEach((index) => {
+        this.fullFrameCount += this.props.pause[index];
+      });
+    }
   }
   static propTypes = Viewer.propTypes;
   componentWillUnmount() {
@@ -100,13 +112,6 @@ class ViewerInner extends Component {
   }
 
   componentDidMount() {
-    this.fullFrameCount = this.props.frameCount;
-    this.frame = this.props.startFrame || 0;
-    if (this.props.pause) {
-      Object.keys(this.props.pause).forEach((index) => {
-        this.fullFrameCount += this.props.pause[index];
-      });
-    }
     this.loadAssets();
     this.canvasRef.current && this.initializeCanvas();
 
@@ -137,6 +142,7 @@ class ViewerInner extends Component {
       }
     }
     this.sequence.push(img);
+
     img.onerror = () => {
       var timeStamp = Math.floor(Date.now() * Math.random())
         .toString()
@@ -312,6 +318,20 @@ class ViewerInner extends Component {
         )
       );
     }
+    if (this.props.enterTween.fromTo) {
+      var form = this.props.enterTween.fromTo[0],
+        to = this.props.enterTween.fromTo[1];
+      this.enterTimeline.fromTo(
+        this.viewerRef.current,
+        form,
+        Object.assign(
+          {
+            ease: "none",
+          },
+          to
+        )
+      );
+    }
   }
   initializeExitTween() {
     this.props.debug &&
@@ -355,6 +375,20 @@ class ViewerInner extends Component {
         )
       );
     }
+    if (this.props.exitTween.fromTo) {
+      var form = this.props.enterTween.fromTo[0],
+        to = this.props.enterTween.fromTo[1];
+      this.exitTimeline.fromTo(
+        this.viewerRef.current,
+        form,
+        Object.assign(
+          {
+            ease: "none",
+          },
+          to
+        )
+      );
+    }
   }
 
   poolNewFrames(index) {

src/view/Section10.jsx

@@ -17,6 +17,7 @@ export default function Section10(props) {
       frameCount={45}
       pause={{ 45: 20 }}
       enterTween={Action.crossFadeIn}
+      exitTween={Action.pinForExit}
     >
       <TimeLineLabelText
         fade={0.01}

src/view/Section11.jsx

@@ -1,16 +1,30 @@
 import { Action } from "../action";
 // import { css } from "@emotion/react";
 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 Section11(props) {
   // eslint-disable-next-line react/prop-types
   const debug = props.debug || false;
+  // pause: {
+  //   1: 80,
+  // },
+  // enterTween: {
+  //   from: {
+  //     autoAlpha: 0,
+  //     y: 500,
+  //   },
+  // },
+  // exitTween: vo.pinForExit,
   return (
     <Viewer
       debug={debug}
-      height={"200h"}
+      height={"200vh"}
       name="Enheduanna Steadi"
       path="enheduanna-steadi-10fps-873-rev1"
       frameCount={40}
@@ -20,14 +34,13 @@ export default function Section11(props) {
       enterTween={{
         from: {
           autoAlpha: 0,
-          y: 500,
         },
       }}
       exitTween={Action.pinForExit}
     >
       <TimeLineLabelText
         fade={0.01}
-        verticalOffset={"23vh"}
+        verticalOffset={"63vh"}
         duration={0.3}
         progressPosition={0.09}
       >
@@ -36,6 +49,23 @@ export default function Section11(props) {
           研究与应用，以实现“数字万物”为愿景. 让数字化飞入寻常百姓家。
         </div>
       </TimeLineLabelText>
+
+      <TimeLineWallText
+        className={"wall-text"}
+        progressPosition={0}
+        duration={0.35}
+        fade={0.1}
+      >
+        <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>
   );
 }

src/view/Trans.jsx

@@ -0,0 +1,56 @@
+import { css } from "@emotion/react";
+import { TimeLineTransText } from "../components/TimeLineText";
+
+import RichText from "../components/RichText";
+
+export default function Trans() {
+  // eslint-disable-next-line react/prop-types
+  // const debug = props.debug || false;
+  return (
+    <RichText>
+      <div
+        css={css`
+          display: flex;
+          min-height: calc(var(--vh, 1vh) * 100);
+          justify-content: center;
+          position: relative;
+          z-index: 10;
+          padding: 100px 40px;
+          align-items: center;
+          direction: var(--text-direction);
+          text-align: var(--alignment);
+          flex-direction: column;
+  
+        `}
+      >
+        <TimeLineTransText>
+          <div
+            css={css`
+              font-size: 25px;
+              font-weight: 300;
+              line-height: 2;
+              max-width: 750px;
+              margin: 20px auto 100px;
+            `}
+          >
+            当文字开始用于行政管理及记录目的时，它的用途随着时间的推移而扩大。神话、宗教赞美诗、契约、科学及数学文本保存在成百上千个泥板上。许多作品尚有待翻译。
+          </div>
+        </TimeLineTransText>
+
+        <TimeLineTransText>
+          <div
+            css={css`
+              font-size: 25px;
+              font-weight: 300;
+              line-height: 2;
+              max-width: 750px;
+              margin: 20px auto 100px;
+            `}
+          >
+            历史上第一个署名作者是女祭司Enheduanna，她是阿卡德国王的女儿。Enheduanna一生为众神至少创作了四十首赞美诗，她在其中一些赞美诗中提到了自己的名字。
+          </div>
+        </TimeLineTransText>
+      </div>
+    </RichText>
+  );
+}

vite.config.js

@@ -21,7 +21,7 @@ export default ({ mode }) =>
       obfuscatorPlugin({
         apply: "build",
         options: {
-          debugProtection: true,
+          debugProtection: false,
           compact: true,
           controlFlowFlattening: true,
           controlFlowFlatteningThreshold: 0.75,