deadcxap/liberama
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Book Pauk
2019-06-23 15:51:55 +07:00
parent 074ef3645f
commit d9c389812a
4 changed files with 37 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/components/Reader/SettingsPage/SettingsPage.vue
View File

@@ -382,6 +382,7 @@
<el-option label="Протаивание" value="thaw"></el-option>
<el-option label="Мерцание" value="blink"></el-option>
<el-option label="Вращение" value="rotate"></el-option>
<el-option v-show="wallpaper == ''" label="Листание" value="flip"></el-option>
</el-select>
</el-col>
</el-form-item>
@@ -540,6 +541,10 @@ export default @Component({
const font = (newValue ? newValue : this.fontName);
this.vertShift = this.fontShifts[font] || 0;
},
wallpaper: function(newValue) {
if (newValue != '' && this.pageChangeAnimation == 'flip')
this.pageChangeAnimation = '';
},
},
})
class SettingsPage extends Vue {

24
client/components/Reader/TextPage/DrawHelper.js
View File

@@ -346,5 +346,29 @@ export default class DrawHelper {
}
}
async doPageAnimationFlip(page1, page2, duration, isDown, animation1Finish, animation2Finish, backgroundColor) {
page2.style.background = backgroundColor;
if (isDown) {
page2.style.transformOrigin = '10%';
await sleep(30);
page2.style.transformOrigin = '0%';
page2.style.transition = `${duration}ms ease-in-out`;
page2.style.transform = `rotateY(-120deg)`;
await animation2Finish(duration);
} else {
page2.style.transformOrigin = '90%';
await sleep(30);
page2.style.transformOrigin = '100%';
page2.style.transition = `${duration}ms ease-in-out`;
page2.style.transform = `rotateY(120deg)`;
await animation2Finish(duration);
}
page2.style.transformOrigin = 'center';
page2.style.background = '';
}
}

8
client/components/Reader/TextPage/TextPage.vue
View File

@@ -229,8 +229,8 @@ class TextPage extends Vue {
let page1 = this.$refs.scrollBox1;
let page2 = this.$refs.scrollBox2;
page1.style.perspective = '1200px';
page2.style.perspective = '1200px';
page1.style.perspective = '3072px';
page2.style.perspective = '3072px';
page1.style.width = this.w + this.indentLR + 'px';
page2.style.width = this.w + this.indentLR + 'px';
@@ -665,6 +665,10 @@ class TextPage extends Vue {
await this.drawHelper.doPageAnimationRotate(page1, page2,
duration, this.pageChangeDirectionDown, transition1Finish, transition2Finish);
break;
case 'flip':
await this.drawHelper.doPageAnimationFlip(page1, page2,
duration, this.pageChangeDirectionDown, transition1Finish, transition2Finish, this.backgroundColor);
break;
}
this.resolveAnimation1Finish = null;