开天辟地 HarmonyOS(鸿蒙) - 动画: 页面转场效果
开天辟地 HarmonyOS(鸿蒙) - 动画: 页面转场效果
示例如下:
pages\animation\PageTransitionDemo.ets
/*
* 页面转场效果(即页面路由切换时的动画)
*/
import { MyLog, TitleBar } from '../TitleBar';
import { router } from '@kit.ArkUI';
@Entry
@Component
struct PageTransitionDemo {
@State myScale: number = 1
@State myOpacity: number = 1
/*
* pageTransition() - 用于设置当前页面移入和移出时的转场动画
* PageTransitionEnter() - 页面移入时的转场动画
* delay - 动画的延迟播放时间(单位:毫秒)
* duration - 动画时长(单位:毫秒)
* curve - 动画曲线,即动画的缓动类型(参见 AnimationDemo.ets 中的说明)
* type - 触发 onEnter() 回调的类型(RouteType 枚举)
* Push - 页面移入是因为此页面被 push 了,则会调用 onEnter() 回调
* Pop - 页面移入是因为其他页面被 pop 了,则会调用 onEnter() 回调
* None - 以上两种情况都会调用 onEnter() 回调
* onEnter() - 页面移入过程中的回调,根据进度的不同会调用多次
* type - 页面移入的类型
* RouteType.Push 或 RouteType.Pop
* progress - 页面移入的进度
* 即页面移入时,此页面的转场动画的进度,此值在 0 - 1 之间
*
* PageTransitionExit() - 页面移出时的转场动画
* 和上面介绍的 PageTransitionEnter() 的用法是一致的
*/
pageTransition() {
PageTransitionEnter({
delay: 0,
duration: 1500,
curve: Curve.Ease,
type: RouteType.None
})
// 根据移入动画进度,自定义当前的页面的状态
.onEnter((type: RouteType, progress: number) => {
if (type == RouteType.Push || type == RouteType.Pop) {
this.myScale = progress
this.myOpacity = progress
}
})
PageTransitionExit({
delay: 0,
duration: 1500,
curve: Curve.Ease,
type: RouteType.None
})
// 根据移出动画进度,自定义当前的页面的状态
.onExit((type: RouteType, progress: number) => {
if (type == RouteType.Push || type == RouteType.Pop) {
this.myScale = 1 - progress
this.myOpacity = 1 - progress
}
})
}
build() {
Column() {
TitleBar()
Column() {
Image($r("app.media.app_icon"))
.width('80%')
.height('80%')
.objectFit(ImageFit.Fill)
.scale({ x: this.myScale, y: this.myScale })
.opacity(this.myOpacity)
.onClick(() => {
router.pushUrl({ url: 'pages/animation/PageTransitionDemo_1', params: { title: "页面转场效果_测试页 1" } })
})
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
}
}
}
pages\animation\PageTransitionDemo_1.ets
/*
* 页面转场效果(即页面路由切换时的动画)
*/
import { TitleBar } from '../TitleBar';
import { router } from '@kit.ArkUI';
@Entry
@Component
struct PageTransitionDemo_1 {
/*
* pageTransition() - 用于设置当前页面移入和移出时的转场动画
* PageTransitionEnter() - 页面移入时的转场动画
* slide() - 整个页面的滑入滑出动画(SlideEffect 枚举)
* Left, Right, Top, Bottom, START, END - 从指定的位置滑入
* translate() - 整个页面的位移动画(参见 /component/shape/TransformDemo.ets 中的说明)
* scale() - 整个页面的缩放动画(参见 /component/shape/TransformDemo.ets 中的说明)
* opacity() - 整个页面的不透明度动画
*
* PageTransitionExit() - 页面移出时的转场动画
* 和上面介绍的 PageTransitionEnter() 的用法是一致的
*/
pageTransition() {
PageTransitionEnter({
delay: 0,
duration: 1500,
curve: Curve.Ease,
type: RouteType.None
})
// 整个页面移入时的转场动画
.slide(SlideEffect.Left)
PageTransitionExit({
delay: 0,
duration: 1500,
curve: Curve.Ease,
type: RouteType.None
})
// 整个页面移出时的转场动画
.translate({ x: 100.0, y: 100.0 })
.scale({ x: 0.5, y: 0.5 })
.opacity(0)
}
build() {
Column() {
TitleBar()
Column() {
Image($r("app.media.son"))
.width('80%')
.height('80%')
.objectFit(ImageFit.Fill)
.onClick(() => {
router.pushUrl({ url: 'pages/animation/PageTransitionDemo_2', params: { title: "页面转场效果_测试页 2" } })
})
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
}
}
}
pages\animation\PageTransitionDemo_2.ets
/*
* 页面转场效果(即页面路由切换时的动画)
*/
import { TitleBar } from '../TitleBar';
import { router } from '@kit.ArkUI';
@Entry
@Component
struct PageTransitionDemo_2 {
build() {
Column() {
TitleBar()
Column() {
/*
* sharedTransition() - 页面路由切换时,相同组件的切换效果
* id - 标识
* 此标识相同的不同页面的不同组件(但是组件显示的内容是一样的),在页面路由切换时,他们之间会有一段转场动画
* options - 选项
* delay - 动画的延迟播放时间(单位:毫秒)
* duration - 动画时长(单位:毫秒)
* curve - 动画曲线,即动画的缓动类型(参见 AnimationDemo.ets 中的说明)
*/
Image($r("app.media.app_icon"))
.width('20%')
.height('20%')
.objectFit(ImageFit.Fill)
.sharedTransition('group1', {
delay: 0,
duration: 1500,
curve: Curve.Linear
})
.onClick(() => {
router.pushUrl({ url: 'pages/animation/PageTransitionDemo_3', params: { title: "页面转场效果_测试页 3" } })
})
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
}
}
}
pages\animation\PageTransitionDemo_3.ets
/*
* 页面转场效果(即页面路由切换时的动画)
*/
import { TitleBar } from '../TitleBar';
@Entry
@Component
struct PageTransitionDemo_3 {
build() {
Column() {
TitleBar()
Column() {
/*
* sharedTransition() - 页面路由切换时,相同组件的切换效果
* id - 标识
* 此标识相同的不同页面的不同组件(但是组件显示的内容是一样的),在页面路由切换时,他们之间会有一段转场动画
* options - 选项
* delay - 动画的延迟播放时间(单位:毫秒)
* duration - 动画时长(单位:毫秒)
* curve - 动画曲线,即动画的缓动类型(参见 AnimationDemo.ets 中的说明)
*/
Image($r("app.media.app_icon"))
.width('80%')
.height('80%')
.objectFit(ImageFit.Fill)
.sharedTransition('group1', {
delay: 0,
duration: 1500,
curve: Curve.Linear
})
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.Center)
}
}
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
2012-02-06 千呼万唤 HTML 5 (6) - 表单元素之 input 元素