图集点击添加动画

@@ -47,8 +47,10 @@ export struct MultiPictureDetailPageComponent {
   @State publishCommentModel: publishCommentModel = new publishCommentModel()
   @State operationButtonList: string[] = ['comment', 'like', 'collect', 'share']
   @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') as number;
+  @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') as number;
   @State windowHeight: number = AppStorage.get<number>('windowHeight') as number;
   @State currentOffset:number = 0
+  @State duration:number = 0
 
   //watch监听页码回调
   onCurrentPageNumUpdated(): void {
@@ -81,6 +83,7 @@ export struct MultiPictureDetailPageComponent {
     }
   }
 
+
   aboutToDisappear() {
 
   }
@@ -98,6 +101,7 @@ export struct MultiPictureDetailPageComponent {
   @Builder
   init() {
     if (this.contentDetailData.rmhPlatform == 1) {
+      if(!this.showDownload) {
         Row() {
           Row({ space: 8 }) {
             if (this.getImgUrl()){
@@ -221,7 +225,11 @@ export struct MultiPictureDetailPageComponent {
           middle: { anchor: "__container__", align: HorizontalAlign.Center }
         })
         .id('e_attention')
-      .visibility(!this.showDownload ? Visibility.Visible : Visibility.None)
+        .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
+          TransitionEffect.translate({ x: 0, y: `-${this.topSafeHeight + 12}px` })
+        ))
+      }
+
     }
     if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) {
       Swiper(this.swiperController) {
@@ -241,6 +249,9 @@ export struct MultiPictureDetailPageComponent {
             this.currentOffset = Math.abs(extraInfo.currentOffset)
           })
           .onTouch((event: TouchEvent) => {
+              if(this.duration === 0) {
+                this.duration = 500
+              }
               if(event.type === 1) {
                 // if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {
                 if(this.currentOffset > 160) {
@@ -285,6 +296,7 @@ export struct MultiPictureDetailPageComponent {
         })
     }
     Column(){
+      if(!this.showDownload) {
         Column(){
           Row() {
             Scroll(this.scroller) {
@@ -354,7 +366,11 @@ export struct MultiPictureDetailPageComponent {
             operationButtonList: this.operationButtonList,
           })
         }
-      .visibility(!this.showDownload ? Visibility.Visible : Visibility.None)
+        .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
+          TransitionEffect.translate({ x: 0, y: `-${this.bottomSafeHeight}px` })
+        ))
+      }
+      if(this.showDownload) {
         Column(){
           Row() {
             Flex({
@@ -391,7 +407,10 @@ export struct MultiPictureDetailPageComponent {
           }
           .width('100%')
         }
-      .visibility(this.showDownload ? Visibility.Visible : Visibility.None)
+        .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
+          TransitionEffect.translate({ x: 0, y: `${this.bottomSafeHeight}px` })
+        ))
+      }
     }
     .zIndex(10)
     .id('e_swiper_bottom')