miox-animate

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 方法之后再进行初始化。