HarmonyOS 组件动画问题

在HarmonyOS中页面出现的时候已用

.transition(TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) })) 
1.

实现了页面出现时向上的动画。页面消失时向下的动画如何实现？

Stack() {
  Column() {
    Row() {
      Text('正在使用以下会员权益')
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor('#191919')

      Image($r('app.media.vip_pop_close'))
        .width(this.closeIconWH)
        .height(this.closeIconWH)
        .position({ left: 16, top: (this.headerHeight - this.closeIconWH) / 2 })
        .onClick(() => {
          // this.isPresent = false
          // RouterModule.pop(RouterNameConstants.ENTRY_HAP);
          this.showFlag = Visibility.Hidden

        })
    }
    .height(this.headerHeight)
    .backgroundColor('#ffffff')
    .width('100%')
    .borderRadius({ topLeft: 12, topRight: 12 })
    .justifyContent(FlexAlign.Center)

    VipWebView({ loadUrl: this.url })
      .layoutWeight(1)

    Blank().height(40)
      .backgroundColor('#ffffff')
  }
  .height('80%')
  .transition(TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) }))
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.

HarmonyOS

zxjiu

2025-01-09 15:59:14

618浏览

回答 1

按赞同

按时间

Heiang

translate这个参数是设置组件转场时的平移效果，为插入时起点和删除时终点的值，在组件插入和删除时都会有动画效果。代码中是将：

.transition(TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) })) 
1.

动画效果定义在了自定义组件内部，这样的话在外部控制该自定义组件删除时，会看不到动画效果。需要将

.transition(TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) }))
1.

定义在加载自定义组件的地方就可以实现插入和删除都有动画效果了。示例如下：

import { curves } from '@kit.ArkUI';

@Entry
@Component
struct TransitionPage {
  @State message: string = 'Hello World';
  @State flag: boolean = false;
  @State show: string = 'show';

  build() {
    Column() {
      Text(this.message)
        .id('HelloWorld')
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })

      Button() {
        Text(this.show)
      }
      .type(ButtonType.Capsule)
      .height(40)
      .width(200)
      .margin({ top: 20 })
      .onClick(() => {
        if (this.flag) {
          this.show = 'hide';
        } else {
          this.show = 'show';
        }
        this.flag = !this.flag;
      })

      if (this.flag) {
        componentView()
          .transition(TransitionEffect.translate({ y: 1000 }).animation({ curve: curves.springMotion(0.6, 0.8) }))
      }
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct componentView {
  build() {
    Stack() {
      Column() {
        Row() {
          Text('正在使用以下会员权益')
            .fontSize(18)
            .fontWeight(FontWeight.Bold)
            .fontColor('#191919')
        }
        .height(40)
        .backgroundColor('#ffffff')
        .width('100%')
        .borderRadius({ topLeft: 12, topRight: 12 })
        .justifyContent(FlexAlign.Center)

        Row()
          .backgroundColor('#eeeeee')
          .layoutWeight(1)
          .width('100%')

        Blank().height(40)
          .backgroundColor('#ffffff')
      }
      .height('80%')
    }
  }
}
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.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.

2025-01-09 18:46:19

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS 组件动画问题

订阅鸿蒙技术特刊，精选内容抢先看