|
|
@@ -29,6 +29,11 @@ export class CanvasPlayer extends Mitt {
|
|
|
this.frames = [];
|
|
|
this.clips = [];
|
|
|
this.canScroll = false;
|
|
|
+ this.isInit = [];
|
|
|
+ this.matchDis = 10;
|
|
|
+ this.mainScrolltimer = null;
|
|
|
+ this.mainScrollfinishTimer = null;
|
|
|
+ this.isScrollDoneTime = isMobile() ? 300 : 200;
|
|
|
this.resize = this.resize.bind(this);
|
|
|
this.watchScroll = this.watchScroll.bind(this);
|
|
|
}
|
|
|
@@ -80,10 +85,7 @@ export class CanvasPlayer extends Mitt {
|
|
|
for (let key = 0; key < item.total; key++) {
|
|
|
const padLength = item.total.toString().length + 1;
|
|
|
let imgIndex = String(key).padStart(padLength, "0");
|
|
|
- isMobile();
|
|
|
- let url = isMobile()
|
|
|
- ? `${item.imageUrl}_mo/${imgIndex}.webp`
|
|
|
- : `${item.imageUrl}/${imgIndex}.webp`;
|
|
|
+ let url = `${item.imageUrl}/${imgIndex}.webp`;
|
|
|
const res = this.loadImage(url).then((image) => {
|
|
|
if (image) {
|
|
|
const frame = {
|
|
|
@@ -159,7 +161,6 @@ export class CanvasPlayer extends Mitt {
|
|
|
// const frame = Math.round(clip.total * prcess);
|
|
|
}
|
|
|
toScroll(scrollY, na, event) {
|
|
|
- let timer, completeTimer;
|
|
|
const clip = Array.from(this.clips).find(
|
|
|
(item) => item.id === this.currentType
|
|
|
);
|
|
|
@@ -168,39 +169,52 @@ export class CanvasPlayer extends Mitt {
|
|
|
// const startFrame = Math.floor(clip.total * prcess);
|
|
|
const startFrame = this.getframeByHeight(scrollY);
|
|
|
|
|
|
- if (timer) {
|
|
|
- clearTimeout(timer);
|
|
|
- timer = null;
|
|
|
+ if (this.mainScrolltimer) {
|
|
|
+ clearTimeout(this.mainScrolltimer);
|
|
|
+ this.mainScrolltimer = null;
|
|
|
+ }
|
|
|
+ if (this.mainScrollfinishTimer) {
|
|
|
+ clearTimeout(this.mainScrollfinishTimer);
|
|
|
+ this.mainScrollfinishTimer = null;
|
|
|
}
|
|
|
-
|
|
|
this.currentFrame = startFrame;
|
|
|
- const matchDis = 10;
|
|
|
|
|
|
const dynamicDistance = na
|
|
|
- ? this.currentFrame + matchDis
|
|
|
- : this.currentFrame - matchDis;
|
|
|
+ ? this.currentFrame + this.matchDis
|
|
|
+ : this.currentFrame - this.matchDis;
|
|
|
// 少于frame
|
|
|
-
|
|
|
let dis = clamp(dynamicDistance, 0, clip.total);
|
|
|
- // console.log("startFrame", this.currentFrame, dis, this.movingFrame);
|
|
|
|
|
|
if (this.scrollAni) {
|
|
|
- // console.log("11", this.scrollAni.duration());
|
|
|
this.scrollAni.kill();
|
|
|
this.scrollAni = null;
|
|
|
- if (Math.abs(this.movingFrame - this.currentFrame) > dis / 2) {
|
|
|
- console.warn(
|
|
|
- "持续少于5fame之内",
|
|
|
- Math.abs(this.movingFrame - this.currentFrame)
|
|
|
- );
|
|
|
- na ? (dis += 6) : (dis -= 6);
|
|
|
+
|
|
|
+ // if (
|
|
|
+ // Math.abs(Math.floor(this.movingFrame) - this.currentFrame) >
|
|
|
+ // dis / 2
|
|
|
+ // ) {
|
|
|
+ // console.warn(
|
|
|
+ // "持续少于5fame之内",
|
|
|
+ // Math.abs(this.movingFrame - this.currentFrame)
|
|
|
+ // );
|
|
|
+ // na ? (dis += 6) : (dis -= 6);
|
|
|
+ // if (dis < 0) dis = 0;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.isRendering) {
|
|
|
+ const patch = Math.abs(dis - Math.floor(this.movingFrame));
|
|
|
+ if (patch < 5) {
|
|
|
+ console.warn("持续少于5fame之内", patch);
|
|
|
+ na ? (dis += 5) : (dis -= 5);
|
|
|
if (dis < 0) dis = 0;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- timer = setTimeout(() => {
|
|
|
+ // console.log("startFrame", dis, this.currentFrame, this.movingFrame);
|
|
|
+
|
|
|
+ this.mainScrolltimer = setTimeout(() => {
|
|
|
this.scrollAni = gsap.timeline();
|
|
|
- this.isRendering = true;
|
|
|
this.scrollAni.to(this, {
|
|
|
movingFrame: dis,
|
|
|
// duration: 0.6,
|
|
|
@@ -208,14 +222,16 @@ export class CanvasPlayer extends Mitt {
|
|
|
onUpdate: () => {
|
|
|
this.isRendering = true;
|
|
|
const mFrame = Math.floor(this.movingFrame);
|
|
|
+ // console.log("mFrame", mFrame);
|
|
|
const prcess = mFrame / clip.total;
|
|
|
this.reDraw(mFrame, this.currentType);
|
|
|
this.noticeProcess();
|
|
|
},
|
|
|
onStart: () => {},
|
|
|
onComplete: () => {
|
|
|
- completeTimer = setTimeout(this.toRunPatch, 0);
|
|
|
- this.scrollAni && this.scrollAni.pause();
|
|
|
+ this.mainScrollfinishTimer = setTimeout(this.toRunPatch, 0);
|
|
|
+ this.scrollAni && this.scrollAni.kill();
|
|
|
+ this.scrollAni = null;
|
|
|
},
|
|
|
});
|
|
|
}, 40);
|
|
|
@@ -364,30 +380,43 @@ export class CanvasPlayer extends Mitt {
|
|
|
}
|
|
|
}
|
|
|
initFirstFrame() {
|
|
|
- if (this.currentType) {
|
|
|
- const frameItem = this.frames.find(
|
|
|
- (item) => item.id == this.currentType && item.index == 1
|
|
|
- );
|
|
|
- this.context.clearRect(0, 0, this.vw, this.vh);
|
|
|
- this.context.drawImage(frameItem.image, 0, 0, this.vw, this.vh);
|
|
|
- this.initClipScrollheight();
|
|
|
- this.scrollAni = gsap.timeline();
|
|
|
- let doneScroll = () => {
|
|
|
- this.isRendering = false;
|
|
|
+ if (!this.isInit.includes(this.currentType)) {
|
|
|
+ if (this.currentType) {
|
|
|
+ this.isInit.push(this.currentType);
|
|
|
+ const frameItem = this.frames.find(
|
|
|
+ (item) => item.id == this.currentType && item.index == 1
|
|
|
+ );
|
|
|
+ this.context.clearRect(0, 0, this.vw, this.vh);
|
|
|
+ this.context.drawImage(frameItem.image, 0, 0, this.vw, this.vh);
|
|
|
+ this.initClipScrollheight();
|
|
|
+ this.scrollAni = gsap.timeline();
|
|
|
+ let doneScroll = () => {
|
|
|
+ this.isRendering = false;
|
|
|
|
|
|
- if (this.currentFrame === 0 && this.movingFrame === 0) {
|
|
|
- this.emit("scroll-prev");
|
|
|
- }
|
|
|
- if (
|
|
|
- this.currentFrame === frameItem.total &&
|
|
|
- this.movingFrame === frameItem.total
|
|
|
- ) {
|
|
|
- this.emit("scroll-next");
|
|
|
- }
|
|
|
- console.warn("scroll done", this.currentFrame, this.movingFrame);
|
|
|
- };
|
|
|
- this.toRunPatch = debounce(doneScroll, 400);
|
|
|
- console.log("initFirstFrame");
|
|
|
+ if (this.currentFrame === 0 && this.movingFrame === 0) {
|
|
|
+ this.emit("scroll-prev");
|
|
|
+ }
|
|
|
+ if (
|
|
|
+ this.currentFrame === frameItem.total &&
|
|
|
+ this.movingFrame === frameItem.total &&
|
|
|
+ !isMobile()
|
|
|
+ ) {
|
|
|
+ this.emit("scroll-next");
|
|
|
+ }
|
|
|
+ //
|
|
|
+ if (
|
|
|
+ this.currentFrame === frameItem.total &&
|
|
|
+ frameItem.total - this.movingFrame <= this.matchDis &&
|
|
|
+ isMobile()
|
|
|
+ ) {
|
|
|
+ console.log("移动端下一叶");
|
|
|
+ this.emit("scroll-next");
|
|
|
+ }
|
|
|
+ console.warn("scroll done", this.currentFrame, this.movingFrame);
|
|
|
+ };
|
|
|
+ this.toRunPatch = debounce(doneScroll, this.isScrollDoneTime);
|
|
|
+ console.log("initFirstFrame");
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
reDraw(frame, type) {
|
gemercheung