AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

鸿蒙开发：简单了解属性动画

2024-12-30 118
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 无论是是使用animateTo还是animation，其实最终要改变的都是组件的可执行属性，最终的效果是一致的，animateTo是闭包内改变属性引起的界面变化，一般作用于出现消失转场，而animation则是组件通过属性接口绑定的属性变化引起的界面变化，一般使用场景为，animateTo适用对多个可动画属性配置相同动画参数的动画，需要嵌套使用动画的场景；animation适用于对多个可动画属性配置不同参数动画的场景。

前言

运行环境：基于HarmonyOs NEXT

DevEco Studio：Build Version: 5.0.3.900

API：12

modelVersion：5.0.0


什么是属性动画呢？字面之义就是让属性产生动画，产生某些可执行的动作，使其和原有的UI形态发生了根本的变化，当然了，其本身也类似这层意思；属性动画中，我们需要知道，并不是所有的属性都可以执行动画操作，比如一个组件，设置焦点控制，禁用控制，改变的只是动作状态，而本身的UI形态并没有发生变化，所以并不能执行动画，也就不属于动画属性。

是否定义为一个可执行动画属性，有两个标准，第一个是改变它能够使其UI发生变化，比如宽高，内边距，外边距属性，第二就是，改变它，可以添加动画作为过渡，不做动画，又何谈属性动画呢，是吧。


常见的可执行动画属性，如下：


分类

说明

布局属性

位置、大小、内边距、外边距、对齐方式、权重等。

仿射变换

平移、旋转、缩放、锚点等。

背景

背景颜色、背景模糊等。

内容

文字大小、文字颜色，图片对齐方式、模糊等。

前景

前景颜色等。

Overlay

Overlay属性等。

外观

透明度、圆角、边框、阴影等。


实现属性动画


属性动画最注重的就是两点，一是必须使其UI发生改变，二是能够有动画产生连续效果，目前在鸿蒙开发中，系统提供了两个可以实现属性动画的方式，使用animateTo和animation来实现。


简单举例：


使用animateTo让组件平移100，动画持续时间为1秒。


@Entry
@Component
struct Index {
  @State translateX: number = 0
  build() {
    Column() {
      Text("1")
        .width(50)
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .translate({ x: this.translateX })
      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.getUIContext()?.animateTo({ duration: 1000 }, () => {
            this.translateX = 100 //x轴移动100
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}


使用animation让组件平移100，动画持续时间为1秒。


@Entry
@Component
struct Index {
  @State translateX: number = 0
  build() {
    Column() {
      Text("1")
        .width(50)
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .translate({ x: this.translateX })
        .animation({duration:1000})
      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.translateX = 100 //x轴移动100
        })
    }
    .height('100%')
    .width('100%')
  }
}


可以看到实际效果是一样的。



当然了，除了平移属性能够实现这种效果，其实你使用margin也能实现平移的效果。


.margin({ left: this.translateX })
.animation({ duration: 1000 })


说明


需要说明的是，实现一个动画，无论是使用animation还是animateTo都是触发的动作，真正展示视觉效果，还得是可执行的属性，无论平移，缩放还是旋转。


平移动画


让一个组件产生一个平移动画，设置translate属性即可，当然，你设置offset或者margin也是可以实现的，只不过，一个是组件偏移，一个是位置的坐标偏移，我理解是大差不差的，但是还是建议使用官方的translate。


其类型参数是TranslateOptions，接收三个参数，x，y，z，分别表示在对应轴移动的距离，值为正时表示向对应轴的正向移动，值为负时表示向对应轴的反向移动。




如果你仅仅是平移，只需要XY两个值即可，因为Z值有接近观察点放大和远离观察点缩小效果，一般未有缩放效果，Z值我们可以不传递。




例如，向X轴方向平移100，向Y轴方向平移100。


@Entry
@Component
struct Index {
  @State translateX: number = 0
  @State translateY: number = 0
  build() {
    RelativeContainer() {
      Text("1")
        .width(50)
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .translate({ x: this.translateX, y: this.translateY })
        .animation({ duration: 1000 })
      Button("点击")
        .onClick(() => {
          this.translateX = 100
          this.translateY = 100
        })
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}


效果：




如果你要加上Z值，比如也设置100，我们就会看到明显的缩放动画。



缩放动画


缩放动画，可以使用scale属性进行实现，类型参数为ScaleOptions，有五个参数，分别为X，Y，Z，centerX和centerY，X轴、Y轴、Z轴为缩放比例，默认值为1，centerX和centerY为设置缩放的中心点。


简单举例，原有基础之上放大2倍。


@Entry
@Component
struct Index {
  @State translateX: number = 1
  @State translateY: number = 1
  @State translateZ: number = 1
  build() {
    RelativeContainer() {
      Text("1")
        .width(50)
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .scale({ x: this.translateX, y: this.translateY, z: this.translateZ })
        .animation({ duration: 1000 })
        .margin({ top: 100 })
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.translateX = 2
          this.translateY = 2
          this.translateZ = 2
        })
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}


效果查看：



默认系数为1，放大就比1大，缩小就比1小，centerX和centerY就是中心点，默认是组件的中点，如下图，放大两倍后，也是以中点放大两倍。



如果你更改了centerX和centerY的值，再放大时就是以更改的值作为中心点进行放大，可以看到是有明显的区别的。



旋转动画


旋转动画，可以使用rotate属性进行实现，类型参数为RotateOptions，总共有8个参数，详细介绍如下：


名称

类型

必填

说明

x

number

否

旋转轴向量x坐标。

y

number

否

旋转轴向量y坐标。

z

number

否

旋转轴向量z坐标。

angle

number | string

是

旋转角度。取值为正时相对于旋转轴方向顺时针转动，取值为负时相对于旋转轴方向逆时针转动。取值可为string类型，如'90deg'。

centerX

number | string

否

变换中心点x轴坐标。表示组件变换中心点（即锚点）的x方向坐标。

单位：vp

centerY

number | string

否

变换中心点y轴坐标。表示组件变换中心点（即锚点）的y方向坐标。

单位：vp

centerZ10+

number

否

z轴锚点，即3D旋转中心点的z轴分量。

perspective10+

number

否

视距，即视点到z=0平面的距离。

旋转轴和旋转中心点都基于坐标系设定，组件发生位移时，坐标系不会随之移动。




正常的旋转，我们只改变角度即可，也就是按照中心点旋转，比如旋转180度。


@Entry
@Component
struct Index {
  @State angle: number = 0
  build() {
    RelativeContainer() {
      Text("1")
        .width(50)
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .rotate({ angle: this.angle})
        .animation({ duration: 1000 })
        .margin({ top: 100 })
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.angle = 180
        })
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}


效果查看：



当然了，你也可以通过改变中心点，或者坐标点，实现想要的旋转效果。


组合动画


单一动画，我们设置单个可执行属性即可，如果是多个动画，显而易见，就是设置多个属性,比如实现一个，X轴移动100，并且旋转180度，放大1.5倍。


@Entry
@Component
struct Index {
  @State angle: number = 0
  @State translateX: number = 0
  @State scaleX: number = 1
  @State scaleY: number = 1
  @State scaleZ: number = 1
  build() {
    RelativeContainer() {
      Text("1")
        .width(50)
        .height(50)
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .rotate({ angle: this.angle })
        .translate({ x: this.translateX })
        .scale({ x: this.scaleX, y: this.scaleY, z: this.scaleZ })
        .animation({ duration: 1000 })
        .margin({ top: 100 })
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
      Button("点击")
        .margin({ top: 10 })
        .onClick(() => {
          this.translateX = 100
          this.angle = 180
          this.scaleX = 1.5
          this.scaleY = 1.5
          this.scaleY = 1.5
        })
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}


效果查看



两种属性动画介绍


无论是是使用animateTo还是animation，其实最终要改变的都是组件的可执行属性，最终的效果是一致的，animateTo是闭包内改变属性引起的界面变化，一般作用于出现消失转场，而animation则是组件通过属性接口绑定的属性变化引起的界面变化，一般使用场景为，animateTo适用对多个可动画属性配置相同动画参数的动画，需要嵌套使用动画的场景；animation适用于对多个可动画属性配置不同参数动画的场景。


相关总结


如果你要执行动画的组件，是始终存在的，那么这种情况下，是推荐使用的，如果是那种将要出现或者将要消失的组件，这里是不推荐的。


还有就是，要合理的使用属性动画，避免一些轮询机制中使用，否则会影响其它页面的组件展示效果。

文章标签：
API
关键词：
HarmonyOS开发
程序员一鸣
目录
相关文章
程序员一鸣
|
4天前
|
开发框架 JavaScript 前端开发
鸿蒙开发：什么是ArkTs？
本小结主要简单介绍了ArkTs语言的相关知识，都是一些概念性质的内容，大家作为一个了解即可
程序员一鸣
99 61
程序员一鸣
|
9天前
|
存储
鸿蒙开发：自定义一个搜索模版
这样的一个模版，可以简单的分为，三个部分，分别是上边的搜索框，中间的历史搜索和下边的热门搜索，搜索框，我们直接可以使用系统的组件Search，历史搜索，由于是内容不一的搜索的内容，这里使用弹性布局Flex，下边的热门搜索，条目规格一致，这里我们直接使用Grid网格组件。
程序员一鸣
52 23
鸿蒙开发：自定义一个搜索模版
程序员一鸣
|
1天前
|
开发者
鸿蒙开发：了解分割线
在实际的开发中，如果自带的分割线能够满足我们的需求，以自身的分割线属性为主，如果不满足，我们可以使用组件进行绘制。
程序员一鸣
33 16
鸿蒙开发：了解分割线
程序员一鸣
|
7天前
|
IDE 程序员 编译器
鸿蒙开发：ArkTs语言注释
关于注释，有一点需要注意，那就是，注释，不会被编译器或解释器执行，而本小节的重点并不是简单的教大家注释如何去写，而是在实际的项目中，我们能够真正的把注释投入到实际的开发中。
程序员一鸣
54 18
鸿蒙开发：ArkTs语言注释
程序员一鸣
|
7天前
|
传感器 存储 安全
鸿蒙开发：权限管理之权限声明
本文，主要简单概述了为什么要有权限管理，以及权限管理的声明原则，这些都是基本的概念内容，大家做为了解即可，重要的是怎么声明权限，在什么位置声明权限，这一点需要掌握。
程序员一鸣
51 16
鸿蒙开发：权限管理之权限声明
程序员一鸣
|
3天前
|
存储
鸿蒙开发：远场通信服务rcp会话问题
总体来说，问题倒不是很大，解决起来也不是很麻烦，所以啊，老铁们，在实际的开发中，对于一些官方文档，还是建议多看，这样可以提前避免后续的不必要麻烦。
程序员一鸣
28 7
鸿蒙开发：远场通信服务rcp会话问题
程序员一鸣
|
7天前
|
前端开发 JavaScript 程序员
鸿蒙开发：console日志输出
针对初学者而言，大家只需要掌握住日志打印即可，等到了鸿蒙应用开发的时候，还有一个鸿蒙原生的打印工具HiLog，到时，我们也会详细的去讲述，也会针对HiLog，封装一个通用的工具类。
程序员一鸣
42 11
鸿蒙开发：console日志输出
程序员一鸣
|
8天前
|
索引
鸿蒙开发：了解应用级配置信息
在实际的开发中，如果有共用的资源，建议大家都放到AppScope目录下，对于一些应用级别的信息，比如应用的名字，还有应用的图标，虽然说在Moulde下也可以配置，但是为了更方便的管理，这里比较推荐以AppScope目录下的app.json5为主，当然了，只是推荐，实际当中，两者都可以实现，大家选择其中一种方式即可。
程序员一鸣
40 12
鸿蒙开发：了解应用级配置信息
程序员一鸣
|
5天前
|
存储 Java 编译器
鸿蒙开发：ArkTs数据类型
最后一点是，ArkTS不支持any和unknown类型，需要显式指定具体类型，否则会报异常，具体原因是，这是ArkTS的特性之一，那就是使用静态类型；如果程序采用静态类型，即所有类型在编译时都是已知的，那么开发者就能够容易理解代码中使用了哪些数据结构。同时，由于所有类型在程序实际运行前都是已知的，编译器可以提前验证代码的正确性，从而可以减少运行时的类型检查，有助于提升性能。
程序员一鸣
46 8
鸿蒙开发：ArkTs数据类型
程序员一鸣
|
2天前
|
JSON 数据安全/隐私保护 数据格式
鸿蒙开发，远场通信服务rcp拦截器问题
关于rcp的拦截器问题，最重要的就是会话复用的时候，如果Request对象中有需要的参数，就直接用Request中的，而不是使用session中的。
程序员一鸣
25 3
鸿蒙开发，远场通信服务rcp拦截器问题

热门文章

最新文章

  • 1
    uniapp 极速上手鸿蒙开发
  • 2
    【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画（ohos.animator）书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
  • 3
    鸿蒙特效教程01-哔哩哔哩点赞与一键三连效果实现教程
  • 4
    鸿蒙开发：什么是ArkTs？
  • 5
    鸿蒙开发：wrapBuilder传递参数
  • 6
    鸿蒙web加载本地网页资源异常
  • 7
    一文彻底搞清楚HarmonyOS元服务
  • 8
    HarmonyOS NEXT 实战系列08-案例微博导航设置
  • 9
    Harmony os next～HarmonyOS Ability与页面跳转开发详解
  • 10
    鸿蒙H5离线包技术分享
  • 1
    鸿蒙相机开发实战：从设备适配到性能调优 —— 我的 ArkTS 录像功能落地手记（API 15）
    21
  • 2
    鸿蒙开发，远场通信服务rcp拦截器问题
    25
  • 3
    HarmonyOS Next～HarmonyOS应用开发工具：DevEco Testing
    19
  • 4
    HarmonyOS Next～HarmonyOS应用开发工具之AppGallery Connect
    16
  • 5
    鸿蒙开发：远场通信服务rcp会话问题
    28
  • 6
    鸿蒙特效教程01-哔哩哔哩点赞与一键三连效果实现教程
    98
  • 7
    从 0 到 1 掌握鸿蒙 AudioRenderer 音频渲染：我的自学笔记与踩坑实录（API 14）
    37
  • 8
    鸿蒙开发：什么是ArkTs？
    99
  • 9
    鸿蒙开发：权限授权封装
    24
  • 10
    鸿蒙开发：ArkTs字符串string
    56

    • 相关课程

    更多
  • 移动Web前端开发

    • 相关电子书

    更多
  • 触摸云端编程之道
  • PWA 移动Web的现在与未来
  • PWA移动Web的现在与未来
    • 下一篇
    阿里云oss简介和如何对接使用