返回发烧友论坛
发 帖  

[文章]【木棉花】ArkUI转场动画的使用——学习笔记

jf_16575311
2021-12-19 18:00:41
阅读量0
0
4


前言
好久不见，甚是想念！最近学业上有点小忙，搁置了一个半月，但我又回来啦！好好学习，天天向上(ง •_•)ง
最近看了官方文档上“转场动画的使用（eTS）”的案例，也跟着学习了一下，顺便做点笔记O(∩_∩)O
正文
1.新建项目
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资源等。
2.构建主界面
从上面效果图可以看出，主界面主要由5个相同样式的功能菜单组成，我们可以将这些菜单抽取成一个子组件Item。
1.添加图片
将所需要的图片添加到resources > rawfile目录下。

1.png


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

  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)

  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.   }
  27. }
复制代码

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. }
复制代码
3.实现页面间转场
1.文件架构在pages目录下新建名为page的package，然后在page目录下，点击鼠标右键分别新建名为BottomTransition、CustomTransition和FullCustomTransition的三个ets文件。其中BottomTransition用于实现"页面间转场：底部滑入"动效；CustomTransition用于实现"页面间转场：自定义1"动效；FullCustomTransition用于实现"页面间转场：自定义2"动效。
新建后，打开config.json文件会看到pages标签下自动添加了BottomTransition、CustomTransition和FullCustomTransition的路由地址，如果没有的话就自己手动添加。
2.png

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.   }
  17. }
复制代码
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.   }
  20. }
复制代码
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.   }
  20. }
复制代码
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

  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.   }

  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.   }
  30. }
复制代码
4.实现组件内转场实现组件内转场动效，通过一个按钮来控制组件的添加和移除，呈现容器组件子组件添加和移除时的动效。组件转场主要通过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.   }
  18. }
复制代码
3.添加子组件在ComponentTransition组件定义一个变量，用于控制ComponentItem的添加和移除，在Button组件的onClick事件中添加animateTo方法，来使ComponentItem子组件动效生效。
  1. @Entry
  2. @Component
  3. struct ComponentTransition {
  4.   @State private isShow: boolean= false

  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.   }
  29. }
复制代码
5.实现元素共享转场共享元素转场通过给组件设置sharedTransition属性来实现，两个页面的组件配置为同一个id，则转场过程中会执行共享元素转场。sharedTransition可以设置动效的时长、动画曲线和延时。
1.首先在pages目录下新建名为share的包，然后在share目录下分别新建名为ShareItem和SharePage的ets文件。其中ShareItem.ets用于展示小图，SharePage.ets用于展示大图。
3.png


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

  1. import router from '@system.router'

  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%')

  24.         Text('点击查看共享元素转场动效')
  25.           .fontSize(20)
  26.           .fontColor(Color.Black)
  27.           .fontWeight(FontWeight.Regular)
  28.           .margin({ left: 10, right: 10 })

  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.   }
  40. }
复制代码
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.   }
  16. }
复制代码
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.   }
  17. }
复制代码
结语以上就是我这次的小分享啦❀❀！
更多资料请关注我们的项目 :Awesome-Harmony_木棉花
举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友