官网地址：rotate
1. 概述
rotate是鸿蒙系统为组件提供的旋转属性，通过rotate属性，可实现组件的旋转效果
2. rotate属性
2.1. 语法参数
rotate(value: RotateOptions)参数：
参数名 |
类型 |
必填 |
说明 |
value |
RotateOptions |
是 |
可使组件在以组件左上角为坐标原点的坐标系中进行旋转（坐标系如下图所示）。其中，(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卡片中使用。 |
RotateOptions：
名称 |
类型 |
必填 |
说明 |
x |
number |
否 |
旋转轴向量x坐标。 |
y |
number |
否 |
旋转轴向量y坐标。 |
z |
number |
否 |
旋转轴向量z坐标。 |
angle |
number | string |
是 |
旋转角度。取值为正时相对于旋转轴方向顺时针转动，取值为负时相对于旋转轴方向逆时针转动。取值可为string类型，如'90deg'。 |
centerX |
number | string |
否 |
变换中心点x轴坐标。 |
centerY |
number | string |
否 |
变换中心点y轴坐标。 |
centerZ10+ |
number |
否 |
z轴锚点，即3D旋转中心点的z轴分量。 |
perspective10+ |
number |
否 |
视距，即视点到z=0平面的距离。 旋转轴和旋转中心点都基于坐标系设定，组件发生位移时，坐标系不会随之移动。 |
2.2. 原理详解
组件在旋转时，是以自身的左上角为坐标系进行旋转，需要选定旋转轴以及旋转中心点，默认旋转轴为z轴，中心点为组件的中心，也就是ceterX = ‘50%’，centerY = '50%'
上图是以centerX = '50%', centerY = '50%', z轴为旋转轴，旋转70°的效果（z轴方向：从屏幕外向屏幕里）
旋转中心点也可以设置，例如，centerX = 0, centerY = 0, 讲旋转中心点设置为组件的左上角
x轴和y轴的旋转跟z轴的规则一致，具体看demo样例
2.3. Demo样例
@Observed
class RotateInfo {
public x: number = 0;
public y: number = 0;
public z: number = 200;
public angle: number = 0;
centerX: number | string = '50%';
centerY: number | string = '50%';
centerZ: number = 0;
perspective: number = 0
}
@Component
struct RotateView {
@State rotateInfo: RotateInfo = new RotateInfo()
build() {
Stack() {
Row()
.width(200)
.height(100)
.position({ x: 100, y: 100 })
.border({ width: 1, color: Color.Pink })
.borderStyle(BorderStyle.Dashed)
Row()
.width(200)
.height(100)
.rotate({
x: this.rotateInfo.x,
y: this.rotateInfo.y,
z: this.rotateInfo.z,
angle: this.rotateInfo.angle,
centerX: this.rotateInfo.centerX,
centerY: this.rotateInfo.centerY
})
.backgroundColor(Color.Pink)
.position({ x: 100, y: 100 })
.animation({ duration: 2000 })
Row({ space: 10 }) {
Button('rotate 70,中心点为左上角')
.onClick(() => {
this.rotateInfo.angle = 70;
this.rotateInfo.x = 0
this.rotateInfo.y = 0
this.rotateInfo.z = 1
})
}
.position({ x: 0, y: 300 })
}
.border({ width: 1, color: Color.Green })
.width(400)
.height(350)
}
}旋转中心点：centerX = '50%', centerY = '50%', z轴为旋转轴
Row({ space: 10 }) {
Button('rotate 70,中心点为左上角')
.onClick(() => {
this.rotateInfo.angle = 70;
this.rotateInfo.x = 0
this.rotateInfo.y = 0
this.rotateInfo.z = 1
this.rotateInfo.centerX = 0;
this.rotateInfo.centerY = 0;
})
}
.position({ x: 0, y: 300 })
Row({ space: 10 }) {
Button('rotate 70,中心点为左上角，x为旋转轴')
.onClick(() => {
this.rotateInfo.angle = 70;
this.rotateInfo.x = 1
this.rotateInfo.y = 0
this.rotateInfo.z = 0
this.rotateInfo.centerX = 0;
this.rotateInfo.centerY = 0;
})
}
.position({ x: 0, y: 300 })
Row({ space: 10 }) {
Button('rotate 70,中心点为左上角，y为旋转轴')
.onClick(() => {
this.rotateInfo.angle = 70;
this.rotateInfo.x = 0
this.rotateInfo.y = 1
this.rotateInfo.z = 0
this.rotateInfo.centerX = 0;
this.rotateInfo.centerY = 0;
})
}
.position({ x: 0, y: 300 })
Row({ space: 10 }) {
Button('rotate 70,中心点为左上角，xy同为旋转轴')
.onClick(() => {
this.rotateInfo.angle = 70;
this.rotateInfo.x = 1
this.rotateInfo.y = 1
this.rotateInfo.z = 0
this.rotateInfo.centerX = 0;
this.rotateInfo.centerY = 0;
})
}
.position({ x: 0, y: 300 })
旋转轴同时可以设置多个，如上x和y同时为旋转轴，旋转时为绕着两个旋转轴旋转。
3. 总结
对于rotate属性而言，需要重点理解一下几点：
- 参考坐标系为组件自身的左上角
- 旋转中心点的设置。旋转中心点决定了组件围绕着哪个点进行旋转，中心点不一样，旋转后的位置也不同。默认位置是组件的中心点，也就是宽高各自的50%。
- 旋转轴的设置。旋转轴决定了组件旋转的方向，旋转轴可以设置多个，默认为z轴