【鸿蒙HarmonyOS开发笔记】动画过渡效果之布局更新动画

概述

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

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


布局更新动画

显式动画(animateTo)和属性动画(animation)是ArkUI提供的最基础和常用的动画功能。在布局属性(如尺寸属性、位置属性)发生变化时,可以通过属性动画或显式动画,按照动画参数过渡到新的布局参数状态。


动画类型

显式动画

闭包内的变化均会触发动画,包括由数据变化引起的组件的增删、组件属性的变化等,可以做较为复杂的动画。

属性动画

动画设置简单,属性变化时自动触发动画。


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

显式动画的接口为:

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的点击事件中,使用animateTo函数,在闭包中修改this.myWidththis.myHeight状态变量,而这两个状态变量分别为第一个Button的宽、高属性值,所以第一个Button做了宽高动画。效果如下图。

在这里插入图片描述

另一种方式是给第二个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之后的backgroundColormargin属性无效。运行结果是width、height属性会按照animation的动画参数执行动画,而backgroundColor会直接跳变,不会产生动画。效果如下图:
在这里插入图片描述

说明

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/466421.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

怎么看一手伦敦银多少钱?

做伦敦银投资的朋友需要搞清楚“一手伦敦银多少钱”的问题,这也是伦敦银交易的基础问题。为什么需要搞清楚这个基础问题呢?有些基础问题我们不需要搞懂,但是关于一手伦敦银多少钱却需要搞清楚,因为这决定了投资者的资金利用率。 关…

Java-Java基础学习(1)-重写和多态对比分析

Java中的重写(Override)和多态(Polymorphism)是两个核心概念,它们在面向对象编程中扮演着非常重要的角色。下面我将对这两个概念进行详细的对比分析,包括它们的区别、联系以及应用场景,并附上相…

为什么关掉了公众号留言功能?

为什么公众号没有留言功能?根据要求,自2018年2月12日起,新申请的微信公众号默认无留言功能。有些人听过一个说法:公众号粉丝累计到一定程度或者原创文章数量累计到一定程度就可以开通留言功能。其实这个方法是2018年之前才可以&am…

2024年阿里云服务器所在机房位置详细说明

阿里云服务器地域和可用区有哪些?阿里云服务器地域节点遍布全球29个地域、88个可用区,包括中国大陆、中国香港、日本、美国、新加坡、孟买、泰国、首尔、迪拜等地域,同一个地域下有多个可用区可以选择,阿里云服务器网aliyunfuwuqi…

Linux应用 线程同步之自旋锁

1、概念 1.1 定义 自旋锁(Spinlock)是一种特殊的锁机制,当线程尝试获取锁而锁不可用时,线程会进入忙等待(即循环检查锁是否可用),而不是进入睡眠状态。这种机制适用于锁持有时间非常短的场景&…

深度学习指标| 置信区间、Dice、IOU、MIOU、Kappa

深度学习部分指标介绍 置信区间混淆矩阵DiceIOU和MIOUKappa 置信区间 95%CI指标 读论文的时候,常会看到一个“95%CI”的评价指标。 其中CI指的是统计学中的置信区间(Confidence interval,CI)。在统计学中,一个概率样…

用python写网络爬虫:2.urllib库的基本用法

文章目录 urllib库抓取网页data参数timeout参数更灵活地配置参数登录代理Cookies 参考书籍 建议新入门的小伙伴先看我同一专栏的文章:用python写网络爬虫:1.基础知识 urllib库 urllib是python中一个最基础的HTTP库,一般是内置的,…

Linux网络基础2

目录 实现网络版本计算器 自己定协议实现用json协议实现 重谈OSI七层模型HTTP协议 域名介绍url介绍HTTP请求和响应 实现一个简易的HTTP服务器 实现简易Http服务器初级版实现简易Http服务器中级版 实现一个简易的HTTP服务器最终版 请求方法HTTP状态码HTTP常见的Header 实现网…

【鸿蒙HarmonyOS开发笔记】常用组件介绍篇 —— Progress进度条组件

概述 Progress为进度条组件,用于显示各种进度。 参数 Progress组件的参数定义如下 Progress(options: {value: number, total?: number, type?: ProgressType})● value value属性用于设置当前进度值。 ● total total属性用于设置总值。 ● type type属…

加拿大光量子计算公司Xanadu入局英国多企业量子合作计划

内容来源:量子前哨(ID:Qforepost) 编辑丨慕一 编译/排版丨沛贤 深度好文:1200字丨8分钟阅读 英国航空发动机制造商罗尔斯罗伊斯(Rolls-Royce)、英国量子计算公司Riverlane和加拿大量子计算公…

【赠书】从深度学习到图神经网络:模型与实践

文章目录 赠书:《从深度学习到图神经网络:模型与实践》一、编辑推荐二、内容简介三、作者简介张玉宏杨铁军 四、精彩书评五、目录第1章 图上的深度学习 11.1 人工智能与深度学习 21.2 图神经网络时代的来临 61.3 图数据处理面临的挑战 91.4 图神经网络的…

AS-V1000视频监控平台如何加强系统安全,满足等保2.0规范要求

目 录 一、概述 (一)信息安全技术网络安全等级保护标准 (二)解读 1、等级保护工作的内容 2、等级保护的等级划分 3、不同等级的安全保护能力 第一级安全保护能力 第二级安全保护能力 第三级安全保护能力 第…

电子科技大学链时代工作室招新题C语言部分---题号D

1. 题目 这道题大概的意思就是对一个整形数组的元素进行排序,然后按新的顺序打印原本的下标; 例如,在题目给出的Note部分,{a1, a2, a3, a4, a5}进行排序之后变为了{a2, a1, a4, a3, a5},于是输出2 1 4 3 5。 排序的规则…

MyBatisPlus中MetaObjectHandler的使用

系列文章目录 文章目录 系列文章目录前言前言 前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站,这篇文章男女通用,看懂了就去分享给你的码吧。 起因是公司一个同事接到需求,让把一条数据录入时createTime字段,设置为…

DM数据库(docker)

docker安装 安装必要的系统工具 yum install -y yum-utils device-mapper-persistent-data lvm2 配置阿里云Docker Yum源: yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 更新yum缓存 yum makecache fast 安装docker-CE: y…

抛弃Superhuman?这些替代方案让你眼前一亮!

Superhuman是一个极好的人工智能工具在电子邮件助理领域。根据SimilarWeb的最新统计,它在全球网站排名中排名第21980位,月访问量为1751798。然而市场上还有许多其他优秀的选择。为了帮助您找到最适合您需求的解决方案,我们为您精心挑选了10种…

海淘注意事项,海淘虚拟卡

2024年海淘visa信用卡,点击获取卡片 海淘注意事项 海淘(跨境购物)可以让人们在国外购买到更多种类的商品,但是也需要注意一些事项,以确保购物的顺利进行和商品的质量。以下是一些建议: 海淘网站的选择&…

零代码编程:用kimichat合并一个文件夹下的多个文件

一个文件夹里面有很多个srt字幕文件,如何借助kimichat来自动批量合并呢? 在kimichat对话框中输入提示词: 你是一个Python编程专家,完成如下的编程任务: 这个文件夹:D:\downloads\life.on.our.planet.(202…

C++中的using关键字

1. 类型别名 using关键字可以用来为类型创建一个新的名字,这在代码的可读性和维护性方面非常有帮助。 // 定义类型别名 using IntPtr int*;// 使用 int value 5; IntPtr ptr &value;2. 命名空间别名 如果你正在使用一个非常长的命名空间,可以使…

如何在MT4平台查询自己的账户杠杆?

如何在MT4平台查询自己的账户杠杆?MT4中直接没有这个选项,犟嘴的投资者千万不要犟嘴,说可以根据保证金水平计算。其实在交易账户中有3中方法可以查询自己的账户,投资者可以在这里开立一个MT4帐户,并将其附加到具有登录名和密码的…