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)  
  }  
}
HarmonyOS
2024-09-27 13:02:57
浏览
收藏 0
回答 1
待解决
回答 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)  
  }  
}
分享
微博
QQ
微信
回复
2024-09-27 16:24:43
相关问题
HarmonyOS string相关问题
1105浏览 • 1回复 待解决
HarmonyOS BindSheet相关问题
1710浏览 • 1回复 待解决
HarmonyOS 证书相关问题
1246浏览 • 1回复 待解决
HarmonyOS Worker相关问题
1094浏览 • 1回复 待解决
HarmonyOS Lib相关问题
895浏览 • 1回复 待解决
HarmonyOS Grid相关问题
1435浏览 • 1回复 待解决
HarmonyOS KVStore 相关问题
1274浏览 • 1回复 待解决
HarmonyOS AccountKit相关问题
1513浏览 • 1回复 待解决
HarmonyOS 线程相关问题
1525浏览 • 1回复 待解决
HarmonyOS 缩放动画问题
660浏览 • 1回复 待解决
HarmonyOS 动画使用问题
810浏览 • 1回复 待解决
HarmonyOS RN相关问题
1663浏览 • 1回复 待解决
HarmonyOS 混淆相关问题
951浏览 • 1回复 待解决
适配HarmonyOS相关问题
1201浏览 • 1回复 待解决
HarmonyOS @Event相关问题
1153浏览 • 1回复 待解决
HarmonyOS protobuf相关问题
1469浏览 • 1回复 待解决
HarmonyOS 打包相关问题
1186浏览 • 1回复 待解决
HarmonyOS ApplicationContext相关问题
1229浏览 • 1回复 待解决
HarmonyOS CardRecognition相关问题
1086浏览 • 1回复 待解决
HarmonyOS 地图相关问题
1794浏览 • 1回复 待解决
HarmonyOS PushExtensionAbility相关问题
970浏览 • 1回复 待解决
HarmonyOS RelativeContainer相关问题
908浏览 • 1回复 待解决
HarmonyOS音频相关问题
1840浏览 • 1回复 待解决
HarmonyOS 组件动画问题
868浏览 • 1回复 待解决