HarmonyOS鸿蒙ArkTS滑动动画按钮

特创数字科技

于 2024-03-02 18:45:27 发布

阅读量595

点赞数

CC 4.0 BY-SA版权

分类专栏：鸿蒙ArkTS动画ArkUI库文章标签： harmonyos 华为前端动画

本文链接：https://blog.csdn.net/weixin_54226053/article/details/136420383

鸿蒙ArkTS动画ArkUI库专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在HarmonyOS中使用ArkTS语言来创建具有滑动动画效果的按钮，深入探讨了华为鸿蒙系统的前端开发实践，通过实例代码展示了动画的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

@Entry
@Component
struct Index {
  @State metop: number = -80
  @State mecolor: string = '#ff1c80e9'
  @State mepan: boolean = false

  build () {
    Row () {
      Column () {
        Stack () {
          Column ()
            .width ( 200 )
            .height ( 70 )
            .backgroundColor ( this.mecolor )
            .shadow ( { radius: 30, color: '#212121' } )
            .border ( { radius: 50, style: BorderStyle.Solid } )
          Column ()
            .width ( 120 )
            .height ( 70 )
            .borderRadius ( 50 )
            .border ( { width: 2, color: '#ff756d6d', style: BorderStyle.Solid } )
            .linearGradient ( //渐变色
              {
                angle: 20,
                colors: [['rgba(134, 126, 126, 1.00)', 0.2], ["rgba(215, 204, 204, 1.00)", 0.8]]
              } )
            .margin ( { left: this.metop } )
            .onClick ( () => {
              animateTo ( { duration: 500 }, () => {
                this.mepan = !this.mepan
                if (this.mepan) {
                  this.metop = 80
                  this.mecolor = '#ffec0e6e'
                } else {
                  this.metop = -80
                  this.mecolor = '#ff1c80e9'
                }

              } )
            } )
        }

      }
      .width ( '100%' )
    }
    .height ( '100%' )
  }
}