HarmonyOS鸿蒙Next中rotate和scale的centerX冲突是缺陷还是特性?
HarmonyOS鸿蒙Next中rotate和scale的centerX冲突是缺陷还是特性? ScaleOptions对象说明
当组件同时设置了rotate和scale属性时,centerX和centerY的取值会发生冲突,此时centerX和centerY的值以最后设定的属性的值为准。
如果要实现一个同时旋转和缩放的动画,或者在同一组件分步骤旋转和缩放,缩放中心和旋转中心默认就必须是同一点,想要在不同中心,就会变得比较麻烦
没看出这么设计的好处,是否属于缺陷?
更多关于HarmonyOS鸿蒙Next中rotate和scale的centerX冲突是缺陷还是特性?的实战教程也可以访问 https://www.itying.com/category-93-b0.html
旋转和缩放都是除了中心点都在变换,如果同时围绕A点旋转,围绕B点缩放,至少需要存在两个不动的点,当前不支持两个中心点同时旋转和缩放。若分步骤旋转和缩放,缩放中心和旋转中心可以不是同一点,实现代码如下:
@Entry
@Component
struct TransformExample {
@State @Watch('onIsChangeUpdated') isChange: Boolean = false
@State angle: number = 0
@State x: number = 1
@State y: number = 1
onIsChangeUpdated() {
this.getUIContext()?.animateTo({
duration: 1200,
curve: Curve.Friction,
delay: 500,
iterations: 1, // 设置-1表示动画无限循环
playMode: PlayMode.Alternate,
expectedFrameRateRange: {
min: 10,
max: 120,
expected: 60,
},
}, () => {
this.x = 2
this.y = 0.5
})
}
build() {
Column() {
Row()
.rotate({
x: 0,
y: 0,
z: 1,
centerX: '50%',
centerY: '50%',
angle: this.angle
})
.scale(this.isChange === false ? {
x: this.x,
y: this.y,
centerX: '50%',
centerY: '50%'
} : {
x: this.x,
y: this.y,
centerX: '100%',
centerY: '100%'
})
.width(100)
.height(100)
.backgroundColor(0xAFEEEE)
.onClick(() => {
this.getUIContext()?.animateTo({
duration: 1200,
curve: Curve.Friction,
delay: 500,
iterations: 1, // 设置-1表示动画无限循环
playMode: PlayMode.Alternate,
expectedFrameRateRange: {
min: 10,
max: 120,
expected: 60,
},
onFinish: () => {
this.isChange = true
}
}, () => {
this.angle = 360;
})
})
}.width('100%').margin({ top: 5 })
}
}
更多关于HarmonyOS鸿蒙Next中rotate和scale的centerX冲突是缺陷还是特性?的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
在animateTo的onFinish里面嵌套animateTo,可以代替@Watch吗,
当前不支持两个中心点同时旋转和缩放。可以理解为有技术困难吗,
可以,
貌似在前端上也是这么实现,楼主有更好的推荐方式吗?
我也是菜鸟,首先不理解缩放中心和旋转中心为什么不是独立的,是因为合并起来有诸多好处还是技术上不好分开?
在HarmonyOS鸿蒙Next中,rotate和scale的centerX冲突属于特性。鸿蒙的动画系统允许独立设置变换中心点,但多个变换属性同时作用时,若未显式指定各自的变换中心,可能共用默认视图中心点,导致预期外的叠加效果。这是图形渲染层的设计机制,开发者需通过分别设置centerX属性或使用Transform API精确控制变换原点以避免冲突。
在 HarmonyOS Next 中,rotate 和 scale 的 centerX 和 centerY 冲突问题属于设计特性,而非缺陷。这种设计基于以下考虑:
-
统一变换中心:当多个变换(如旋转、缩放)同时作用于同一组件时,系统默认使用统一的变换中心点,以确保变换效果的可预测性和一致性。如果允许每个变换独立设置中心点,可能导致视觉混乱或性能损耗。
-
属性优先级:通过“最后设定属性值为准”的规则,开发者可以灵活控制变换中心。例如,若需统一中心点,只需在最后设置
centerX和centerY;若需不同中心点,可通过分步骤动画或组合组件的方式实现。 -
性能优化:统一变换中心减少了底层渲染计算的复杂度,有助于提升动画流畅度。
虽然这种设计在分步骤动画中可能增加一些实现复杂度,但通过合理的代码结构(如使用 Animator 分组或嵌套组件)可以解决。建议参考文档中的动画示例,优化变换中心的控制逻辑。

