HarmonyOS 动画需求

展开收起布局的动画怎么实现

HarmonyOS
2024-12-20 16:45:51
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

实现图片显示隐藏的动画效果demo:

@Entry
@Component
struct Index1 {
  @State message: string = '隐藏'
  @State isOpen: boolean = true;
  @State imageHeight: number = 300;
  build() {
    Column() {
      Button(this.message).onClick((event: ClickEvent) => {
        this.isOpen = !this.isOpen;
        animateTo({
          duration: 600,
          curve: Curve.Ease,
          onFinish: () => {
          }
        },
          () => {
            if (this.isOpen) {
              this.message = '隐藏';
              this.imageHeight = 300;
            } else {
              this.message = '显示';
              this.imageHeight = 0;
            }
          })
      })
        .fontSize(26)
        .margin(({ top: 36 }))
      Image($r('app.media.startIcon'))// Text('hhhhh')
        .height(this.imageHeight)
        .width(300)
        .margin(({ top: 36 }))
        .border({ width: 3, color: 'white' })
    }
  }
}
  • 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.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
分享
微博
QQ
微信
回复
2024-12-20 18:57:20
相关问题
HarmonyOS 直播需求WebRTC
822浏览 • 1回复 待解决
HarmonyOS 直播需求、rtmp推流
262浏览 • 1回复 待解决
HarmonyOS 自定义通知栏点击更新需求
130浏览 • 1回复 待解决
应用侧需求 harmonyos 增加 MQTT协议的API
6834浏览 • 1回复 待解决
HarmonyOS中 直播需求WebRTC?
270浏览 • 0回复 待解决
HarmonyOS 数据库需求咨询
189浏览 • 1回复 待解决
open_file插件适配HarmonyOS需求
459浏览 • 1回复 待解决
HarmonyOS lottie动画
153浏览 • 1回复 待解决
HarmonyOS 加载动画
137浏览 • 1回复 待解决
HarmonyOS 动画实现
236浏览 • 1回复 待解决
HarmonyOS canvas动画如何实现逐帧动画
13浏览 • 1回复 待解决
HarmonyOS 阅读电子书需求的简单代码
296浏览 • 1回复 待解决
api异步方法提供同步api需求
343浏览 • 1回复 待解决
请教一个sql查询需求
2669浏览 • 1回复 待解决
HarmonyOS 缩放动画问题
125浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人