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