【鸿蒙next开发】ArkUI框架：ArkTS组件-图形变换

最新推荐文章于 2025-05-13 18:24:18 发布
最新推荐文章于 2025-05-13 18:24:18 发布
阅读量521 收藏 21
点赞数 16
分类专栏： ArkTS组件 ArkUI框架 鸿蒙5.0开发 文章标签： harmonyos 华为 ArkTS ArkUI android 鸿蒙系统 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73088370/article/details/147922690
版权

 往期鸿蒙5.0全套实战文章必看：（文中附带鸿蒙5.0全栈学习资料）

图形变换

用于对组件进行旋转、平移、缩放、矩阵变换等操作。

说明

从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。

rotate

rotate(value: RotateOptions)

设置组件旋转。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueRotateOptions是

可使组件在以组件左上角为坐标原点的坐标系中进行旋转（坐标系如下图所示）。其中，(x, y, z）指定一个矢量，作为旋转轴。

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

默认值: 在x、y、z都不指定时，x、y、z的默认值分别为0、0、1。指定了x、y、z任何一个值时，x、y、z中未指定的值默认为0。

{

centerX: '50%',

centerY: '50%'

centerZ: 0,

perspective: 0

}

单位：vp

centerZ、perspective从API version 10开始支持在ArkTS卡片中使用。

translate

translate(value: TranslateOptions)

设置组件平移。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueTranslateOptions是

可使组件在以组件左上角为坐标原点的坐标系中进行移动（坐标系如下图所示）。其中，x，y，z的值分别表示在对应轴移动的距离，值为正时表示向对应轴的正向移动，值为负时表示向对应轴的反向移动。移动距离支持数字和字符串（比如'10px'，‘10%’）两种类型。

默认值:

{

x: 0,

y: 0,

z: 0

}

单位：vp

说明：

z轴方向移动时由于观察点位置不变，z的值接近观察点组件会有放大效果，远离则缩小。

scale

scale(value: ScaleOptions)

设置组件缩放。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueScaleOptions是

可以分别设置X轴、Y轴、Z轴的缩放比例，默认值为1，同时可以通过centerX和centerY设置缩放的中心点。

默认值:

{

x: 1,

y: 1,

z: 1,

centerX:'50%',

centerY:'50%'

}

transform

transform(value: object)

设置组件的变换矩阵。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名类型必填说明
valueobject是设置当前组件的变换矩阵。object当前仅支持Matrix4Transit矩阵对象类型。

RotateOptions对象说明

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
xnumber否

旋转轴向量x坐标。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

ynumber否

旋转轴向量y坐标。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

znumber否

旋转轴向量z坐标。

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

anglenumber | string是

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

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

centerXnumber | string否

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

单位：vp

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

centerYnumber | string否

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

单位：vp

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

centerZ10+number否

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

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

perspective10+number否

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

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

卡片能力： 从API version 10开始，该接口支持在ArkTS卡片中使用。

TranslateOptions对象说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
xnumber | string否x轴的平移距离。
ynumber | string否y轴的平移距离。
znumber | string否z轴的平移距离。

ScaleOptions对象说明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。

元服务API： 从API version 11开始，该接口支持在元服务中使用。

系统能力： SystemCapability.ArkUI.ArkUI.Full

名称类型必填说明
xnumber否x轴的缩放倍数。x>1时以x轴方向放大，0<x<1时以x轴方向缩小，x<0时沿x轴反向并缩放。
ynumber否y轴的缩放倍数。y>1时以y轴方向放大，0<y<1时以y轴方向缩小，y<0时沿y轴反向并缩放。
znumber否z轴的缩放倍数。z>1时以z轴方向放大，0<z<1时以z轴方向缩小，z<0时沿z轴反向并缩放。
centerXnumber | string否

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

单位：vp

centerYnumber | string否

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

单位：vp

说明

当组件同时设置了rotate和scale属性时，centerX和centerY的取值会发生冲突，此时centerX和centerY的值以最后设定的属性的值为准。

示例

示例1（为组件添加图形变换效果）

该示例通过rotate、translate、scale、transform为组件添加旋转、平移、缩放、变换矩阵效果。

// xxx.ets
import { matrix4 } from '@kit.ArkUI';

@Entry
@Component
struct TransformExample {
  build() {
    Column() {
      Text('rotate').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
      Row()
        .rotate({
          x: 0,
          y: 0,
          z: 1,
          centerX: '50%',
          centerY: '50%',
          angle: 300
        })// 组件以矢量(0,0,1)为旋转轴，绕中心点顺时针旋转300度
        .width(100).height(100).backgroundColor(0xAFEEEE)

      Text('translate').width('90%').fontColor(0xCCCCCC).padding(10).fontSize(14)
      Row()
        .translate({ x: 100, y: 10 })// x轴方向平移100，y轴方向平移10
        .width(100)
        .height(100)
        .backgroundColor(0xAFEEEE)
        .margin({ bottom: 10 })

      Text('scale').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
      Row()
        .scale({ x: 2, y: 0.5 })// 高度缩小一倍，宽度放大一倍，z轴在2D下无效果
        .width(100).height(100).backgroundColor(0xAFEEEE)

      Text('Matrix4').width('90%').fontColor(0xCCCCCC).padding(15).fontSize(14)
      Row()
        .width(100).height(100).backgroundColor(0xAFEEEE)
        .transform(matrix4.identity().translate({ x: 50, y: 50 }).scale({ x: 1.5, y: 1 }).rotate({
          x: 0,
          y: 0,
          z: 1,
          angle: 60
        }))
    }.width('100%').margin({ top: 5 })
  }
}

示例2（设置旋转视距）

该示例通过perspective为组件添加视距效果。

// xxx.ets
@Entry
@Component
struct Index {
  @State prep: number = 10;

  build() {
    Row() {
      Column() {
        Stack()
          .width(100)
          .height(100)
          .backgroundColor(Color.Red)
          .rotate({ y: 1, angle: 45, perspective: this.prep })
        Button('change prep')
          .margin({ top: 100 })
          .onClick(() => {
            animateTo({
              duration: 2000,
              curve: Curve.EaseIn,
              iterations: 1,
              playMode: PlayMode.Normal,
              onFinish: () => {
                console.info('play end')
              }
            }, () => {
              this.prep = 500 // 组件视距从10变换到500
            })
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

示例3（按中心点旋转）

该示例通过设置rotate和transform为不同的参数实现相同的旋转效果。

import { matrix4 } from '@kit.ArkUI'

@Entry
@Component
struct MatrixExample {
  build() {
    Column({ space: 100 }) {
      Text('Hello1')
        .textAlign(TextAlign.Center)
        .width(100)
        .height(60)
        .borderWidth(1)

      Text('Hello2')
        .textAlign(TextAlign.Center)
        .width(100)
        .height(60)
        .borderWidth(1)
        .rotate({
          // 绕(100vp,60vp)的锚点旋转90度，rotate或scale的centerX、centerY为组件锚点
          z: 1,
          angle: 90,
          centerX: 100,
          centerY: 60
        })

      Text('Hello3')
        .textAlign(TextAlign.Center)
        .width(100)
        .height(60)
        .borderWidth(1)
        .transform(matrix4.identity()
          .rotate({
            // 组件锚点(centerX,centerY)默认为(50%,50%)，即锚点在(50vp,30vp)
            // transform的rotate指定(centerX,centerY)为(50vp,30vp)，相对于在组件本身锚点基础上再额外偏移(50vp,30vp)
            // 此次变换相当于绕(100vp,60vp)旋转，和"Hello2"实现同样的旋转效果
            z: 1,
            angle: 90,
            centerX: vp2px(50),
            centerY: vp2px(30)
          }))

      Text('Hello4')
        .textAlign(TextAlign.Center)
        .width(100)
        .height(60)
        .borderWidth(1)
        .scale({
          // 当设置x或y时，centerX和centerY才能生效
          // 设置组件锚点为(100vp,60vp)
          x: 1,
          y: 1,
          centerX: 100,
          centerY: 60
        })// transform的rotate不指定centerX、centerY，此次旋转的中心相对于组件本身锚点没有额外偏移
          // 该组件通过scale设置的锚点，绕(100vp,60vp)进行旋转，和"Hello2"实现同样的旋转效果
        .transform(matrix4.identity().rotate({ z: 1, angle: 90 }))
    }.width('100%')
    .height('100%')
  }
}

HarmonyOS鸿蒙开发指南:JS web 动效开发指导CSS动画
sybh的博客
01-10 1044
在关键帧（Keyframes）中动态设置父组件的width和height，实现组件变大缩小。子组件设置scale属性使父子组件同时缩放，再设置opacity实现父子组件的显示与隐藏。left: 35%;top: 25%;text{/* 颜色变化 */from {opacity: 1;
鸿蒙Harmony应用开发—ArkTS声明式开发（通用属性：图形变换）
m0_64420071的博客
03-02 2575
ArkTS声明式开发（通用属性：图形变换）
ArkTS-属性动画和显式动画
qq_41154522的博客
11-28 1251
鸿蒙开发-属性动画和显式动画
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（图形变换）
Androidbye的博客
12-22 1018
用于对组件进行旋转、平移、缩放、矩阵变换等操作。
ArkUI 动画
DN三叶草的博客
12-20 1156
属性动画是通过设置组件的animation属性来给组件添加动画，当组件的width, height, opacity, backgroundColor, scale, rotate, translate等属性变更时，可以实现渐变过渡效果。解读：给组件添加animation属性，arkUI会监控组件样式的变化，当修改了组件的样式时，aukUI发现组件样式发生了变更，会填充组件起始样式和结束样式之间的每一帧画面，从而实现样式变化的动画效果。显式动画使用起来比较灵活，也是实际开发中使用较多的一种方式。
【Harmony OS】【ARK UI】组件内转场api 基本使用
华为开发者联盟
08-04 607
rotate : {x: 0, y: 0, z:-1,angle:90 ,centerX:0, centerY:0} ，其中90度，那就是从顺时针90运动原始的位置。scale : {x:0,y:1.0,centerX:100,centerY:250}描述 从该逐渐从x轴从无到有，y轴没有扩展，从(100,250)点进去扩展。rotate: { x: 0, y: 0 ,z:1, angle:270,centerX:0,centerY:0} （0，0，1）同样的道理，，我们可以发现四指握旋方向是。...
鸿蒙5.0开发进阶：API ArkUI框架-ArkTS组件（组件可见区域变化事件）
Androidbye的博客
12-18 784
组件可见区域变化事件是组件在屏幕中的显示区域面积变化时触发的事件..........
鸿蒙5.0版开发：UI框架JS组件-画布组件（CanvasRenderingContext2D对象）
m0_69424697的博客
12-15 655
使用CanvasRenderingContext2D在canvas画布组件上进行绘制，绘制对象可以是矩形、文本、图片等。
鸿蒙HarmonyOS实战开发：长列表展开收起的使用和多种ArkUI的示例集合
2401_84917132的博客
08-28 1124
本示例为ArkUI中组件、通用、动画、全局方法的集合。
HarmonyOS Next开发学习手册——使用WebGL绘制图形
maniuT的博客
07-20 925
WebGL的全称为Web Graphic Library（网页图形库），主要用于交互式渲染2D图形。目前HarmonyOS中使用的WebGL是基于OpenGL裁剪的OpenGL ES，可以在HTML5的Canvas元素对象中使用，无需使用插件，支持跨平台。WebGL程序是由JavaScript代码组成的，其中使用的API可以利用用户设备提供的GPU硬件完成图形渲染和加速。说明目前该功能仅支持使用兼容JS的类Web开发范式开发。
OpenHarmony实战开发-如何实现图片缩放效果。
m0_70749039的博客
04-15 852
图片预览在应用开发中是一种常见场景，在诸如QQ、微信、微博等应用中均被广泛使用。本模块基于Image组件实现了简单的图片预览功能。
【HarmonyOS】ArkTS学习之页面转场动画的实现
Mayism123的博客
07-11 2211
ArkTS是通过在全局pageTransition方法内配置页面入场(PageTransitionEnter)和页面退场(PageTransitionExit)时的自定义转场动效来实现页面转场动画的，下图是关于PageTransitionEnter和PageTransitionExit的说明。动画分为属性属性动画、显示动画、转场动画和路径动画，而转场动画又包含页面间转场、组件内转场和共享元素转场。我觉得页面转场动画挺有趣的，所以今天就浅浅的给大家分享一个用ArkTS实现页面转场动画的demo。
鸿蒙动画与交互设计：ArkUI 3D变换与手势事件详解
威哥爱编程，CSDN 博客专家、全栈领域新星创作者、华为 HDE，愿交天下 IT 技术爱好者
04-14 1100
大家好，我是 V 哥。在鸿蒙 NEXT 开发中，ArkUI 提供了丰富的 3D 变换和手势事件功能，可用于创建生动且交互性强的用户界面。下面详细介绍 ArkUI 的 3D 变换和手势事件，并给出相应的 ArkTS 案例代码。
鸿蒙5.0进阶开发：UI开发-CSS动效开发（transform样式动画）
AyomQAQ的博客
01-10 623
设置transform属性对组件进行旋转、缩放、移动和倾斜。
HarmonyOS/OpenHarmony(Stage模型）应用开发组合手势（一）连续识别
weixin_69135651的博客
09-07 362
当长按后进行拖动时，根据拖动手势的回调函数，实现组件的拖动。拖拽事件是一种典型的连续识别组合手势事件，由长按手势事件和滑动手势事件组合而成。连续识别组合手势将按照手势的注册顺序识别手势，直到所有的手势识别成功。当连续识别组合手势中有一个手势识别失败时，所有的手势识别失败。组合手势由多种单一手势组合而成，通过在GestureGroup中使用不同的GestureMode来声明该组合手势的类型，支持连续识别、并行识别和互斥识别三种类型。用于声明组合成该组合手势的各个手势。用于声明该组合手势的类型。
鸿蒙next版开发：ArkTS组件通用属性（图形变换）
小淼淼的博客
11-10 657
通过本文的介绍，你应该对HarmonyOS 5.0中ArkTS组件的图形变换属性有了基本的了解。图形变换是UI开发中的重要工具，合理利用这些属性可以使你的应用界面更加生动和吸引人。希望本文能够帮助你在开发过程中更好地利用ArkTS的图形变换属性。
鸿蒙5.0项目开发——鸿蒙天气项目的实现（介绍）
最新发布
高心星的专栏
05-13 86
这是一个基于鸿蒙系统（HarmonyOS）开发的天气应用，采用 ArkTS 语言开发，提供了实时天气查询、天气预报、城市搜索等功能。该应用充分利用了鸿蒙系统的各项能力，为用户提供流畅的天气信息服务体验。
鸿蒙北向应用开发: deveco5.0 创建开源鸿蒙项目
她的吻让他
05-13 489
本地已经安装deveco5.0。
【HarmonyOS 5】鸿蒙碰一碰分享功能开发指南
路漫漫亦无涯
05-12 636
摘要： HarmonyOS 5 的碰一碰分享功能通过设备轻触实现跨端快速分享，支持文件传输、Wi-Fi 共享等场景。开发者可通过注册靠近分享、构造分享数据、调用 API 等步骤实现该功能。系统提供三种分享卡片模板，开发者可根据需求选择。开发过程中需注意设备版本、分享服务状态等条件，并在 3 秒内完成分享操作。源码示例展示了如何导入模块、定义方法、处理事件及使用分享卡片模板，帮助开发者快速集成碰一碰分享功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值