HarmonyOS应用开发入门（四）

最新推荐文章于 2024-09-12 14:31:20 发布

墨染星辰云水间

最新推荐文章于 2024-09-12 14:31:20 发布

阅读量699

点赞数 11

文章标签：华为 harmonyos

本文链接：https://blog.csdn.net/weixin_52554463/article/details/140398574

版权

一、动画

属性值的变化，通常会引起UI的变化。动画可在UI发生改变时，添加流畅的过渡效果。如果不加入动画，属性将在一瞬间完成变化。造成突兀感的同时，容易导致用户失去视觉焦点。

1、属性动画

通过设置组件animation属性来给组件添加动画，当组件的width、height、Opacity、backgroundColor、scale、rotate、translate等属性变更时，可以实现渐变过渡效果。

接口：

animation(value: {
        duration?: number, // 设置动画时长。单位为毫秒，默认动画时长为1000毫秒。
        tempo?: number, // 动画播放速度。数值越大，播放速度越快，值为0时，表示不存在动画。默认值:1
        curve?: string | Curve | ICurve, // 设置动画曲线。默认曲线为线性。默认值:Curve.Linear
        delay?:number, // 设置动画延迟执行的时长。单位为毫秒。默认值:0
        iterations: number, // 设置播放次数。默认播放一次，设置为-1时表示无限次播放。
        playMode?: PlayMode, // 设置动画播放模式，默认播放完成后重头开始播放。默认值:PlayMode.Normal
        onFinish?: () => void // 状态回调，动画播放完成时触发。

})

练习：

@Entry
@Component
struct Animation{
  // 小鱼坐标
  @State X: number = 200
  @State Y: number = 180
  // 角度
  @State angle: number = 0
  // 图片
  @State src: Resource = $r('app.media.smallfish')

  build(){
    Row(){
      Stack(){
        Image($r('app.media.fish'))

        Image(this.src)
            .position({ x: this.X-20, y: this.Y-20})
            .rotate({ angle: this.angle, centerX: '50%', centerY: '50%'})
            .width(40).height(40)
            .animation({ duration: 500 })

          // 操作按钮
          Row(){
            Button('←').backgroundColor('#20101010')
            .onClick(() => {
              this.X -= 20
              this.src = $r('app.media.smallfish')
            })
            Column({ space:40 }){
              Button('↑').backgroundColor('#20101010')
                .onClick(() => {
                  this.Y -= 20
                })
              Button('↓').backgroundColor('#20101010')
                .onClick(() => {
                  this.Y += 20
                })
            }
            Button('→').backgroundColor('#20101010')
              .onClick(() => {
                this.X += 20
                this.src = $r('app.media.rsmallfish')
              })
          }.height(240)
          .width(240)
      }
    }
  }
}

2、显示动画

通过提供全局animateTo显示动画接口，当闭包代码导致状态变化时，插入过渡动画。

animateTo(value: AnimateParam, event: () => void): void

value指定动画参数（包括时长、曲线等），event为动画的闭包函数，闭包内变量改变产生的属性动画将遵循相同的动画参数。

AnimateParam对象：

练习：

将上面的练习用显示动画实现：

            Button('↑').backgroundColor('#20101010')
                .onClick(() => {
                  animateTo(
                    {
                      duration: 500
                    },
                    () => {
                      this.Y -= 20
                    }
                  )
                })
              Button('↓').backgroundColor('#20101010')
                .onClick(() => {
                  animateTo(
                    {
                      duration: 500
                    },
                    () => {
                      this.Y += 20
                    }
                  )
                })
            }
            Button('→').backgroundColor('#20101010')
              .onClick(() => {
                animateTo(
                  {
                    duration: 500
                  },
                  () => {
                    this.X += 20
                    this.src = $r('app.media.rsmallfish')
                  }
                )
              })

3、组件转场动画

页面入场和页面退场时自定义转场效果。通过组件的transition属性来配置。

参数名称	参数类型	必填	参数描述
type	TransitionType	否	类型，默认包括组件新增和删除。默认是ALL。
opacity	number	否	不透明度，为插入时起点和删除时终点的值，默认值:1，取值范围:[0，1]。
translate	{ x?:number\|string, y?:number\|string, z?:number\|string }	否	平移效果，为插入时起点和删除时终点的值。 -x:横向的平移距离； -y:纵向的平移距离； -z:竖向的平移距离。
scale	{ x?:number\|string, y?:number\|string, z?:number\|string, centerX?:number\|string, centerY? :number\|string }	否	缩放效果，为插入时起点和删除时终点的值。 -x:横向放大倍数(或缩小比例)； -y:纵向放大倍数(或缩小比例)； -z:当前为二维显示，该参数无效。 centerX、centerY指缩放中心点，centerX和centerY默认值是"50%"。 -中心点为0时，默认的是组件的左上角。
rotate	{ x?:number\|string, y?:number\|string, z?:number\|string, angle:number\|string, centerX?:number\|string, centerY? :number\|string }	否	旋转效果。 angle是旋转角度，其它参数与scale类似。

练习：

为上面的练习加上入场动画：

@Entry
@Component
struct Animation{
  ...
  // 是否开始游戏
  @State isBegin: boolean = false

  build(){
    Row(){
      Stack(){
        Image($r('app.media.fish'))

        if (!this.isBegin){
          // 开始按钮
          Button('开始游戏')
            .onClick(() => {
              animateTo(
                {duration: 1000},
                () => {
                  this.isBegin = true
                }
              )
            })
        }else {
          Image(this.src)
            .position({ x: this.X - 20, y: this.Y - 20 })
            .rotate({ angle: this.angle, centerX: '50%', centerY: '50%' })
            .width(40).height(40)
            .transition({
              type: TransitionType.Insert,
              opacity: 0,
              translate: {x: -250}
            })
          }
        // 操作按钮
        Row() {
          ...
        }
        .height(240).width(240).justifyContent(FlexAlign.Center).position({x: 0, y: 450})
        }.height('100%')
        .width('100%')
      }
    }
}

二、Stage模型

随着系统的演进发展，先后提供了两种应用模型：

FA（Feature Ability）模型：从API 7开始支持的模型，已经不再主推。
Stage模型：从API 9开始新增的模型，是目前主推且会长期演进的模型。在该模型中，由于提供了AbilityStage、WindowStage等类作为应用组件和Window窗口的“舞台”，因此称这种应用模型为Stage模型。

1、概述

学习链接：Stage模型开发概述-Stage模型开发指导-Ability Kit（程序框架服务）-应用框架 | 华为开发者联盟 (huawei.com)

Stage模型有两类Ability：

UIAbility：负责用户界面和用户交互；
ExtensionAbility：负责UIAbility以为的事情；

HarmonyOS应用发布形态为APP，它由一个或多个HAP包及描述APP Pack属性的pack.info文件组成。HAP是Ability的部署包，它由一个或者多个Ability组成。是HormonyOS应用安装的基本单位，包括编译后的代码、资源、第三方库及配置文件，可分为Entry和Feature两种类型。

2、应用配置文件

（1）app.json5--应用的全局配置信息，包括应用包名、生产厂商、版本号等基本信息；icon可设置应用列表中的应用图标，label可设置应用列表中的应用名。

（2）module.json5--Module的配置信息，HAP包的配置信息，包含每个Ability必须定义的基本属性（如包名、类名、类型以及Ablity提供的能力）标签下的配置只对当前HAP包生效；abilities中的icon可设置桌面的应用图标，label可设置桌面的应用名称。

3、UIAbility生命周期

学习链接：UIAbility组件-Stage模型应用组件-Stage模型开发指导-Ability Kit（程序框架服务）-应用框架 | 华为开发者联盟 (huawei.com)

UIAbility组件是系统调度的基本单元，为应用提供绘制界面的窗口。一个应用可以包含一个或多个UIAbility组件。例如，在支付应用中，可以将入口功能和收付款功能分别配置为独立的UIAbility。每一个UIAbility组件实例都会在最近任务列表中显示一个对应的任务。

生命周期：Create---->Foreground<====>Background---->Destroy

Create状态为在应用加载过程中，UIAbility实例创建完成时触发，系统会调用onCreate()回调。可以在该回调中进行页面初始化操作，例如变量定义资源加载等，用于后续的UI展示。
Foreground和Background状态分别在UIAbility实例切换至前台和切换至后台时触发，对应于onForeground()回调和onBackground()回调。
Destroy状态在UIAbility实例销毁时触发。可以在onDestroy()回调中进行系统资源的释放、数据的保存等操作。

4、页面及组件生命周期

页面生命周期：

OnPageShow：页面每次显示时触发一次，包括路由过程、应用进入前台等场景。
onPageHide：页面每次隐藏时触发一次，包括路由过程、应用进入后台等场景。
onBackPress：当用户点击返回按钮时触发。

组件生命周期：

aboutToAppear：组件即将出现时回调该接口，具体时机为在创建自定义组件的新实例后，在执行其build()函数之前执行。
aboutToDisappear：aboutToDisappear函数在自定义组件析构销毁之前执行。不允许在aboutToDisappear函数中改变状态变量，特别是@Link变量的修改可能会导致应用程序行为不稳定。

5、UIAbility的启动模式

在module.json5中的abilities配置launchType。

Singleton启动模式：单实例模式，也是默认情况下的启动模式。系统中只存在唯一一个该UIAbility实例，即在最近任务列表中只存在一个该类型的UIAbility实例。
Standard启动模式：多实例模式。每次启动UIAbility都会创建一个新实例。在任务列表中可能存在一个或多个相同的UIAbility。
Specified启动模式：指定实例模式，每个UIAbility实例可以设置Key标示，启动UIAbility时，需要指定Key，存在Key相同实例直接被拉起，不存在则创建新实例。