鸿蒙开发-UI-动画-组件内转场动画

鸿蒙布道

已于 2024-03-11 16:18:02 修改

阅读量815

点赞数 9

分类专栏：鸿蒙开发文章标签： harmonyos ui 华为

于 2024-03-11 16:17:37 首次发布

本文链接：https://blog.youkuaiyun.com/u013488266/article/details/136622513

版权

鸿蒙开发专栏收录该内容

42 篇文章

订阅专栏

鸿蒙开发-UI-组件3

鸿蒙开发-UI-气泡/菜单

鸿蒙开发-UI-页面路由

鸿蒙开发-UI-组件导航-Navigation

鸿蒙开发-UI-组件导航-Tabs

鸿蒙开发-UI-图形-图片

鸿蒙开发-UI-图形-绘制几何图形

鸿蒙开发-UI-图形-绘制自定义图形

鸿蒙开发-UI-图形-页面内动画

文章目录

前言

上文细学习了鸿蒙开发UI使用动画相关知识，了解动画的两个维度的分类方式，详细学习了页面内动画-布局更新动画，本文将学习组件内转场动画。

一、基本概念

组件的插入、删除过程即为组件本身的转场过程，组件的插入、删除动画称为组件内转场动画，通过组件内转场动画定义组件出现、消失的效果。

组件内转场动画的接口

transition(value: TransitionOptions)

二、组件内转场动画

1.if/else产生组件内转场动画

代码示例

@Entry
@Component
struct IfElseTransition {
  @State flag: boolean = true;
  @State show: string = 'show';

  build() {
    Column() {
      Button(this.show).width(80).height(30).margin(30)
        .onClick(() => {
          if (this.flag) {
            this.show = 'hide';
          } else {
            this.show = 'show';
          }
//step2: 在animateTo闭包中改变flag的值,由flag变化所引起的Image组件的插入删除，都要按照动画参数产生动画         
          animateTo({ duration: 1000 }, () => {

            this.flag = !this.flag;
          })
        })
      if (this.flag) {
//step1：Image组件是由if控制的组件，给其加上transition的参数，以指定组件内转场的具体效果
//TransitionType.Insert【插入时加上平移效果】
//TransitionType.Delete【删除时加上缩放和透明度效果】

        Image($r('app.media.mountain')).width(200).height(200)
          .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 } })
          .transition({ type: TransitionType.Delete, opacity: 0, scale: { x: 0, y: 0 } })
      }
    }.height('100%').width('100%')
  }
}

注：transition必须配合animateTo一起使用，在animateTo的闭包中，控制组件的插入、删除并指定指定动画参数，transition定义动画样式

2.ForEach产生组件内转场动画

代码示例

@Entry
@Component
struct ForEachTransition {
  @State numbers: string[] = ["1", "2", "3", "4", "5"]
  startNumber: number = 6;

  build() {
    Column({ space: 10 }) {
      Column() {
        ForEach(this.numbers, (item) => {
//step1： ForEach下的直接组件需配置transition效果
          Text(item)
            .width(240)
            .height(60)
            .fontSize(18)
            .borderWidth(1)
            .backgroundColor(Color.Orange)
            .textAlign(TextAlign.Center)
            .transition({ type: TransitionType.All, translate: { x: 200 }, scale: { x: 0, y: 0 } })
        }, item => item)
      }
      .margin(10)
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Center)
      .width("90%")
      .height("70%")

      Button('向头部添加元素')
        .fontSize(16)
        .width(160)
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
//step2： 在animateTo的闭包中控制组件的插入或删除
//往numbers数组头部插入一个元素，导致ForEach在头部增Text组件
//部增Text组件按照transition定义的样式实现组件转场动画效果
            this.numbers.unshift(this.startNumber.toString());
            this.startNumber++;
          })
        })
     

    }
    .width('100%')
    .height('100%')
  }
}

注：Column布局方式设为了FlexAlign.Start，即垂直方向从头部开始布局。

1. 往数组末尾添加元素时，并不会对数组中现存元素对应的组件位置造成影响，只会触发新增组件的插入动画。

2. 往数组头部添加元素时，原来数组中的所有元素的下标都增加了，虽然不会触发其添加或者删除，但是会影响到对应组件的位置。所以除新增的组件会做transition动画以外，之前存在于ForEach中组件也会做位置动画。