全栈工程师_java全栈工程师_全栈开发者学习经验总结

  • 首页
  • 开发工具
    • 软件安装
    • 软件使用
  • 前端
    • Ionic
    • Android
    • Capacitor
    • Angular
    • Vue
    • 苹果开发者账号
  • 后端
    • Java
    • Python
    • MyBatis
    • Spring
    • SpringBoot
    • SpringMVC
    • SpringCloud
  • 服务器
    • Linux
    • MySQL
    • Nginx
    • Tomcat
    • Docker
  • 其他
    • 生活碎片
    • 报错专区
  • 我
lipsuper
专注产出高质量原创手打文章
  1. 首页
  2. 前端
  3. Ionic
  4. 正文

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

2021年3月4日 2349点热度 0人点赞 0条评论

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

 

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

本作品采用 知识共享署名 4.0 国际许可协议 进行许可
标签: 保姆级指导
最后更新:2021年3月4日

lipsuper

这个人很懒,什么都没留下

点赞
< 上一篇

文章评论

取消回复

COPYRIGHT © 2021 lipsuper.com. ALL RIGHTS RESERVED.

Theme Kratos Made By Seaton Jiang

渝ICP备2021004735号-1

渝公网安备 50011202502306号