ArkUI转场动画的使用—学习笔记

系统
HarmonyOS eTS提供了丰富的动画组件和接口,开发者可以根据实际场景和开发需求,选用不同的组件和接口来实现不同的动画效果。

[[441281]]

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

前言

好久不见,甚是想念!最近学业上有点小忙,搁置了一个半月,但我又回来啦!好好学习,天天向上(ง •_•)ง

最近看了官方文档上“转场动画的使用(eTS)”的案例,也跟着学习了一下,顺便做点笔记O(∩_∩)O

概述

效果图如下:

#星光计划2.0#【木棉花】ArkUI转场动画的使用——学习笔记-鸿蒙HarmonyOS技术社区
#星光计划2.0#【木棉花】ArkUI转场动画的使用——学习笔记-鸿蒙HarmonyOS技术社区
#星光计划2.0#【木棉花】ArkUI转场动画的使用——学习笔记-鸿蒙HarmonyOS技术社区
#星光计划2.0#【木棉花】ArkUI转场动画的使用——学习笔记-鸿蒙HarmonyOS技术社区
#星光计划2.0#【木棉花】ArkUI转场动画的使用——学习笔记-鸿蒙HarmonyOS技术社区

正文

一.新建项目

DevEco Studio下载安装成功后,打开DevEco Studio,点击左上角的File,点击New,再选择New Project,选择Empty Ability,然后点击Next,给项目命名Animation,选择设备类型Phone,选择语言类型ets,API Version选择7,最后点击Finish

初始目录的各个文件夹和文件的作用:

index.ets:用于描述UI布局、样式、事件交互和页面逻辑。

app.ets:用于全局应用逻辑和应用生命周期管理。

pages:用于存放所有组件页面。

java:用于存放Ability等Java代码。

resources:用于存放资源配置文件,比如:国际化字符串、资源限定相关资源和rawfile资源等。

二.构建主界面

从上面效果图可以看出,主界面主要由5个相同样式的功能菜单组成,我们可以将这些菜单抽取成一个子组件Item。

1.添加图片

将所需要的图片添加到resources > rawfile目录下。

#星光计划2.0#【木棉花】ArkUI转场动画的使用——学习笔记-鸿蒙HarmonyOS技术社区

2.新建子组件

在index.ets中新建名为Item的子组件,声明子组件Item的UI布局并添加样式。创建Stack组件,包含图片和文本,然后添加文本信息和页面跳转事件,定义变量text和uri。其中text用于给Text组件设置文本信息,uri用于设置页面路由的地址。代码如下:

  1. @Component 
  2. struct Item { 
  3.   private text: string 
  4.   private uri: string 
  5.  
  6.   build() { 
  7.     Stack({ alignContent: Alignment.Center }) { 
  8.       Image($rawfile('image1.jfif')) 
  9.         .objectFit(ImageFit.Cover) 
  10.         .width('100%'
  11.         .height(100) 
  12.         .borderRadius(15) 
  13.  
  14.       Text(this.text) 
  15.         .fontSize(20) 
  16.         .fontWeight(FontWeight.Bold) 
  17.         .fontColor(Color.Black) 
  18.     } 
  19.     .onClick(() => { 
  20.       router.push({ uri: this.uri }) 
  21.     }) 
  22.     .height(100) 
  23.     .borderRadius(15) 
  24.     .width('80%'
  25.     .margin({ bottom: 20 }) 
  26.   } 

3.将子组件添加到Index组件中

将Item组件添加到Index组件中,并给Item传入参数text和uri,由于还未创建要跳转的页面,所以这里uri暂时传空字符串。

  1. @Entry  
  2. @Component  
  3. struct Index {  
  4.   build() {  
  5.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {  
  6.       Item({ text: '页面间转场:底部滑入', uri: '' })  
  7.       Item({ text: '页面间转场:自定义1', uri: '' })  
  8.       Item({ text: '页面间转场:自定义2', uri: '' })  
  9.       Item({ text: '组件内转场', uri: '' })  
  10.       Item({ text: '共享元素转场', uri: '' })  
  11.     }  
  12.     .width('100%')  
  13.     .height('100%')  
  14.     .backgroundColor('#FFECECEC')  
  15.   }  
  16. }  

三.实现页面间转场

1.文件架构

在pages目录下新建名为page的package,然后在page目录下,点击鼠标右键分别新建名为BottomTransition、CustomTransition和FullCustomTransition的三个ets文件。其中BottomTransition用于实现"页面间转场:底部滑入"动效;CustomTransition用于实现"页面间转场:自定义1"动效;FullCustomTransition用于实现"页面间转场:自定义2"动效。

新建后,打开config.json文件会看到pages标签下自动添加了BottomTransition、CustomTransition和FullCustomTransition的路由地址,如果没有的话就自己手动添加。

#星光计划2.0#【木棉花】ArkUI转场动画的使用——学习笔记-鸿蒙HarmonyOS技术社区

tips: 1.页面文件名不能使用组件名称,比如:Text.ets、Button.ets等。2.每个页面文件中必须包含入口组件。3.pages列表中第一个页面为应用的首页入口。

2.实现页面跳转

在主界面index.ets的Index组件中,将BottomTransition、CustomTransition和FullCustomTransition的路由地址赋值给对应Item的uri。

  1. import router from '@system.router'
  2. @Entry  
  3. @Component  
  4. struct Index {  
  5.   build() {  
  6.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {  
  7.       Item({ text: '页面间转场:底部滑入', uri: 'pages/page/BottomTransition' })  
  8.       Item({ text: '页面间转场:自定义1', uri: 'pages/page/CustomTransition' })  
  9.       Item({ text: '页面间转场:自定义2', uri: 'pages/page/FullCustomTransition' })  
  10.       Item({ text: '组件内转场', uri: '' })  
  11.       Item({ text: '共享元素转场', uri: '' })  
  12.     }  
  13.     .width('100%')  
  14.     .height('100%')  
  15.     .backgroundColor('#FFECECEC')  
  16.   }  

3.实现"底部滑入"动效

在BottomTransition申明pageTransition方法配置转场参数,其中PageTransitionEnter用于自定义当前页面的入场效果,PageTransitionExit用于自定义当前页面的退场效果。在这里我们设置PageTransitionEnter和PageTransitionExit的slide属性为SlideEffect.Bottom,来实现BottomTransition入场时从底部滑入,退场时从底部滑出。

  1. @Entry 
  2. @Component 
  3. struct BottomTransition{ 
  4.   build() { 
  5.     Stack() { 
  6.       Image($rawfile('image2.jfif')) 
  7.         .objectFit(ImageFit.Cover) 
  8.         .width('100%'
  9.         .height('100%'
  10.     } 
  11.     .width('100%'
  12.     .height('100%'
  13.   } 
  14.   pageTransition() { 
  15.     PageTransitionEnter({ duration: 600, curve: Curve.Smooth }) 
  16.       .slide(SlideEffect.Bottom) 
  17.     PageTransitionExit({ duration: 600, curve: Curve.Smooth }) 
  18.       .slide(SlideEffect.Bottom) 
  19.   } 

 效果如下:

#星光计划2.0#【木棉花】ArkUI转场动画的使用——学习笔记-鸿蒙HarmonyOS技术社区

4.实现"页面转场:自定义1"动效

在CustomTransition.ets的CustomTransition组件中添加Stack组件和Image组件,并且定义pageTransition方法。我实现的效果是进场淡入退场淡出。代码如下:

  1. @Entry 
  2. @Component 
  3. struct CustomTransition{ 
  4.   build() { 
  5.     Stack() { 
  6.       Image($rawfile('image3.jfif')) 
  7.         .objectFit(ImageFit.Cover) 
  8.         .width('100%'
  9.         .height('100%'
  10.     } 
  11.     .width('100%'
  12.     .height('100%'
  13.   } 
  14.   pageTransition() { 
  15.     PageTransitionEnter({ duration: 1500, curve: Curve.Smooth }) 
  16.       .opacity(0.2) 
  17.     PageTransitionExit({ duration:1000, curve: Curve.Smooth }) 
  18.       .opacity(0) 
  19.   } 

 效果如下: 

#星光计划2.0#【木棉花】ArkUI转场动画的使用——学习笔记-鸿蒙HarmonyOS技术社区

5.实现"页面转场:自定义2"动效

实现的效果:页面入场时淡入和放大,同时顺时针旋转;退场时淡出和缩小,同时逆时针旋转。

在FullCustomTransition.ets的FullCustomTransition组件中添加Stack组件和Image组件,并且定义pageTransition方法。给Stack组件添加opacity、scale、rotate属性,定义变量myProgress用来控制Stack组件的动效,在PageTransitionEnter和PageTransitionExit组件中动态改变myProgress的值。代码如下:

  1. @Entry 
  2. @Component 
  3. struct FullCustomTransition{ 
  4.   @State myProgress: number = 1 
  5.  
  6.   build() { 
  7.     Stack() { 
  8.       Image($rawfile('image2.jfif')) 
  9.         .objectFit(ImageFit.Cover) 
  10.         .width('100%'
  11.         .height('100%'
  12.     } 
  13.     .width('100%'
  14.     .height('100%'
  15.     .opacity(this.myProgress) 
  16.     .scale({ x: this.myProgress, y: this.myProgress }) 
  17.     .rotate({ x: 0, y: 0, z: 1, angle: 360 * this.myProgress }) 
  18.   } 
  19.  
  20.   pageTransition() { 
  21.     PageTransitionEnter({ duration: 1000, curve: Curve.Smooth }) 
  22.       .onEnter((type: RouteType, progress: number) => { 
  23.         this.myProgress = progress  
  24.       }) 
  25.     PageTransitionExit({ duration: 1000, curve: Curve.Smooth }) 
  26.       .onExit((type: RouteType, progress: number) => { 
  27.         this.myProgress = 1 - progress  
  28.       }) 
  29.   } 

 效果如下:

#星光计划2.0#【木棉花】ArkUI转场动画的使用——学习笔记-鸿蒙HarmonyOS技术社区

四.实现组件内转场

实现组件内转场动效,通过一个按钮来控制组件的添加和移除,呈现容器组件子组件添加和移除时的动效。组件转场主要通过transition属性方法配置转场参数,在组件添加和移除时会执行过渡动效,需要配合animteTo才能生效。动效时长、曲线、延时跟随animateTo中的配置。

1.新建文件

在pages目录下,新建名为ComponentTransition的ets文件

2.新建子组件

在ComponentTransition.ets文件中,新建ComponentItem子组件,添加Stack组件和Image组件。给Stack添加两个transition属性,分别用于定义组件的添加动效和移除动效。

  1. @Component 
  2. struct ComponentItem { 
  3.   build() { 
  4.     Stack({ alignContent: Alignment.Center }) { 
  5.       Image($rawfile('image1.jfif')) 
  6.         .objectFit(ImageFit.Cover) 
  7.         .width('100%'
  8.         .height(120) 
  9.         .borderRadius(15) 
  10.     } 
  11.     .height(120) 
  12.     .borderRadius(15) 
  13.     .width('80%'
  14.     .margin({ top: 20 }) 
  15.     .transition({ type: TransitionType.Insert, scale: { x: 0.5, y: 0.5 }, opacity: 0 }) 
  16.     .transition({ type: TransitionType.Delete, rotate: { x: 0, y: 1, z: 0, angle: 360 }, scale: { x: 0, y: 0 } }) 
  17.   } 

3.添加子组件

在ComponentTransition组件定义一个变量,用于控制ComponentItem的添加和移除,在Button组件的onClick事件中添加animateTo方法,来使ComponentItem子组件动效生效。

  1. @Entry 
  2. @Component 
  3. struct ComponentTransition { 
  4.   @State private isShow: boolean= false 
  5.  
  6.   build() { 
  7.     Column() { 
  8.       if (this.isShow) { 
  9.         ComponentItem() 
  10.       } 
  11.       ComponentItem() 
  12.       Button("Toggle"
  13.         .onClick(() => { 
  14.           animateTo({ duration: 600 }, () => { 
  15.             this.isShow = !this.isShow; 
  16.           }) 
  17.         }) 
  18.         .height(45) 
  19.         .width(200) 
  20.         .fontColor(Color.Black) 
  21.         .backgroundColor('rgb(203,155,192)'
  22.         .margin({ top: 20 }) 
  23.     } 
  24.     .padding({ left: 20, right: 20 }) 
  25.     .backgroundColor('#FFECECEC'
  26.     .height('100%'
  27.     .width('100%'
  28.   } 

 效果图如下:

#星光计划2.0#【木棉花】ArkUI转场动画的使用——学习笔记-鸿蒙HarmonyOS技术社区

五.实现元素共享转场

共享元素转场通过给组件设置sharedTransition属性来实现,两个页面的组件配置为同一个id,则转场过程中会执行共享元素转场。sharedTransition可以设置动效的时长、动画曲线和延时。

1.首先在pages目录下新建名为share的包,然后在share目录下分别新建名为ShareItem和SharePage的ets文件。其中ShareItem.ets用于展示小图,SharePage.ets用于展示大图。

#星光计划2.0#【木棉花】ArkUI转场动画的使用——学习笔记-鸿蒙HarmonyOS技术社区

 

2.在ShareItem.ets中给Image组件设置sharedTransition属性,组件转场id设置为"imageId"。

  1. import router from '@system.router' 
  2.  
  3. @Entry 
  4. @Component 
  5. struct ShareItem{ 
  6.   build() { 
  7.     Flex() { 
  8.       Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center }) { 
  9.         Stack() { 
  10.           Image($rawfile('image3.jfif')) 
  11.           // 设置共享元素转场属性 
  12.             .sharedTransition('imageId', { duration: 600, curve: Curve.Smooth, delay: 100 }) 
  13.             .onClick(() => { 
  14.               router.push({ uri: 'pages/share/SharePage' }) 
  15.             }) 
  16.             .objectFit(ImageFit.Cover) 
  17.             .height('100%'
  18.             .width('100%'
  19.             .borderRadius(15) 
  20.         } 
  21.         .height('100%'
  22.         .width('100%'
  23.  
  24.         Text('点击查看共享元素转场动效'
  25.           .fontSize(20) 
  26.           .fontColor(Color.Black) 
  27.           .fontWeight(FontWeight.Regular) 
  28.           .margin({ left: 10, right: 10 }) 
  29.  
  30.       } 
  31.       .height(120) 
  32.       .backgroundColor('rgb(181,222,224)'
  33.       .borderRadius(15) 
  34.       .margin({ top: 20 }) 
  35.     } 
  36.     .width('100%'
  37.     .padding({ left: 16, right: 16 }) 
  38.     .backgroundColor('#FFECECEC'
  39.   } 

3.在SharePage.ets中给Image组件设置sharedTransition属性,组件转场id设置为"imageId"。

  1. @Entry 
  2. @Component 
  3. struct SharePage{ 
  4.   build() { 
  5.     Stack() { 
  6.       Image($rawfile('image3.jfif')) 
  7.       // 设置共享元素转场属性 
  8.         .sharedTransition('imageId', { duration: 1000, curve: Curve.Smooth, delay: 100 }) 
  9.         .objectFit(ImageFit.Cover) 
  10.         .width('100%'
  11.         .height('100%'
  12.     } 
  13.     .width('100%'
  14.     .height('100%'
  15.   } 

 4.最后别忘在主界面添加相应路由地址。

  1. import router from '@system.router'
  2. @Entry 
  3. @Component 
  4. struct Index { 
  5.   build() { 
  6.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 
  7.       Item({ text: '页面间转场:底部滑入', uri: 'pages/page/BottomTransition' }) 
  8.       Item({ text: '页面间转场:自定义1', uri: 'pages/page/CustomTransition' }) 
  9.       Item({ text: '页面间转场:自定义2', uri: 'pages/page/FullCustomTransition' }) 
  10.       Item({ text: '组件内转场', uri: 'pages/ComponentTransition' }) 
  11.       Item({ text: '共享元素转场', uri: 'pages/share/ShareItem' }) 
  12.     } 
  13.     .width('100%'
  14.     .height('100%'
  15.     .backgroundColor('#FFECECEC'
  16.   } 

 效果图如下:

#星光计划2.0#【木棉花】ArkUI转场动画的使用——学习笔记-鸿蒙HarmonyOS技术社区

tips:1.两个页面的组件配置为同一个id,则转场过程中会执行共享元素转场,配置为空字符串时不会有共享元素转场效果。

2.在 config.json文件里在 “launchType”: "standard"后面添加以下代码就能去掉左上角的标签栏。

  1. "icon""$media:icon"
  2.         "description""$string:mainability_description"
  3.         "label""$string:entry_MainAbility"
  4.         "type""page"
  5.         "launchType""standard"
  6.         "metaData": { 
  7.           "customizeData": [ 
  8.             { 
  9.               "name""hwc-theme"
  10.               "value""androidhwext:style/Theme.Emui.Light.NoTitleBar"
  11.               "extra""" 
  12.             } 
  13.           ] 
  14.         } 

结语

以上就是我这次的小分享啦❀❀!

文章相关附件可以点击下面的原文链接前往下载

https://harmonyos.51cto.com/resource/1600

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2015-03-23 17:43:31

transitionViewControl

2021-10-12 11:07:33

动画深度Android

2022-06-01 22:41:29

转场动画鸿蒙

2022-07-08 09:55:54

CSS转场动画

2023-12-20 17:28:48

水波纹ArkUI动画开发

2024-05-31 08:43:31

2022-07-20 15:24:47

ArkUI动画效果项目开发

2011-08-16 18:13:42

IPhone开发UIView动画

2014-10-27 14:34:39

Material De转场动画

2022-09-05 15:22:27

ArkUIets

2010-08-31 16:35:59

CSS

2009-04-12 08:55:18

Symbian诺基亚移动OS

2023-08-17 15:01:08

ArkUI布局渲染

2022-09-26 12:28:16

OpenGLAPI使用移动应用

2010-05-21 11:07:36

2010-06-01 19:55:30

SVN使用

2010-07-23 14:04:43

Perl grep函数

2009-11-09 12:30:23

WCF生成代理

2009-09-01 11:28:32

C#使用函数重载

2022-03-10 14:57:35

ArkUIets项目开发鸿蒙
点赞
收藏

51CTO技术栈公众号