鸿蒙开发之两种动画

鸿蒙开发正当时，现在入手正是好时机。还在犹豫不决的朋友们，小编在这里建议大家早点入手！在这里分享一份鸿蒙学习路线图帮助那些不知道怎么入门的朋友，另外一些鸿蒙开发的资料文档也顺便分享给大家，扫下方二维码就能免费送呢！1、UI开发（ArkTS声明式开发范式）概述2、开发布局3、添加组件4、显示图片5、使用动画6、支持交互事件7、性能提升的推荐方法设置深色模式上传文件在新窗口中打开页面管理位置权限并发概

Android-海绵

1933人浏览 · 2024-05-02 09:00:00

Android-海绵 · 2024-05-02 09:00:00 发布

布局更新动画

显式动画和属性动画（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.myWidth和this.myHeight状态变量，而这两个状态变量分别为第一个Button的宽、高属性值，所以第一个Button做了宽高动画。

与此同时，第二个Button也产生了一个位置动画。这是由于第一个Button的宽高变化后，引起了Column内部其他组件的布局结果也发生了变化，第二个Button的布局发生变化也是由于闭包内改变第一个Button的宽高造成的。

如果不希望第二个Button有动画效果，有两种方式可以实现。一种是给做第一个Button外面再加一个容器，使其动画前后的大小都在容器的范围内，这样第二个Button的位置不会被第一个Button的位置所影响。修改后的核心代码如下。

Column({ space: 10 }) {
  Column() {
    // Button放在足够大的容器内，使其不影响更外层的组件位置
    Button("text")
    .type(ButtonType.Normal)
    .width(this.myWidth)
    .height(this.myHeight)
    }
    .margin(20)
    .width(200)
    .height(100)

  Button("area: click me")
    .fontSize(12)
    .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会直接跳变，不会产生动画。

使用属性动画时，会按照指定的属性动画参数执行动画。每个组件可为自己的属性配置不同参数的属性动画。
显式动画会对动画闭包前后造成的所有界面差异执行动画，且使用同一动画参数，适用于统一执行的场景。此外，显式动画也可以用于一些非属性变量造成的动画，如if/else的条件，ForEach使用的数组元素的删减。
如果一个属性配置了属性动画，且在显式动画闭包中改变该属性值，属性动画优先生效，会使用属性动画的动画参数。

最后

鸿蒙开发正当时，现在入手正是好时机。

还在犹豫不决的朋友们，小编在这里建议大家早点入手！

在这里分享一份鸿蒙学习路线图帮助那些不知道怎么入门的朋友，另外一些鸿蒙开发的资料文档也顺便分享给大家，扫下方二维码就能免费送呢！

鸿蒙学习路线图

路线图适合人群：

IT开发人员：想要拓展职业边界，享受新技术带来的溢价红利
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能

HarmonyOS 4.0 APP Developer

在这里插入图片描述

OpenHarmony 5.0 Next视音频

在这里插入图片描述

OpenHarmony 5.0 Next进阶

在这里插入图片描述

OpenHarmony 5.0 Next分布式

在这里插入图片描述

学习资料

内容概要：《鸿蒙零基础入门学习指南》、《鸿蒙开发学习之UI》、《鸿蒙开发学习之Web》、《鸿蒙开发学习之应用模型》

内容特点：条理清晰，含图像化表示更加易懂。

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙零基础入门学习指南》

一、快速入门

适用于HarmonyOS应用开发的初学者。通过构建一个简单的具有页面跳转/返回功能的应用，快速了解工程目录的主要文件，熟悉HarmonyOS应用开发流程。

开发准备
构建第一个ArkTS应用（Stage模型）
构建第一个ArkTS应用（FA模型）
构建第一个JS应用（FA模型）

二、开发基础知识

应用程序包基础知识
应用配置文件（Stage模型）
应用配置文件概述（FA模型）

三、资源分类与访问

应用开发过程中，经常需要用到颜色、字体、间距、图片等资源，在不同的设备或配置中，这些资源的值可能不同。

资源分类与访问
创建资源目录和资源文件
资源访问

四、学习ArkTs语言

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展，继承了TS的所有特性，是TS的超集。因此，在学习ArkTS语言之前，建议开发者具备TS语言开发能力。

初识ArkTS语言
基本语法
状态管理
其他状态管理
渲染控制

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙开发学习之UI》

一、方舟开发框架（ArkUI）概述

二、基于ArkTS声明式开发范式

1、UI开发（ArkTS声明式开发范式）概述
2、开发布局
3、添加组件
4、显示图片
5、使用动画
6、支持交互事件
7、性能提升的推荐方法

三、兼容JS的类Web开发范式

1、概述
2、框架说明
3、构建用户界面
4、常见组件开发指导
5、动效开发指导
6、自定义组件

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙开发学习之Web》

Web组件概述

使用Web组件加载页面

设置基本属性和事件

设置深色模式
上传文件
在新窗口中打开页面
管理位置权限

在应用中使用前端页面JavaScript

应用侧调用前端页面函数
前端页面调用应用侧函数
建立应用侧与前端页面数据通道
管理页面跳转及浏览记录导航
管理Cookie及数据存储
自定义页面请求响应
使用Devtools工具调试前端页面

ArkTS语言基础类库概述

并发

并发概述
使用异步并发能力进行开发
使用多线程并发能力
容器类库
XML生成、解析、与转换
通知

窗口管理

窗口开发概述
管理应用窗口（Stage模型）
管理应用窗口（FA模型）

WebGL

概述
WebGL开发指导

媒体

媒体应用开发概念
图片

安全

访问控制
ohos.permission.USE_BLUETOOTH
ohos.permission.DISCOVER_BLUETOOTH
ohos.permission.MANAGE_BLUETOOTH
ohos.permission.INTERNET
ohos.permission.INTERNET
…

网络与连接

网络管理
IPC与RPC通信

电话服务

电话服务开发概述
跳转拨号页面
获取当前蜂窝网络信号信息

数据管理

数据管理概述
应用数据持久化
场景介绍
运作机制
约束限制
接口说明
…

文件管理

文件管理概述
应用文件
用户文件
分布式文件系统

后台任务管理

后台任务总体概述
短时任务
长时任务
延时任务
代理提醒

设备管理

USB服务
位置服务
传感器
分布式跟踪开发指导
错误管理
…

在这里插入图片描述

国际化

国际化开发概述
Intl开发指导
I18n开发指导

应用测试

自动化测试框架使用指南

Native API相关指导

Native API在应用工程中的使用指导
Drawing开发指导
Rawfile开发指导
NativeWindow 开发指导
…

领取方式：扫描下方二维码即可免费领取！！！

《鸿蒙开发学习之应用模型》

应用模型概述

应用模型的构成要素
应用模型解读

Stage模型开发指导

Stage模型开发概述
Stage模型应用组件

FA模型开发指导

FA模型开发概述
FA模型应用组件配置
进程模型
线程模型

领取方式：扫描下方二维码即可免费领取！！！

向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

云原生

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部