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

This commit is contained in:
Book Pauk
2019-06-23 14:13:59 +07:00
parent cc3aa413e8
commit 074ef3645f
5 changed files with 43 additions and 2 deletions

View File

@@ -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>

View File

@@ -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);
}
}
}

View File

@@ -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>

View File

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

View File

@@ -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,