HarmonyOS 组件动画问题

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

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

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

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) }))
HarmonyOS
3天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

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

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

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

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

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

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%')
    }
  }
}
分享
微博
QQ
微信
回复
3天前
相关问题
HarmonyOS 动画使用问题
128浏览 • 1回复 待解决
HarmonyOS 缩放动画问题
142浏览 • 1回复 待解决
HarmonyOS Grid拖拽动画问题
211浏览 • 1回复 待解决
HarmonyOS 路径动画相关问题
851浏览 • 1回复 待解决
HarmonyOS PAG动画使用问题
114浏览 • 1回复 待解决
HarmonyOS Naviagtion动画问题咨询
293浏览 • 1回复 待解决
HarmonyOS 平移动画问题
97浏览 • 1回复 待解决
HarmonyOS 动画执行时机问题
333浏览 • 1回复 待解决
HarmonyOS 有没有帧动画组件
271浏览 • 1回复 待解决
关于属性动画问题
10272浏览 • 3回复 待解决
HarmonyOS 复用转场动画示例3问题
51浏览 • 1回复 待解决
HarmonyOS 页面内的组件转场动画
512浏览 • 1回复 待解决
HarmonyOS 如何取消某个组件动画
38浏览 • 1回复 待解决
求助动画效果问题有懂的吗?
4276浏览 • 1回复 待解决
如何实现组件水波纹动画案例
1379浏览 • 1回复 待解决
lottie动画组件存在严重的内存泄漏
1662浏览 • 1回复 待解决