Jelajahi Sumber

Добавлен вариант перелистывания - rotate

Book Pauk 6 tahun lalu
induk
melakukan
074ef3645f

+ 1 - 0
client/components/Reader/SettingsPage/SettingsPage.vue

@@ -381,6 +381,7 @@
                                         <el-option label="Вправо-влево" value="rightShift"></el-option>
                                         <el-option label="Протаивание" value="thaw"></el-option>
                                         <el-option label="Мерцание" value="blink"></el-option>
+                                        <el-option label="Вращение" value="rotate"></el-option>
                                     </el-select>
                                 </el-col>
                             </el-form-item>

+ 30 - 0
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);
+        }
+    }
+
+
 }

+ 10 - 1
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; }
 }
+
 </style>

+ 1 - 0
client/components/Reader/versionHistory.js

@@ -7,6 +7,7 @@ export const versionHistory = [
 <ul>
     <li>исправлен баг - падение сервера при распаковке битых архивов книг</li>
     <li>исправлен баг - не распознавались некоторые книги формата fb2 в кодировке utf8</li>
+    <li>добавлены новые варианты анимации перелистывания</li>
     <li>улучшены прогрессбары</li>
 </ul>
 `

+ 1 - 1
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,