|
@@ -53,12 +53,13 @@ class ViewerInner extends Component {
|
|
|
this.containerRef = createRef(null);
|
|
|
this.viewerRef = createRef(null);
|
|
|
this.canvasContainerRef = createRef(null);
|
|
|
- this.loadingWrap = createRef(null);
|
|
|
+
|
|
|
this.viewerOffsetRef = createRef(null);
|
|
|
this.canvasRef = createRef(null);
|
|
|
+
|
|
|
+ this.processBarRef = createRef(null);
|
|
|
this.processingRef = createRef(null);
|
|
|
this.preProcessingRef = createRef(null);
|
|
|
- this.processBarRef = createRef(null);
|
|
|
|
|
|
this.sequence = [];
|
|
|
this.loadedRenderPool = [];
|
|
@@ -91,6 +92,9 @@ class ViewerInner extends Component {
|
|
|
this.props = props;
|
|
|
props.debug && console.log("init", props.name);
|
|
|
this.fullFrameCount = props.frameCount;
|
|
|
+ this.notLoadedTween = {
|
|
|
+ isActive: false,
|
|
|
+ };
|
|
|
this.frame = props.startFrame || 0;
|
|
|
if (this.props.pause) {
|
|
|
Object.keys(this.props.pause).forEach((index) => {
|
|
@@ -211,6 +215,7 @@ class ViewerInner extends Component {
|
|
|
initializeTimeline() {
|
|
|
this.props.debug && console.log(this.props.path, "initializeTimeline");
|
|
|
this.leaveHideElements();
|
|
|
+ let timer = null;
|
|
|
this.timeline = gsap.timeline({
|
|
|
scrollTrigger: {
|
|
|
trigger: this.containerRef.current,
|
|
@@ -230,6 +235,23 @@ class ViewerInner extends Component {
|
|
|
this.lastProgress = trigger.progress;
|
|
|
}
|
|
|
}
|
|
|
+ clearTimeout(timer),
|
|
|
+ (timer = setTimeout(() => {
|
|
|
+ if (
|
|
|
+ this.frame > this.loadedCount &&
|
|
|
+ !this.notLoadedTween.isActive
|
|
|
+ ) {
|
|
|
+ // this.props.debug && console.warn("not load flash");
|
|
|
+ console.warn("not load flash");
|
|
|
+ this.enterShowElements();
|
|
|
+ this.notLoadedTween = gsap.to(this.processBarRef.current, {
|
|
|
+ backgroundColor: "#8888a0",
|
|
|
+ duration: 0.33,
|
|
|
+ repeat: 1,
|
|
|
+ yoyo: !0,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }, 100));
|
|
|
},
|
|
|
onScrubComplete: () => {
|
|
|
this.justScrolled = true;
|