HarmonyOS 路径动画相关问题

使用以下官方demo做个贝塞尔曲线动画，设定好移动path。

1、布局里必须设置.alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center)动画才能生效这个是为什么？直接使用 .alignItems(HorizontalAlign.Start)就没有动画移动效果，为什么？

2、如果 Column()下还有其他控件例如Text 就会被动画影响到布局，这个明显不符合期望

3、是不是只能如demo那样写，有没有其他好的方案？

代码示例：

// xxx.ets  
@Entry  
@Component  
struct MotionPathExample {  
  @State toggle: boolean = true  
  build() {  
    Column() {  
      Button('click me').margin({ left: 50, top: 50 })  
        .motionPath({ path: 'M 300 300 Q 600 1000 100 2000', from: 0.0, to: 1.0, rotatable: false })  
        .onClick(() => {  
          animateTo({ duration: 4000, curve: Curve.Linear }, () => {  
            this.toggle = !this.toggle // 通过this.toggle变化组件的位置  
          })  
        })  
      Text('测试')  
        .margin({ left: 20, top: 30 })  
    }  
    .width('100%')  
    .height('100%')  
    .alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center)  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

HarmonyOS

zxjiu

2024-09-27 13:02:57

浏览

回答 1

按赞同

按时间

Heiang

问题1：路径动画的触发条件是元素的位置发生变化，所以当切换toggle 的时候如果位置没有发生变化就不会生效。

问题2：text布局发生变化是因为父容器的排列方式发生了变化，更改触发条件即可。

问题3：参考下面demo实现：

@Entry  
@Component  
struct MotionPathExample {  
  @State toggle: boolean = true  
  @State marginLeft: number = 50  
  build() {  
    Column() {  
      Button('click me').margin({ left: this.marginLeft, top: 50 })  
        .motionPath({  
          path: 'M 300 300 Q 600 1000 100 2000',  
          from: 0.0,  
          to: 1.0,  
          rotatable: false  
        })  
        .onClick(() => {  
          animateTo({ duration: 4000, curve: Curve.Linear }, () => {  
            this.marginLeft = 51  
          })  
        })  
      Text('测试')  
        .margin({ left: 20, top: 30 })  
    }  
    .width('100%')  
    .height('100%')  
    .alignItems(HorizontalAlign.Start)  
  }  
}1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.

2024-09-27 16:24:43

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 路径动画相关问题

订阅鸿蒙技术特刊，精选内容抢先看