素材巴巴 > 程序开发 >

如何在Ionic3应用程序中实现自定义页面过渡

程序开发 2023-09-20 18:28:19

Ionic是编写自己的应用程序的绝佳框架。它基于Cordova和angular,使您能够快速编写外观漂亮的应用程序而无需太多精力。

根据您用来启动应用程序的平台,Ionic甚至还带有预定义的页面过渡,以便将一个页面的导航设置为另一个页面。iOS上的标准页面转换是从左侧或右侧滑动。它看起来像这样:




然而,Ionic页面转换的文档非常令人困惑,作为一个初学者,需要一些时间来了解哪些转换应该使用哪些转换。官方文档包含NativePageTransitions模块的页面,但我建议您不要使用它。它不仅长时间没有收到任何更新,而且为了制作动画,模块会截取起始页和着陆页的截图,并为两个图像设置动画。这似乎是一种奇怪的方式来做到这一点,而未解决问题的公开问题的数量说明了一切。

您应该使用的是Ionic NavController类的集成功能,您已经使用它来在页面之间导航。默认情况下启用此功能(取决于平台),但也可以使用导航呼叫进行配置:

this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition"}); 

 

使用“animate:true”可以打开动画(这是标准设置),“animation:transition”设置用于动画页面过渡的动画。它的字符串和“转换”意味着根据当前平台使用标准转换。当你想在Android平台上使用iOS转换时,你可以像这样启动导航:

this.navCtrl.push(MyPageComponent, null, {animate: true, animation: "transition-ios"}); 

您可以像实现官方转换一样实现自己的转换类:编写扩展“ionic-angular / PageTransition”类的自己的转换类,并在离子运行时注册新的转换。没有其他可以使用的内置转换(如向下滑动,向上滑动或向外扩展),我完全没有找到如何实现自定义转换的官方文档。但是,有一种准官方的方式来实现您自己的过渡。

最基本的(空)转换如下所示:

import {NgModule} from "@angular/core";
 import {Config, IonicApp, PageTransition} from "ionic-angular";
 import {MyApp} from "./app.component";@NgModule({declarations: [MyApp],imports: [...],bootstrap: [IonicApp],entryComponents: [MyApp,...],providers: [...]
 })
 export class AppModule {constructor(private config: Config) {this.config.setTransition("emptyTransition", EmptyTransition)}
 }export class EmptyTransition extends PageTransition {init() {//here would be the implementation of your own page transition}
 }


 

在搞砸了一段时间之后,我遇到了一些我自己的页面转换:“滑动”和“向下滑动”。当您查看iOS页面转换的官方实现时,您可以看到您可以使用ionic-angular提供的Animation类定义进入和离开页面的动画。由于没有文档我不得不使用试验和错误如何找出如何使用这个类。

SlideTransition是一个左/右滑动过渡,类似于官方的“transition-ios”,但它动画整个页面内容而不仅仅是内容,而页眉和页脚元素保持固定。


然而,SlideDownTransition有点不同。它会向下滑动离开的页面内容,并在执行此操作时显示输入的页面内容。


SlideTransition经过测试,可以在向前和向后转换中工作(想想:Android后退按钮)。SlideDownTransition可能不起作用,但我没有测试它,因为我的用例不需要它工作。

令人讨厌的是,官方转换是手动控制标题组件中标准后退按钮的可见性。我不明白为什么这是在页面转换中完成而不是某种后退按钮组件。因此,我放弃了在我的应用程序中使用官方后退按钮,并在需要时始终使用我自己的按钮(情况并非总是如此)。因此,上述页面转换的实现并不关心后退按钮的可见性,因此标准后退按钮始终是不可见的。

使用Ionic Animation类,您可以定义一些开始和结束样式,然后在离子页面的页面元素上设置。样式是我们众所周知的CSS样式,不使用BrowserAnimationsModule提供的角度动画功能。实现转换相对简单,因为您可以调整之前在Web应用程序中使用的众所周知的转换的大部分代码。

但是,我希望Ionic团队至少有一些关于此功能的官方文档。


标签:

上一篇: ROS(九):坐标系统tf 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。