HarmonyOS 鸿蒙 ArkTS ArkUI 路径动画设置

原创

特创码农 2024-03-07 08:38:18 博主文章分类：鸿蒙HarmonyOS社区 ©著作权

文章标签 harmonyos 华为取值范围字符串 Text 文章分类 JavaScript 前端开发

©著作权归作者所有：来自51CTO博客作者特创码农的原创作品，请联系作者获取转载授权，否则将追究法律责任

HarmonyOS 鸿蒙 ArkTS ArkUI 路径动画设置_华为

@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：是否跟随路径进行旋转。