From 736e6ec07560c31e9ee02eeb257227fcafbc9ba7 Mon Sep 17 00:00:00 2001 From: Book Pauk Date: Sat, 16 Feb 2019 00:58:28 +0700 Subject: [PATCH] =?UTF-8?q?=D0=A0=D0=B5=D1=84=D0=B0=D0=BA=D1=82=D0=BE?= =?UTF-8?q?=D1=80=D0=B8=D0=BD=D0=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Reader/TextPage/DrawHelper.js | 11 ++- .../components/Reader/TextPage/TextPage.vue | 75 +++++++++---------- 2 files changed, 42 insertions(+), 44 deletions(-) diff --git a/client/components/Reader/TextPage/DrawHelper.js b/client/components/Reader/TextPage/DrawHelper.js index 8394d101..7a142a6c 100644 --- a/client/components/Reader/TextPage/DrawHelper.js +++ b/client/components/Reader/TextPage/DrawHelper.js @@ -219,19 +219,24 @@ export default class DrawHelper { async doPageAnimationThaw(page1, page2, duration, isDown, animation1Finish) { page1.style.animation = `page1-animation-thaw ${duration}ms ease-in 1`; page2.style.animation = `page2-animation-thaw ${duration}ms ease-in 1`; - await animation1Finish(duration + 201); + await animation1Finish(duration); } async doPageAnimationBlink(page1, page2, duration, isDown, animation1Finish, animation2Finish) { page1.style.opacity = '0'; page2.style.opacity = '0'; page2.style.animation = `page2-animation-thaw ${duration/2}ms ease-out 1`; - await animation2Finish(duration/2 + 201); + await animation2Finish(duration/2); page1.style.opacity = '1'; page1.style.animation = `page1-animation-thaw ${duration/2}ms ease-in 1`; - await animation1Finish(duration/2 + 201); + await animation1Finish(duration/2); page2.style.opacity = '1'; } + + async doPageAnimationRightShift(page1, page2, duration, isDown, animation1Finish, animation2Finish) { + page.style.transition = `${this.scrollingDelay}ms ${this.scrollingType}`; + page.style.transform = `translateY(-${this.lineHeight}px)`; + } } \ No newline at end of file diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue index c3e3c673..aec7422a 100644 --- a/client/components/Reader/TextPage/TextPage.vue +++ b/client/components/Reader/TextPage/TextPage.vue @@ -5,12 +5,12 @@
-
+
-
+
@@ -420,9 +420,14 @@ class TextPage extends Vue { return `${this.fontStyle} ${this.fontWeight} ${this.fontSize}px ${this.fontName}`; } - onScrollingTransitionEnd() { - if (this.resolveTransitionFinish) - this.resolveTransitionFinish(); + onPage1TransitionEnd() { + if (this.resolveTransition1Finish) + this.resolveTransition1Finish(); + } + + onPage2TransitionEnd() { + if (this.resolveTransition2Finish) + this.resolveTransition2Finish(); } startSearch(needle) { @@ -444,6 +449,21 @@ class TextPage extends Vue { this.draw(); } + generateWaitingFunc(waitingHandlerName, stopPropertyName) { + const func = (timeout) => { + return new Promise(async(resolve) => { + this[waitingHandlerName] = resolve; + let wait = (timeout + 201)/100; + while (wait > 0 && !this[stopPropertyName]) { + wait--; + await sleep(100); + } + resolve(); + }); + }; + return func; + } + async startTextScrolling() { if (this.doingScrolling || !this.book || !this.parsed.textLength || !this.linesDown || this.pageLineCount < 1 || this.linesDown.length <= this.pageLineCount) { @@ -454,17 +474,7 @@ class TextPage extends Vue { this.stopScrolling = false; this.doingScrolling = true; - const transitionFinish = (timeout) => { - return new Promise(async(resolve) => { - this.resolveTransitionFinish = resolve; - let wait = timeout/100; - while (wait > 0 && !this.stopScrolling) { - wait--; - await sleep(100); - } - resolve(); - }); - }; + const transitionFinish = this.generateWaitingFunc('resolveTransition1Finish', 'stopScrolling'); if (!this.toggleLayout) this.page1 = this.page2; @@ -485,13 +495,13 @@ class TextPage extends Vue { this.stopScrolling = true; } } - await transitionFinish(this.scrollingDelay + 201); + await transitionFinish(this.scrollingDelay); page.style.transition = ''; page.style.transform = 'none'; page.offsetHeight; i++; } - this.resolveTransitionFinish = null; + this.resolveTransition1Finish = null; this.doingScrolling = false; this.$emit('stop-scrolling'); } @@ -587,29 +597,8 @@ class TextPage extends Vue { if (this.currentAnimation && !this.inAnimation) { this.inAnimation = true; - let animation1Finish = (timeout) => { - return new Promise(async(resolve) => { - this.resolveAnimation1Finish = resolve; - let wait = timeout/100; - while (wait > 0 && !this.stopAnimation) { - wait--; - await sleep(100); - } - resolve(); - }); - }; - - let animation2Finish = (timeout) => { - return new Promise(async(resolve) => { - this.resolveAnimation2Finish = resolve; - let wait = timeout/100; - while (wait > 0 && !this.stopAnimation) { - wait--; - await sleep(100); - } - resolve(); - }); - }; + const animation1Finish = this.generateWaitingFunc('resolveAnimation1Finish', 'stopAnimation'); + const animation2Finish = this.generateWaitingFunc('resolveAnimation2Finish', 'stopAnimation'); const duration = Math.round(3000*(1 - this.pageChangeAnimationSpeed/100)); let page1 = this.$refs.scrollingPage1; @@ -624,6 +613,10 @@ class TextPage extends Vue { await this.drawHelper.doPageAnimationBlink(page1, page2, duration, this.pageChangeDirectionDown, animation1Finish, animation2Finish); break; + case 'rightShift': + await this.drawHelper.doPageAnimationRightShift(page1, page2, + duration, this.pageChangeDirectionDown, animation1Finish, animation2Finish); + break; } this.resolveAnimation1Finish = null;