原生开发移动web单页面(step by step)7——页面切换动画

在开始写页面切换效果前，首先要介绍一下css3的animation模块，在css中定义如下

div.a {    animation: bounce 0.25s forward;
}

css3的animation定义可以声明关键名，动画时间，动画插值方式，动画的延迟以及动画完毕后的状态以及动画次数。
然后定义关键帧

@keyframes bounce {
    0% {        transform: translate(0, 20px);
    }
    100% {        transform: translate(0, 100px);
    }
}

这样子，就用css3定义完了一个动画。

然后通过js可以监听css3动画事件，然后控制动画，分别为animationstart,  animationiteration  animationend和animationcancel
animationstart事件在动画开始的时候触发
animationiteration事件在动画的时候每隔一段时间触发
animationend事件在动画结束时触发
animationcancel事件在动画未结束突然改变css导致的动画停止时触发。

现在开始设计切换模型，如下图，图一为切换页面入场动画， 图二为出场动画。

入场动画(图一)

出场动画(图二)

我们首先设置默认值，这里设置开始给全局body定义了一个app的类， 然后把改动的放置动态容器定义为app-change类， 预备的容器为app-back类， 在改变时，将动态容器和预备容器的类名为change-state类。
图一中，动态容器changeDom加入缩小隐藏page-out类， 预备容器backDom加入左移覆盖page-in类。
图二中，动态容器changeDom加入右移隐藏page-in-reverse类， 预备容器backDom加入放大覆盖page-out-reverse类。

首先现在css文件夹中新增一个app.css文件， 然后全局定义默认类别的， 如下代码

body.app {    display: flex;    flex-direction: column;    justify-content: space-around;    width: 100vw;    height: 100vh;    margin: 0;    overflow: hidden;
}.app-change,.app-back {    box-sizing: border-box;    background: white;
}.app-change {    width: 100%;    min-height: 100%;
}.app-back {    width: 100%;    min-height: 100%;    position: absolute;    z-index: -1;    transform: translate(100vw, 0);    top: 0;
}.change-state {    overflow: hidden;
}[data-action="page-in"],[data-action="page-in-reverse"] {    position: absolute;    box-sizing: border-box;    background: white;    animation: page-in .25s forwards;
}[data-action="page-in-reverse"] {    position: absolute;    box-sizing: border-box;    background: white;    animation: page-in .10s forwards;    top: 0px;
}[data-action="page-in"] {    z-index: 2;
}[data-action="page-out-reverse"] {    z-index: -1;
}[data-action="page-in-reverse"] {    animation: page-in-reverse .25s forwards;
}[data-action="page-out"] {    animation: page-out .1s forwards ease-out;
}[data-action="page-out-reverse"] {    animation: page-out-reverse .25s forwards ease-out;
}
@keyframes page-in {
    0% {        transform: translate(100vw, 0);
    }
    100% {        transform: translate(0, 0);
    }
}

@keyframes page-in-reverse {
    0% {        transform: translate(0, 0);        opacity: 1;
    }
    100% {        transform: translate(100vw, 0);        opacity: 0.5;
    }
}

@keyframes page-out {
    0% {        opacity: 1;        transform: scale(1, 1);
    }
    100% {        opacity: 0.5;        transform: scale(0.5, 0.5);
    }
}

@keyframes page-out-reverse {
    0% {        opacity: 0.5;        transform: scale(0.5, 0.5);
    }
    100% {        opacity: 1;        transform: scale(1, 1);
    }
}

然后修改app.js文件，修改app的构造函数, 增加默认动画，以及backDom和changeDom的容器

function App(options) {
    options = options || {};
    App.extend(options, {        appClass: "app",        changeClass: "app-change",        backClass: "app-back",        changeState: "change-state",        pageInReverse: "page-in-reverse",        pageOutReverse: "page-out-reverse",        pageIn: "page-in",        pageOut: "page-out"
    });    this.options = options;    this.currentPage = null;    this.staticPage = null;    this.pageContainer = null;    this.backDom = null;    this.changeDom = null;    this.routeObj = {};
}

修改initilaize的方法，这里面创建changeDom和backDom，放在布局页面中，然后将初始页放置backDom中

initialize: function (staticPage, indexPage) {    var options = this.options;
    staticPage = this.staticPage = staticPage || App.emptyPage;    var that = this;

    staticPage.render(function (html) {        var body = document.body;
        body.classList.add(options.appClass);
        body.insertAdjacentHTML("afterbegin", html);
        staticPage._initialize(body);        if (staticPage.domList.pageContainer) {
            that.pageContainer = staticPage.domList.pageContainer;
        }        else {            console.error("staticPage must have pageContainer");
        }
        that._createOptionDom();
        that.render(indexPage, true);        window.addEventListener("popstate", function (ev) {            if (ev.state && ev.state.data) {                var url = ev.state.data;                var page = that.routeObj[url];
                that._renderPage(page);
            }
        }, false);
    });
},

初始化中添加了_createOptionDom方法， 添加两个放置页面的容器。

_createOptionDom: function () {    var options = this.options;    this.changeDom = document.createElement("div");    this.changeDom.className = options.changeClass;    this.backDom = document.createElement("div");    this.backDom.className = "";    this.pageContainer.appendChild(this.changeDom);    this.pageContainer.appendChild(this.backDom);
},

修改_renderPage方法，将更改的Page实例对象放置在backDom中，然后调用_replaceDom()方法

_renderPage: function (page) {    if (this.currentPage) this.currentPage._dispose();    this.currentPage = page;
    page.app = this;    var that = this;    document.title = page.title;    var backDom = this.backDom;
    page.render(function (html) {
        backDom.innerHTML = html;
        that._replaceDom();
        page._initialize(backDom);
    });
},

接着开启动画，监听动画的事件, 在动画结束后和动画取消后取消动画事件的监听， 动画结束后调整布局， _replaceDom方法的代码如下

_replaceDom: function () {    var options = this.options;    var that = this;    this.backDom.className = options.backClass;    var tempDom = this.backDom;    this.backDom = this.changeDom;    this.changeDom = tempDom;    this.pageContainer.classList.add(options.changeState);    if (this.isRenderBack) {        this.backDom.dataset.action = options.pageInReverse;        this.changeDom.dataset.action = options.pageOutReverse;
    }    else {        this.backDom.dataset.action = options.pageOut;        this.changeDom.dataset.action = options.pageIn;
    }    this.isRenderBack = false;    var changeDom = this.changeDom;    var changeHandler = function (ev) {
        changeDom.className = options.changeClass;
        changeDom.dataset.action = "";
        that.backDom.dataset.action = "";
        that.backDom.className = "";
        that.backDom.innerHTML = "";
        that.pageContainer.classList.remove("options.changeState");
        changeDom.removeEventListener("animationend", changeHandler, false);
        changeDom.removeEventListener("animationcancel", cancelHandler, false);
    }    var cancelHandler = function (ev) {
        changeDom.removeEventListener("animationend", changeHandler, false);
        changeDom.removeEventListener("animationcancel", cancelHandler, false);
    }
    changeDom.addEventListener("animationend", changeHandler, false);
    changeDom.addEventListener("animationcancel", cancelHandler, false);
}

这时候调用render会默认图1所示的动画方式，新增renderBack方法， 让页面以图2的动画方式切换，如下代码

renderBack: function (page, isBack) {    this.isRenderBack = true;    this.render(page, isBack);
},

定义完动画后，修改各个页面的切换页面代码，entry.js的代码如下

var entryPage = App.createPage("entry", "/serve/entry",  {    render: function (fn) {        this.fetch("/public/serve/html/entry.html", function (text) {
            fn(text);
        });
    },    getDomObj: function (dom) {        this.attachDom(".btn-group", "btnGroup", dom)
            .attachDom(".index-container", "container", dom)
            .attachSlide("container", this.startFn, this.moveFn, this.endFn)
            .attachTap("btnGroup", this.tapHandler, false);
    },    tapHandler: function (ev) {        var target = ev.target;        var action = target.dataset.action;        switch (action) {            case "register": 
                app.renderBack(registerPage);                break;            case "login": 
                app.render(loginPage);                break;
        }
    },    startFn: function (ev) {},    moveFn: function (ev) {},    endFn: function (ev) {        var speed = 1000 * ev.deltaX / ev.elapsed;        if (speed > 200) {
            app.renderBack(registerPage);
        }        else if (speed < -200) {
            app.render(loginPage);
        }
    }
});

login.js的代码

var loginPage = App.createPage("login", "/serve/login", {    render: function (fn) {        this.fetch("/public/serve/html/login.html", function (text) {
            fn(text);
        });
    },    getDomObj: function (dom) {        this.attachDom("[data-action='back']", "backBtn", dom)
            .attachDom(".login-form", "form", dom)
            .attachDom(".login-container", "container", dom)
            .attachSlide("container", this.startFn, this.moveFn, this.endFn)
            .attachTap("backBtn", this.tapBackHandler, false)
            .attachEvent("form", "submit", this.formSubmitHandler, false);
    },    tapBackHandler: function (ev) {
        app.renderBack(entryPage);
    },    formSubmitHandler: function (ev) {
        ev.preventDefault();        var form = ev.target;        var name = form.name.value;        var password = form.password.value;
        app.render(goalPage);
    },    startFn: function (ev) {},    moveFn: function (ev) {},    endFn: function (ev) {        var speed = 1000 * ev.deltaX / ev.elapsed;        if (speed > 200) {
            app.renderBack(entryPage);
        }
    }
});

regiseter的代码

    render: function (fn) {        this.fetch("/public/serve/html/register.html", function (text) {
            fn(text);
        });
    },    getDomObj: function (dom) {        this.attachDom("[data-action='back']", "backBtn", dom)
            .attachDom(".register-form", "form", dom)
            .attachDom(".register-container", "container", dom)
            .attachSlide("container", this.startFn, this.moveFn, this.endFn)
            .attachTap("backBtn", this.tapBackHandler, false)
            .attachEvent("form", "submit", this.submitHandler, false);
    },    tapBackHandler: function (ev) {
        app.render(entryPage);
    },    submitHandler: function (ev) {
        ev.preventDefault();        var form = ev.target;        var name = form.name.value;        var password = form.password.value;        var agree = form.agree.checked;        if (agree) {
            app.render(goalPage);
        }
    },    startFn: function (ev) {},    moveFn: function (ev) {},    endFn: function (ev) {        var speed = 1000 * ev.deltaX / ev.elapsed;        if (speed < -200) {
            app.render(entryPage);
        }
    }
});

加入了页面切换功能后，感觉整个单页面突然高大上起来了， 通过滑动来切换页面，让web页面更像一个真正的原生app。

总结： 这里使用了css3的animation来做动画效果， 通过切换类来改变切换效果。这里也可以改变App构造函数的options，来改变符合自己的风格切换效果。 这里只是对css3的animation的初步尝试，还有非常的应用可供挖掘。虽然看起来不错，当时点击浏览器自带的前进后退(或者调用原生的history.back()和history.forward())的时候， 发现动画不统一了， 下一篇将解决这个问题。

后续更新：下一篇就是为了解决原生后退前进导致动画不统一的问题，将引入新的History对象， 让它与浏览器的history记录一一对应，然后判断选择对应的切换效果。

作者：真五花肉
链接：https://www.jianshu.com/p/06915c0eae40