HarmonyOS 平移动画问题
代码如下:
@Entry
@Component
struct TranslateAnimatePage {
  @State isPresent: boolean = false;
  private tagList: string[] = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii"];
  private showFilterHeight: number = 400;
  private duration: number = 1500;
  build() {
    Column() {
      Row()
        .width("100%")
        .height(200)
        .backgroundColor('#ED5151')
        .onClick(() => {
          this.isPresent = !this.isPresent;
        });
      Stack({ alignContent: Alignment.Top }) {
        Row() {
          Text('周三五折即将开始')
            .fontColor('#ED5151')
            .borderColor('#ED5151')
            .height(24)
            .fontSize(12)
            .borderWidth(0.7)
            .padding({ left: 10, right: 10 })
            .borderRadius(4);
          Blank()
            .layoutWeight(1);
          Text('分类')
            .fontColor('#ED5151')
            .height(24)
            .fontSize(12)
            .padding({ left: 10, right: 10 })
            .onClick(() => {
              this.isPresent = !this.isPresent;
            });
        }.padding({ top: 6, left: 15, bottom: 6 })
        .backgroundColor(Color.White);
        if (this.isPresent) {
          Stack({ alignContent: Alignment.Top }) {
            List() {
              ForEach(this.tagList, (item: string) => {
                ListItem() {
                  Text(item)
                    .fontSize(14)
                    .fontColor('#ED5151')
                    .height(36)
                    .width('100%')
                    .textAlign(TextAlign.Center)
                    .borderRadius(14)
                    .padding({ left: 10, right: 10 });
                }
              }, (item: string) => {
                return item;
              })
            }
            .height(this.showFilterHeight)
            .width('100%')
            .backgroundColor('#F5F5F5')
            .borderRadius({ bottomLeft: 8, bottomRight: 8 })
            .transition(TransitionEffect.translate({ y: -this.showFilterHeight })
              .animation({ duration: this.duration }));
          }
          .height('100%')
          .width('100%')
          .backgroundColor("#7F202020")
          .transition(TransitionEffect.opacity(0.5).animation({ duration: this.duration }))
          .margin({
            top: 36
          });
        }
      }
    }.height('100%')
    .width('100%')
    .backgroundColor('#F5F5F5')
  }
}
        HarmonyOS
      
        赞
        
 收藏 0
 回答 1
 
        待解决
        
相关问题
 HarmonyOS 平移动画 
1155浏览  • 1回复 待解决
HarmonyOS position设置x,y值的更改,没有平移动画 
747浏览  • 1回复 待解决
#鸿蒙通关秘籍# 如何在鸿蒙项目中使用JS插值器动画实现元素的平移动画效果? 
1139浏览  • 1回复 待解决
Tabs组件选中下划线需要平移动效 
2540浏览  • 1回复 待解决
HarmonyOS LongPressGesture手势移动问题 
1335浏览  • 1回复 待解决
HarmonyOS 移动上XComponent注册问题 
1504浏览  • 1回复 待解决
数值动画如何设置后固定在原地或者继续移动? 
8492浏览  • 1回复 待解决
在鸿蒙开发中,如何实现组件的动画效果,如淡入淡出、旋转和平移? 
562浏览  • 0回复 待解决
HarmonyOS 组件动画问题 
930浏览  • 1回复 待解决
HarmonyOS 组件旋转后,平移方向出错 
819浏览  • 1回复 待解决
HarmonyOS 缩放动画问题 
750浏览  • 1回复 待解决
HarmonyOS 动画使用问题 
877浏览  • 1回复 待解决
HarmonyOS Naviagtion动画问题咨询 
1044浏览  • 1回复 待解决
HarmonyOS PAG动画使用问题 
992浏览  • 1回复 待解决
HarmonyOS 路径动画相关问题 
1583浏览  • 1回复 待解决
HarmonyOS Grid拖拽动画问题 
1246浏览  • 1回复 待解决
HarmonyOS customDialog有方案修改消失的动画效果吗?比如去掉消失时的缩放效果,改成向下平移效果 
888浏览  • 1回复 待解决
#鸿蒙通关秘籍#在HarmonyOS Next地图组件中如何使用动画来移动相机位置? 
1254浏览  • 1回复 待解决
HarmonyOS  Tabs 官方示例9,支持在BarMode.Fixed下,下划线支持动画移动到点击的tab下。但是没有支持BarMode.Scrollable模式下,下划线动画移动交互 
882浏览  • 1回复 待解决
HarmonyOS  获取移动UAID 
1014浏览  • 1回复 待解决
HarmonyOS 动画执行时机问题 
1196浏览  • 1回复 待解决
自定义扫码界面,扫描线上下移动动画如何实现? 
511浏览  • 0回复 待解决
HarmonyOS 复用转场动画示例3问题 
1044浏览  • 1回复 待解决
关于属性动画的问题? 
11310浏览  • 3回复 待解决
HarmonyOS  如何获取移动国家码MCC和移动网号MNC 
754浏览  • 1回复 待解决





















加上
对组件进行裁剪、遮罩处理:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sharp-clipping-V5#示例1