Ionic项目通过自定义页面切换动画来解决页面切换卡顿的问题

ionic项目在实际运行中，页面切换过渡动画卡顿真是一个头痛的问题，之前我讲过通过禁用动画的方式来解决卡顿，那种方法非常简单，但那是一种委屈求全的方法，更好的方法是我们自定义页面切换的动画来覆盖掉系统默认的动画，这样既能解决问题，有不失美观。

操作步骤

一、创建动画文件

首先在我们项目的app目录下新建一个名为animations的文件夹来存放我们的动画文件。紧接着在这个目录下右键新建一个名为nav-animations.ts的文件，当然了，文件的名字你可以随意。接下来就打开这个文件，编写我们自己的动画代码。

代码如下：

import {Animation, AnimationController} from '@ionic/angular';

export const pageAnimation = (baseEl: HTMLElement, opts?: any): Animation => {
    // 这是动画执行的时间
    const DURATION = 300;
    const animationController = new AnimationController();

    if (opts.direction === 'forward') {
        // 也可以只定义这一个注释掉的动画
        // return animationCtl.create()
        // .addElement(opts.enteringEl)
        // .duration(DURATION)
        // .easing('ease-in') // 这是页面淡入动画
        // .fromTo('opacity', 0, 1) // 这是页面透明度从0到1过渡
        // .fromTo('transform', 'translateX(100%)', 'translateX(0)'); //这是页面沿着X轴从右侧推入的动画

        // 打开新页面，这是当前页面离开的动画
        const leavingAnimation = animationController.create()
        .addElement(opts.leavingEl)
        .duration(DURATION)
        .easing('ease-out')
        .fromTo('opacity', 1, 0)
        .fromTo('transform', 'translateX(0)', 'translateX(-100%)');

        // 这是新页面进来的动画
        const inAnimation = animationController.create()
        .addElement(opts.enteringEl)
        .duration(DURATION)
        .easing('ease-in')
        .fromTo('opacity', 0, 1)
        .fromTo('transform', 'translateX(100%)', 'translateX(0)');

        return animationController.create().addAnimation([leavingAnimation, inAnimation]);
    } else {
        // 这是点击返回按钮，上一个页面回来的动画
        const backAnimation = animationController.create()
        .addElement(opts.enteringEl)
        .duration(DURATION)
        .easing('ease-in')
        .fromTo('opacity', 0, 1)
        .fromTo('transform', 'translateX(-100%)', 'translateX(0)');

        // 这是当前页面离开的动画
        const leavingAnimation = animationController.create()
        .addElement(opts.leavingEl)
        .duration(DURATION)
        .fromTo('transform', 'translateX(0)', 'translateX(100%)')
        .easing('ease-out')
        .fromTo('opacity', 1, 0);

        return animationController.create().addAnimation([backAnimation, leavingAnimation]);
    }
};

项目结构如图：

二、引用动画文件

接下来找到项目的app.module.ts文件并在IonicModule.forRoot中引入：

代码如下（省略了一些其他的无关代码）：

...
import { pageAnimation } from './animations/nav-animations';
...
@NgModule({imports: [IonicModule.forRoot({navAnimation: pageAnimation})]
...

我的项目示意图：

接下来重新构建项目运行一下，你就能看到动画效果了，你可以按照你自己的想法来定义各种动画，具体的参数配置方法可以参照官方文档来做：https://ionicframework.com/docs/utilities/animations

通过这样的方法，我就实现了全局页面切换动画的重写，目前还不知道怎样只修改某一个页面到另一个页面动画。不过目前项目页面切换卡顿的问题就解决了，很不错。