diff --git a/client/components/Reader/SettingsPage/SettingsPage.vue b/client/components/Reader/SettingsPage/SettingsPage.vue index a2d3af99..560112ec 100644 --- a/client/components/Reader/SettingsPage/SettingsPage.vue +++ b/client/components/Reader/SettingsPage/SettingsPage.vue @@ -381,6 +381,7 @@ + diff --git a/client/components/Reader/TextPage/DrawHelper.js b/client/components/Reader/TextPage/DrawHelper.js index da5e23b1..4d4f4f27 100644 --- a/client/components/Reader/TextPage/DrawHelper.js +++ b/client/components/Reader/TextPage/DrawHelper.js @@ -317,4 +317,34 @@ export default class DrawHelper { await animation1Finish(duration); } } + + async doPageAnimationRotate(page1, page2, duration, isDown, animation1Finish, animation2Finish) { + if (isDown) { + page1.style.transform = `rotateY(90deg)`; + await sleep(30); + + page2.style.transition = `${duration/2}ms ease-in`; + page2.style.transform = `rotateY(-90deg)`; + + await animation2Finish(duration/2); + + page1.style.transition = `${duration/2}ms ease-out`; + page1.style.transform = `rotateY(0deg)`; + await animation1Finish(duration/2); + } else { + page1.style.transform = `rotateY(-90deg)`; + await sleep(30); + + page2.style.transition = `${duration/2}ms ease-in`; + page2.style.transform = `rotateY(90deg)`; + + await animation2Finish(duration/2); + + page1.style.transition = `${duration/2}ms ease-out`; + page1.style.transform = `rotateY(0deg)`; + await animation1Finish(duration/2); + } + } + + } \ No newline at end of file diff --git a/client/components/Reader/TextPage/TextPage.vue b/client/components/Reader/TextPage/TextPage.vue index fad47665..2d45c5a0 100644 --- a/client/components/Reader/TextPage/TextPage.vue +++ b/client/components/Reader/TextPage/TextPage.vue @@ -228,6 +228,10 @@ class TextPage extends Vue { y += this.statusBarHeight*(this.statusBarTop ? 1 : 0); let page1 = this.$refs.scrollBox1; let page2 = this.$refs.scrollBox2; + + page1.style.perspective = '1200px'; + page2.style.perspective = '1200px'; + page1.style.width = this.w + this.indentLR + 'px'; page2.style.width = this.w + this.indentLR + 'px'; page1.style.height = this.scrollHeight - (pageSpace > 0 ? pageSpace : 0) + 'px'; @@ -628,7 +632,7 @@ class TextPage extends Vue { const animation1Finish = this.generateWaitingFunc('resolveAnimation1Finish', 'stopAnimation'); const animation2Finish = this.generateWaitingFunc('resolveAnimation2Finish', 'stopAnimation'); const transition1Finish = this.generateWaitingFunc('resolveTransition1Finish', 'stopAnimation'); - //const transition2Finish = this.generateWaitingFunc('resolveTransition2Finish', 'stopAnimation'); + const transition2Finish = this.generateWaitingFunc('resolveTransition2Finish', 'stopAnimation'); const duration = Math.round(3000*(1 - this.pageChangeAnimationSpeed/100)); let page1 = this.$refs.scrollingPage1; @@ -657,6 +661,10 @@ class TextPage extends Vue { page1.style.height = this.scrollHeight + this.lineHeight + 'px'; page2.style.height = this.scrollHeight + this.lineHeight + 'px'; break; + case 'rotate': + await this.drawHelper.doPageAnimationRotate(page1, page2, + duration, this.pageChangeDirectionDown, transition1Finish, transition2Finish); + break; } this.resolveAnimation1Finish = null; @@ -1192,4 +1200,5 @@ class TextPage extends Vue { 0% { opacity: 1; } 100% { opacity: 0; } } + diff --git a/client/components/Reader/versionHistory.js b/client/components/Reader/versionHistory.js index de292bdd..a8a251dc 100644 --- a/client/components/Reader/versionHistory.js +++ b/client/components/Reader/versionHistory.js @@ -7,6 +7,7 @@ export const versionHistory = [ ` diff --git a/client/store/modules/reader.js b/client/store/modules/reader.js index 92933c10..30be9bb2 100644 --- a/client/store/modules/reader.js +++ b/client/store/modules/reader.js @@ -163,7 +163,7 @@ const settingDefaults = { scrollingDelay: 3000,// замедление, ms scrollingType: 'ease-in-out', //linear, ease, ease-in, ease-out, ease-in-out - pageChangeAnimation: 'blink',// '' - нет, downShift, rightShift, thaw - протаивание, blink - мерцание + pageChangeAnimation: 'blink',// '' - нет, downShift, rightShift, thaw - протаивание, blink - мерцание, rotate - вращение, flip - перелистывание pageChangeAnimationSpeed: 80, //0-100% allowUrlParamBookPos: false,