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

这篇具有很好参考价值的文章主要介绍了鸿蒙开发-UI-动画-页面内动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

鸿蒙开发-UI-组件2

鸿蒙开发-UI-组件3

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

鸿蒙开发-UI-页面路由

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

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

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

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

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

文章目录

前言

一、概述

二、页面内动画

1.布局更新动画

1.1 使用显示动画产生布局更新动画

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

总结

前言

上文详细学习了鸿蒙开发UI使用画布绘制自定义图形的相关知识,了解画布绘制的三种方式,同时学习了画布组件的常用用法,以及如何绘制规则、不规则图形、图片图像等,本文将学习鸿蒙开发UI动画

一、概述

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

ArkUI动画:改变属性值+指定动画参数(动画时长、变化规律(即曲线)等参数)。当属性值发生变化后,按照动画参数,从原来的状态过渡到新的状态,即形成一个动画。

ArkUI提供的动画能力按照页面的分类方式,可分为页面内的动画和页面间的动画。

鸿蒙开发-UI-动画-页面内动画,鸿蒙开发,harmonyos,ui,华为

按照基础能力分,可分为属性动画、显式动画、转场动画三部分

鸿蒙开发-UI-动画-页面内动画,鸿蒙开发,harmonyos,ui,华为

二、页面内动画

1.布局更新动画

鸿蒙开发-UI-动画-页面内动画,鸿蒙开发,harmonyos,ui,华为

1.1 使用显示动画产生布局更新动画

显示动画接口

//第一个参数指定动画参数,第二个参数为动画的闭包函数。
animateTo(value: AnimateParam, event: () => void): void

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

@Entry
@Component
struct LayoutChange {
  //step1:定义用于控制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(() => {
        //step2:设置动画参数:时长为1000ms,曲线为EaseInOut
        animateTo({ duration: 1000, curve: Curve.EaseInOut }, () => {
          this.alignIndex = (this.alignIndex + 1) % this.allAlign.length;
          //step3:改变属性:在闭包函数中修改this.itemAlign参数,使Column容器内部孩子的布局方式变化,使用动画过渡到新位置
          this.itemAlign = this.allAlign[this.alignIndex];
        });
      })
    }
    .width("100%")
    .height("100%")
  }
}

除了直接改变布局方式外,也可直接修改组件的宽、高、位置,来实现动画效果

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

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

属性动画接口

//参数指定动画参数。
animation(value: AnimateParam)

代码示例,在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)
//step1: 在type、width、height属性之后添加animation属性,只有type、width、height属性变更,button组件才有指定的动画(时长为1000ms,曲线为Ease)效果
        .animation({ duration: 1000, curve: Curve.Ease })
        // animation对下面的backgroundColor、margin属性不生效
        .backgroundColor(this.myColor)
        .margin(20)
        

      Button("area: click me")
        .fontSize(12)
        .onClick(() => {
//step2: 改变属性值,配置了属性动画的属性会进行动画过渡
          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;
        })
    }
  }
}

注:

1. 属性动画会按照指定的属性动画参数执行动画。每个组件可为自己的属性配置不同参数的属性动画。

2. 显式动画会对动画闭包前后造成的所有界面差异执行动画,且使用同一动画参数,适用于统一执行的场景。显式动画也可以用于一些非属性变量造成的动画,如if/else的条件,ForEach使用的数组元素的删减。

3. 如果一个属性配置了属性动画,且在显式动画闭包中改变该属性值,属性动画优先生效,会使用属性动画的动画参数。


总结

本文细学习了鸿蒙开发UI使用动画相关知识,了解动画的两个维度的分类方式,详细学习了页面内动画-布局更新动画,下文将学习组件内转场动画。文章来源地址https://www.toymoban.com/news/detail-838589.html

到了这里,关于鸿蒙开发-UI-动画-页面内动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • HarmonyOS鸿蒙基于Java开发: Java UI 多模输入开发

    目录 约束与限制 场景介绍 接口说明 开发步骤 HarmonyOS旨在为开发者提供NUI(Natural User Interface)的交互方式。有别于传统操作系统的输入划分方式,在HarmonyOS上,我们将多种维度的输入整合在一起,开发者可以借助应用程序框架、系统自带的UI组件或API接口轻松地实现具有多

    2024年01月20日
    浏览(48)
  • HarmonyOS鸿蒙基于Java开发: Java UI 自定义布局

    当Java UI框架提供的布局无法满足需求时,可以创建自定义布局,根据需求自定义布局规则。 Component类相关接口  表1  Component类相关接口 接口名称 作用 setEstimateSizeListener 设置测量组件的侦听器 setEstimatedSize 设置测量的宽度和高度 onEstimateSize 测量组件的大小以确定宽度和高度

    2024年02月19日
    浏览(51)
  • HarmonyOS学习路之开发篇—Java UI框架(动画开发)

    动画是组件的基础特性之一,精心设计的动画使UI变化更直观,有助于改进应用程序的外观并改善用户体验。Java UI框架提供了帧动画、数值动画和属性动画,并提供了将多个动画同时操作的动画集合。 帧动画是利用视觉暂留现象,将一系列静止的图片按序播放,给用户产生动

    2024年02月09日
    浏览(47)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 ScrollView

    目录 支持的XML属性 创建ScrollView 设置ScrollView 根据像素数平滑滚动 平滑滚动到指定位置 设置布局方向 设置回弹效果

    2024年01月18日
    浏览(45)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 RadioButton

    目录 支持的XML属性 创建RadioButton 设置RadioButton 设置单选按钮的字体颜色 设置状态标志样式 RadioButton用于多选一的操作,需要搭配RadioContainer使用,实现单选效果。 RadioButton的共有XML属性继承自:Text RadioButton的自有XML属性见下表: 表1  RadioButton的自有XML属性

    2024年01月24日
    浏览(47)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件Switch

    目录 支持的XML属性 创建Switch 设置Switch Switch是切换单个设置开/关两种状态的组件。 Switch的共有XML属性继承自:Text Switch的自有XML属性见下表: 表1  Switch的自有XML属性 属性名称 中文描述 取值 取值说明 使用案例 text_state_on

    2024年01月18日
    浏览(55)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 WebView

    目录 WebView的使用方法 浏览网页历史记录 使用JavaScript 观测Web状态 观测浏览事件 定制网址加载行为 加载资源文件或本地文件 WebView提供在应用中集成Web页面的能力。 说明 请使用真机

    2024年01月20日
    浏览(44)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 ListContainer

    目录 支持的XML属性 ListContainer的使用方法 ListContainer的常用接口 ListContainer的样式设置 ListContainer性能优化 ListContainer是用来呈现连续、多行数据的组件,包含一系列相同类型的列表项。 ListContainer的共有XML属性继承自:Component ListContainer的自有XML属性见下表: 表1  ListContainer的

    2024年01月20日
    浏览(50)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件 PageSliderIndicator

    目录 PageSliderIndicator的创建和使用 PageSliderIndicator的常用方法 关联PageSlider 响应页面切换事件 设置所选导航点的页面位置 设置导航点的背景 设置导航点之间的偏移量 PageSliderIndicator,

    2024年01月16日
    浏览(41)
  • HarmonyOS鸿蒙基于Java开发:Java UI 常用组件TimePicker

    目录 支持的XML属性 使用TimePicker 显示样式配置 范围选择设置 TimePicker主要供用户选择时间。 TimePicker的共有XML属性继承自:StackLayout TimePicker的自有XML属性见下表: 表1  TimePicker的自有XML属性 属性名称 中文描述 取值 取值说明

    2024年02月21日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包