鸿蒙next版开发：ArkUI动画（组件内转场动画）

代码不岩机QAQ

于 2024-08-11 21:41:22 发布

阅读量955

点赞数 10

分类专栏：鸿蒙 ArkUI 文章标签： harmonyos 华为服务器鸿蒙鸿蒙系统 android

本文链接：https://blog.csdn.net/SOFTQAQ/article/details/141112488

版权

鸿蒙同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

ArkUI

27 篇文章 0 订阅

订阅专栏

🚀前言

转场动画是一种在电影、视频和演示文稿中使用的动画效果，用于平滑地切换不同的场景或幻灯片。转场动画可以增加视觉吸引力，改善观众的观看体验。

常见的转场动画包括淡入淡出、滑动、旋转、放大缩小等效果。这些动画效果可以在场景之间创建无缝的过渡，使观众感到自然流畅。

在电影中，转场动画通常用于切换不同的场景或时间段。例如，一个电影可能从一个场景中的角色身上开始，然后通过淡入淡出或滑动的效果过渡到另一个场景中的不同角色。

在视频编辑软件和演示文稿软件中，转场动画常用于创建幻灯片之间的过渡效果。这些过渡可以使幻灯片之间的切换更加流畅和有趣，从而吸引观众的注意力。

转场动画的选择应根据媒体类型、主题和受众类型来进行，以确保动画效果与内容相匹配，并增强用户体验。

🚀一、组件内转场动画

转场动画的接口为：

transition(value: TransitionOptions)

transition函数的入参为组件内转场的效果，可以定义平移、透明度、旋转、缩放这几种转场样式的单个或者组合的转场效果，必须和animateTo一起使用才能产生组件转场效果。

🔎1.transition常见用法

在HarmonyOS中，transition（过渡）是指在UI界面的元素之间进行平滑的动画切换的一种功能。在过渡中，可以定义元素的插入、删除、移动等动画效果。TransitionType是用来指定过渡类型的枚举值，包括以下三种类型：

TransitionType.All：表示在过渡中包含所有类型的动画效果，包括插入、删除和移动。当使用TransitionType.All时，所有相关元素的过渡动画都会被应用。
TransitionType.Insert：表示只在过渡中包含插入类型的动画效果。当新的元素被插入到UI界面中时，使用TransitionType.Insert可以定义其出现的动画效果。
TransitionType.Delete：表示只在过渡中包含删除类型的动画效果。当元素被从UI界面中删除时，使用TransitionType.Delete可以定义其消失的动画效果。

通过使用这些过渡类型，开发者可以在HarmonyOS应用中实现更加流畅、吸引人的界面切换效果。

Button()
  .transition({ type: TransitionType.All, scale: { x: 0, y: 0 } })
Button()
  .transition({ type: TransitionType.Insert, translate: { x: 200, y: -200 }, opacity: 0 })
  .transition({ type: TransitionType.Delete, rotate: { x: 0, y: 0, z: 1, angle: 360 } })

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

🦋2.1 无任何动画

@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';
          }
          // 点击Button控制Image的显示和消失
          this.flag = !this.flag;
        })
      if (this.flag) {
          Image($r('app.media.mountain')).width(200).height(200)
      }
    }.height('100%').width('100%')
  }
}

在这里插入图片描述

🦋2.2 无任何动画

@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';
          }

          animateTo({ duration: 1000 }, () => {
            // 动画闭包内控制Image组件的出现和消失
            this.flag = !this.flag;
          })
        })
      if (this.flag) {
        // Image的出现和消失配置为不同的过渡效果
        Image($r('app.media.img_2')).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%')
  }
}

在这里插入图片描述

🔎3.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) => {
          // 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 }, () => {
            // 往数组头部插入一个元素，导致ForEach在头部增加对应的组件
            this.numbers.unshift(this.startNumber.toString());
            this.startNumber++;
          })
        })
      Button('向尾部添加元素')
        .width(160)
        .fontSize(16)
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            // 往数组尾部插入一个元素，导致ForEach在尾部增加对应的组件
            this.numbers.push(this.startNumber.toString());
            this.startNumber++;
          })
        })
      Button('删除头部元素')
        .width(160)
        .fontSize(16)
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            // 删除数组的头部元素，导致ForEach删除头部的组件
            this.numbers.shift();
          })
        })
      Button('删除尾部元素')
        .width(160)
        .fontSize(16)
        .onClick(() => {
          animateTo({ duration: 1000 }, () => {
            // 删除数组的尾部元素，导致ForEach删除尾部的组件
            this.numbers.pop();
          })
        })
    }
    .width('100%')
    .height('100%')
  }
}

在这里插入图片描述

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，

内容包含了：（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS NEXT学习资料