miox-animate
v1.1.1
Published
miox-animate
Downloads
12
Readme
Miox-animate
Miox 动画引擎
使用方法:
import MioxCore from 'miox-core';
import Router from 'miox-router';
import Animate from 'miox-animate';
import { engine, webview } from 'miox-vue';
const Ro = new Router();
Ro.patch('/', async ctx => {
await ctx.render(indexPage);
});
Ro.patch('/list', async ctx => {
await ctx.render(listPage);
});
MioxCore(async app => {
app.set('animate', Animate());
app.set('engine', engine);
app.use(Ro.routes());
});
class indexPage extends webview {
constructor(el){
super(el);
}
template(){
return `<p v-forward patch="/list">Click to list page</p>`;
}
}
class listPage extends webview {
constructor(el){
super(el);
}
template(){
return `<p v-backward>Back to index page</p>`
}
}
注意事项:
动画引擎本身已经经过优化,但是由于安卓机器对dom渲染能力有限,如果webview中有大量的dom,在切换回来时会发生白屏/卡顿现象,优化方案:
- 改为 fade 动画,
app.set('animate', Animate({effect: 'fade'}));
- 对于dom较多的页面,如果边切换动画边渲染,低端机可能会有性能问题。可以将新的webview先放置空的loading,等待 webview:in 方法之后再进行初始化。