首页 > 其他分享 >鸿蒙开发之发动画篇

鸿蒙开发之发动画篇

时间:2024-02-01 15:31:29浏览次数:17  
标签:动画 鸿蒙 Button height width 画篇 发动 myHeight 属性

动画的原理是在一个时间段内,多次改变UI外观,由于人眼会产生视觉暂留,所以最终看到的就是一个“连续”的动画。UI的一次改变称为一个动画帧,对应一次屏幕刷新,而决定动画流畅度的一个重要指标就是帧率FPS(Frame Per Second),即每秒的动画帧数,帧率越高则动画就会越流畅。

ArkUI中,产生动画的方式是改变属性值且指定动画参数。动画参数包含了如动画时长、变化规律(即曲线)等参数。当属性值发生变化后,按照动画参数,从原来的状态过渡到新的状态,即形成一个动画。

ArkUI提供的动画能力按照页面的分类方式,可分为页面内的动画和页面间的动画。如下图所示,页面内的动画指在一个页面内即可发生的动画,页面间的动画指两个页面跳转时才会发生的动画。

图1 按照页面分类的动画

鸿蒙开发之发动画篇_harmonyos

如果按照基础能力分,可分为属性动画、显式动画、转场动画三部分。如下图所示。

图2 按照基础能力分类的动画

鸿蒙开发之发动画篇_harmonyos_02

使用显式动画产生布局更新动画

显式动画的接口为:

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

第一个参数指定动画参数,第二个参数为动画的闭包函数。

以下是使用显式动画产生布局更新动画的示例。示例中,当Column组件的alignItems属性改变后,其子组件的布局位置结果发生变化。只要该属性是在animateTo的闭包函数中修改的,那么由其引起的所有变化都会按照animateTo的动画参数执行动画过渡到终点值。

@Entry
@Component
struct LayoutChange {
  // 用于控制Column的alignItems属性
  @State itemAlign: HorizontalAlign = HorizontalAlign.Start;
  allAlign: HorizontalAlign[] = [HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End];
  alignIndex: number = 0;

  build() {
    Column() {
      Column({ space: 10 }) {
        Button("1").width(100).height(50)
        Button("2").width(100).height(50)
        Button("3").width(100).height(50)
      }
      .margin(20)
      .alignItems(this.itemAlign)
      .borderWidth(2)
      .width("90%")
      .height(200)

      Button("click").onClick(() => {
        // 动画时长为1000ms,曲线为EaseInOut
        animateTo({ duration: 1000, curve: Curve.EaseInOut }, () => {
          this.alignIndex = (this.alignIndex + 1) % this.allAlign.length;
          // 在闭包函数中修改this.itemAlign参数,使Column容器内部孩子的布局方式变化,使用动画过渡到新位置
          this.itemAlign = this.allAlign[this.alignIndex];
        });
      })
    }
    .width("100%")
    .height("100%")
  }
}

除直接改变布局方式外,也可直接修改组件的宽、高、位置。

@Entry
@Component
struct LayoutChange2 {
  @State myWidth: number = 100;
  @State myHeight: number = 50;
  // 标志位,true和false分别对应一组myWidth、myHeight值
  @State flag: boolean = false;

  build() {
    Column({ space: 10 }) {
      Button("text")
        .type(ButtonType.Normal)
        .width(this.myWidth)
        .height(this.myHeight)
        .margin(20)
      Button("area: click me")
        .fontSize(12)
        .margin(20)
        .onClick(() => {
          animateTo({ duration: 1000, curve: Curve.Ease }, () => {
            // 动画闭包中根据标志位改变控制第一个Button宽高的状态变量,使第一个Button做宽高动画
            if (this.flag) {
              this.myWidth = 100;
              this.myHeight = 50;
            } else {
              this.myWidth = 200;
              this.myHeight = 100;
            }
            this.flag = !this.flag;
          });
        })
    }
    .width("100%")
    .height("100%")
  }
}

另一种方式是给第二个Button添加布局约束,如position的位置约束,使其位置不被第一个Button的宽高影响。核心代码如下:

Column({ space: 10 }) {
  Button("text")
    .type(ButtonType.Normal)
    .width(this.myWidth)
    .height(this.myHeight)
    .margin(20)

  Button("area: click me")
    .fontSize(12)
    // 配置position属性固定,使自己的布局位置不被第一个Button的宽高影响
    .position({ x: "30%", y: 200 })
    .onClick(() => {
      animateTo({ duration: 1000, curve: Curve.Ease }, () => {
        // 动画闭包中根据标志位改变控制第一个Button宽高的状态变量,使第一个Button做宽高动画
        if (this.flag) {
          this.myWidth = 100;
          this.myHeight = 50;
        } else {
          this.myWidth = 200;
          this.myHeight = 100;
        }
        this.flag = !this.flag;
      });
    })
}
.width("100%")
.height("100%")

使用属性动画产生布局更新动画

显式动画把要执行动画的属性的修改放在闭包函数中触发动画,而属性动画则无需使用闭包,把animation属性加在要做属性动画的组件的属性后即可。

属性动画的接口为:

animation(value: AnimateParam)

其入参为动画参数。想要组件随某个属性值的变化而产生动画,此属性需要加在animation属性之前。有的属性变化不希望通过animation产生属性动画,可以放在animation之后。上面显式动画的示例很容易改为用属性动画实现。例如:

@Entry
@Component
struct LayoutChange2 {
  @State myWidth: number = 100;
  @State myHeight: number = 50;
  @State flag: boolean = false;
  @State myColor: Color = Color.Blue;

  build() {
    Column({ space: 10 }) {
      Button("text")
        .type(ButtonType.Normal)
        .width(this.myWidth)
        .height(this.myHeight)
        // animation只对其上面的type、width、height属性生效,时长为1000ms,曲线为Ease
        .animation({ duration: 1000, curve: Curve.Ease })
        // animation对下面的backgroundColor、margin属性不生效
        .backgroundColor(this.myColor)
        .margin(20)
        

      Button("area: click me")
        .fontSize(12)
        .onClick(() => {
          // 改变属性值,配置了属性动画的属性会进行动画过渡
          if (this.flag) {
            this.myWidth = 100;
            this.myHeight = 50;
            this.myColor = Color.Blue;
          } else {
            this.myWidth = 200;
            this.myHeight = 100;
            this.myColor = Color.Pink;
          }
          this.flag = !this.flag;
        })
    }
  }
}

上述示例中,第一个button上的animation属性,只对写在animation之前的type、width、height属性生效,而对写在animation之后的backgroundColor、margin属性无效。运行结果是width、height属性会按照animation的动画参数执行动画,而backgroundColor会直接跳变,不会产生动画

标签:动画,鸿蒙,Button,height,width,画篇,发动,myHeight,属性
From: https://blog.51cto.com/u_16536309/9531951

相关文章

  • 资深Android逆袭、华为鸿蒙为安卓程序员开辟了一条新道路
    本文章主要从以下5个方面来展开聊聊这个话题:1.什么是鸿蒙2.鸿蒙系统发展时间线3.鸿蒙是套壳Android吗?4.鸿蒙的生态(用户以及开发者)5.一些建议1月18日,在鸿蒙生态千帆启航仪式上,华为宣布了继鸿蒙4.0之后的鸿蒙操作系统,星河版的预览版本,引起了广泛的讨论,这是一款完全剥离安卓......
  • 鸿蒙页面示例
    @Component标签修饰UI,相当于Android的view,所有的UI组件都要使用@Component标签@Entry标签表明当前是一个页面,不是一个视图。多个组件组合时只能有一个@Entry标签,被该标签修饰后页面才会有生命周期importrouterfrom'@ohos.router'@Entry@ComponentstructLogin{@Statetit......
  • 鸿蒙知识点
    1、鸿蒙上的类似adb的工具名叫hdchdc(HarmonyOSDeviceConnector)是HarmonyOS为开发人员提供的用于调试的命令行工具,通过该工具可以在window/linux/mac系统上与真实设备或者模拟器进行交互。(1)hdclisttargets(2)hdcfilesendlocalremote(3)hdcinstallpackageFile这里列举的几个命......
  • 鸿蒙小知识点
    1、鸿蒙上的类似adb的工具名叫hdchdc(HarmonyOSDeviceConnector)是HarmonyOS为开发人员提供的用于调试的命令行工具,通过该工具可以在window/linux/mac系统上与真实设备或者模拟器进行交互。(1)hdclisttargets(2)hdcfilesendlocalremote(3)hdcinstallpackageFile这里列举的几个命......
  • 对于企业来讲鸿蒙是机会还是累赘?
    企业的IT部门,工程师永远在疲于奔命的学习新的技术技能。一轮技术革命来了,还没消化透、玩明白,下一波又来了。搞IT的人,总在说,业务功能要的太急、需求变化来的太快,应接不暇。业务部门永远是难以伺候、不能满意。这对矛盾的来源在于,技术生态的多样性多元化,和技术门槛的高居不下,无法平衡......
  • 鸿蒙二进制数组创建
    背景c++层数据都是二进制,需要转换成arrayBuffer透传到ets层给业务使用,但是鸿蒙的使用下面两个api创建出来的二进制数组数据都是错误的。接口napi_create_arraybuffer:这个接口只能创建空的二进制数组,没办法把char的内容丢进去创建napi_create_external_arraybuffer:这个接口支持......
  • 鸿蒙OS和开源鸿蒙什么关系?
    开源鸿蒙(OpenHarmony)鸿蒙系统愿来的设计初衷,就是让所有设备都可以运行一个系统,但是每个设备的运算能力和功能都不同,所以内核的设计上,采用了微内核的设计,除了最基础的功能放在内核,其他功能都以模块的形式存在。华为用的是鸿蒙OS我们都知道,华为手机的鸿蒙OS是可以运行安卓软件的,是因......
  • 鸿蒙应用/元服务开发-窗口(Stage模型)接口说明
    窗口主要场景涉及的常用接口如下表所示。本文主要参考HarmonyOS4.0官方开发文档整理......
  • 鸿蒙OS 跨设备迁移
    跨设备迁移(下文简称“迁移”)支持将Page在同一用户的不同设备间迁移,以便支持用户无缝切换的诉求。以Page从设备A迁移到设备B为例,迁移动作主要步骤如下:设备A上的Page请求迁移。HarmonyOS处理迁移任务,并回调设备A上Page的保存数据方法,用于保存迁移必须的数据。Harmon......
  • 如何看待开发者是否需要入坑鸿蒙?
    前言自打华为2019年发布鸿蒙操作系统以来,网上各种声音百家争鸣。尤其是2023年发布会公布的鸿蒙4.0宣称不再支持Android,更激烈的讨论随之而来。通过本文,我将给大家介绍以下几点,让大家清楚的了解到鸿蒙开发的趋势:1.HarmonyOS与OpenHarmony区别2.移动开发现状3.鸿蒙开发优劣势......