miox-animate

1.1.1 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i miox-animate

Weekly Downloads

0

Version

1.1.1

License

MIT

Last publish

Collaborators

  • evio
  • liyangready