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

8 回复

旋转和缩放都是除了中心点都在变换,如果同时围绕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 中,rotatescalecenterXcenterY 冲突问题属于设计特性,而非缺陷。这种设计基于以下考虑:

  1. 统一变换中心:当多个变换(如旋转、缩放)同时作用于同一组件时,系统默认使用统一的变换中心点,以确保变换效果的可预测性和一致性。如果允许每个变换独立设置中心点,可能导致视觉混乱或性能损耗。

  2. 属性优先级:通过“最后设定属性值为准”的规则,开发者可以灵活控制变换中心。例如,若需统一中心点,只需在最后设置 centerXcenterY;若需不同中心点,可通过分步骤动画或组合组件的方式实现。

  3. 性能优化:统一变换中心减少了底层渲染计算的复杂度,有助于提升动画流畅度。

虽然这种设计在分步骤动画中可能增加一些实现复杂度,但通过合理的代码结构(如使用 Animator 分组或嵌套组件)可以解决。建议参考文档中的动画示例,优化变换中心的控制逻辑。

回到顶部