HarmonyOS 鸿蒙 ArkTS ArkUI 路径动画设置

作者：我家小花儿 | 2024-02-16 09:31:30

踩


@Entry
@Component
struct Shouye {
  @State message: string = 'Hello'
  @State toggle: boolean = true
  onPageShow (): void {
    animateTo ( {
      duration: 3000,
      iterations: -1,
      curve:Curve.Linear
 
    }, () => {
      this.toggle = !this.toggle
    } )
 
  }
  build () {
    Row () {
      Column () {
        Text ( this.message )
          .fontSize ( 50 )
          .fontWeight ( FontWeight.Bold )
          .motionPath({ path: 'Mstart.x start.y L300 1000 L300 500 L300 800 L300 1000 Lend.x end.y', from: 0.0, to: 1.0, rotatable: true })
      }
      .width('100%').height('100%').alignItems(this.toggle ? HorizontalAlign.Start : HorizontalAlign.Center)
    }
    .height ( '100%' )
  }
 
}

参考

名称	参数	描述
motionPath	{ path: string, from?: number, to?: number, rotatable?: boolean }	设置组件的运动路径。 - path：位移动画的运动路径，使用svg路径字符串。path中支持使用start和end进行起点和终点的替代，如：'Mstart.x start.y L50 50 Lend.x end.y Z'，更多说明请参考。 - from：运动路径的起点。取值范围：[0, 1] - to：运动路径的终点。取值范围：[0, 1] - rotatable：是否跟随路径进行旋转。

名称

参数

描述

motionPath

{

path: string,

from?: number,

to?: number,

rotatable?: boolean

}

设置组件的运动路径。

- path：位移动画的运动路径，使用svg路径字符串。path中支持使用start和end进行起点和终点的替代，如：'Mstart.x start.y L50 50 Lend.x end.y Z'，更多说明请参考。

- from：运动路径的起点。

取值范围：[0, 1]

- to：运动路径的终点。

取值范围：[0, 1]

- rotatable：是否跟随路径进行旋转。

HorizontalAlign

名称	描述
Start	按照语言方向起始端对齐。
Center	居中对齐，默认对齐方式。
End	按照语言方向末端对齐。

学习交流

点击下方名片，拉您

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/92217