图集点击添加动画

@@ -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,130 +101,135 @@ export struct MultiPictureDetailPageComponent {
   @Builder
   init() {
     if (this.contentDetailData.rmhPlatform == 1) {
-      Row() {
-        Row({ space: 8 }) {
-          if (this.getImgUrl()){
-            Row() {
-              Stack() {
-                Image(this.getImgUrl())
-                  .borderRadius(18)
-                  .aspectRatio(1)
-                  .border({ width: 1, color: Color.White, style: BorderStyle.Solid })
-                  .width(36)
-                  .height(36)
-                  .objectFit(ImageFit.Fill)
-                  .interpolation(ImageInterpolation.High)
-                if(!StringUtils.isEmpty(this.contentDetailData.rmhInfo?.authIcon)){
-                  Stack() {
-                    Image(this.contentDetailData.rmhInfo?.authIcon)
-                      .width($r('app.float.vp_13'))
-                      .height($r('app.float.vp_13'))
-                      .objectFit(ImageFit.Cover)
+      if(!this.showDownload) {
+        Row() {
+          Row({ space: 8 }) {
+            if (this.getImgUrl()){
+              Row() {
+                Stack() {
+                  Image(this.getImgUrl())
+                    .borderRadius(18)
+                    .aspectRatio(1)
+                    .border({ width: 1, color: Color.White, style: BorderStyle.Solid })
+                    .width(36)
+                    .height(36)
+                    .objectFit(ImageFit.Fill)
+                    .interpolation(ImageInterpolation.High)
+                  if(!StringUtils.isEmpty(this.contentDetailData.rmhInfo?.authIcon)){
+                    Stack() {
+                      Image(this.contentDetailData.rmhInfo?.authIcon)
+                        .width($r('app.float.vp_13'))
+                        .height($r('app.float.vp_13'))
+                        .objectFit(ImageFit.Cover)
+                    }
+                    .width(36)
+                    .height(36)
+                    .alignContent(Alignment.BottomEnd)
                   }
-                  .width(36)
-                  .height(36)
-                  .alignContent(Alignment.BottomEnd)
                 }
-              }
-              .width(36)
-              .height(36)
-              .alignContent(Alignment.Center)
-              .onClick(() => {
-                if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
-                  // 号主页
-                  const params: Params = {
-                    creatorId: this.contentDetailData.rmhInfo.rmhId,
-                    pageID: ''
+                .width(36)
+                .height(36)
+                .alignContent(Alignment.Center)
+                .onClick(() => {
+                  if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
+                    // 号主页
+                    const params: Params = {
+                      creatorId: this.contentDetailData.rmhInfo.rmhId,
+                      pageID: ''
+                    }
+                    WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
                   }
-                  WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
-                }
 
-              })
+                })
+              }
+              .width('13%')
+              .height('100%')
+            }
+
+            Row() {
+              Flex({
+                direction: FlexDirection.Column,
+                justifyContent: FlexAlign.SpaceAround,
+                alignItems: ItemAlign.Start
+              }) {
+                Text(`${this.contentDetailData?.rmhInfo?.rmhName}`)
+                  .fontColor(Color.White)
+                  .fontSize(14)
+                  .fontFamily('PingFang PingFang SC-Medium')
+                  .fontWeight(500)
+                  .lineHeight(17)
+                  .margin(0)
+                  .height(17)
+                Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`)
+                  .fontColor(Color.White)
+                  .fontSize(12)
+                  .fontFamily('PingFang SC-Regular')
+                  .fontWeight(400)
+                  .lineHeight(14)
+                  .height(14)
+                  .textOverflow({ overflow: TextOverflow.Ellipsis })
+                  .margin(0)
+                  .maxLines(1)
+              }
             }
-            .width('13%')
+            .width('81%')
             .height('100%')
           }
+          .width('74.4%')
+          .height('100%')
+          .margin({
+            top: 0,
+            bottom: 0,
+            left: 16,
+            right: 0
+          })
 
           Row() {
-            Flex({
-              direction: FlexDirection.Column,
-              justifyContent: FlexAlign.SpaceAround,
-              alignItems: ItemAlign.Start
-            }) {
-              Text(`${this.contentDetailData?.rmhInfo?.rmhName}`)
-                .fontColor(Color.White)
-                .fontSize(14)
-                .fontFamily('PingFang PingFang SC-Medium')
-                .fontWeight(500)
-                .lineHeight(17)
-                .margin(0)
-                .height(17)
-              Text(`${this.contentDetailData?.rmhInfo?.rmhDesc}`)
-                .fontColor(Color.White)
-                .fontSize(12)
-                .fontFamily('PingFang SC-Regular')
-                .fontWeight(400)
-                .lineHeight(14)
-                .height(14)
-                .textOverflow({ overflow: TextOverflow.Ellipsis })
-                .margin(0)
-                .maxLines(1)
+            if (this.followStatus == '0') {
+              Button({ type: ButtonType.Normal, stateEffect: true }) {
+                Row() {
+                  Text('+关注').fontSize(12).fontColor(0xffffff)
+                }.alignItems(VerticalAlign.Center)
+              }
+              .borderRadius(4)
+              .backgroundColor('#ED2800')
+              .width(48)
+              .height(24)
+              .onClick(() => {
+                this.handleAccention()
+              })
+            } else {
+              Button({ type: ButtonType.Normal, stateEffect: true }) {
+                Row() {
+                  Text('已关注').fontSize(12).fontColor(0xffffff)
+                }.alignItems(VerticalAlign.Center)
+              }
+              .borderRadius(4)
+              .backgroundColor('#333333')
+              .width(54)
+              .height(24)
             }
+
           }
-          .width('81%')
+          .justifyContent(FlexAlign.Center)
+          .alignItems(VerticalAlign.Center)
+          .width('21.6%')
           .height('100%')
         }
-        .width('74.4%')
-        .height('100%')
-        .margin({
-          top: 0,
-          bottom: 0,
-          left: 16,
-          right: 0
+        .width('100%')
+        .height(44)
+        .zIndex(10)
+        .margin({top:`${this.topSafeHeight + 12}px`})
+        .alignRules({
+          top: { anchor: "__container__", align: VerticalAlign.Top },
+          middle: { anchor: "__container__", align: HorizontalAlign.Center }
         })
-
-        Row() {
-          if (this.followStatus == '0') {
-            Button({ type: ButtonType.Normal, stateEffect: true }) {
-              Row() {
-                Text('+关注').fontSize(12).fontColor(0xffffff)
-              }.alignItems(VerticalAlign.Center)
-            }
-            .borderRadius(4)
-            .backgroundColor('#ED2800')
-            .width(48)
-            .height(24)
-            .onClick(() => {
-              this.handleAccention()
-            })
-          } else {
-            Button({ type: ButtonType.Normal, stateEffect: true }) {
-              Row() {
-                Text('已关注').fontSize(12).fontColor(0xffffff)
-              }.alignItems(VerticalAlign.Center)
-            }
-            .borderRadius(4)
-            .backgroundColor('#333333')
-            .width(54)
-            .height(24)
-          }
-
-        }
-        .justifyContent(FlexAlign.Center)
-        .alignItems(VerticalAlign.Center)
-        .width('21.6%')
-        .height('100%')
+        .id('e_attention')
+        .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
+          TransitionEffect.translate({ x: 0, y: `-${this.topSafeHeight + 12}px` })
+        ))
       }
-      .width('100%')
-      .height(44)
-      .zIndex(10)
-      .margin({top:`${this.topSafeHeight + 12}px`})
-      .alignRules({
-        top: { anchor: "__container__", align: VerticalAlign.Top },
-        middle: { anchor: "__container__", align: HorizontalAlign.Center }
-      })
-      .id('e_attention')
-      .visibility(!this.showDownload ? Visibility.Visible : Visibility.None)
+
     }
     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,113 +296,121 @@ export struct MultiPictureDetailPageComponent {
         })
     }
     Column(){
-      Column(){
-        Row() {
-          Scroll(this.scroller) {
-            Row() {
-              Flex({
-                direction: FlexDirection.Column,
-                justifyContent: FlexAlign.Start
-              }) {
-                if(this.contentDetailData?.photoList?.length) {
-                  Text() {
-                    Span(`${this.swiperIndex + 1}`)
-                      .fontSize(24)
-                      .fontFamily('PingFang SC-Medium')
-                      .fontWeight(500)
-                      .lineHeight(28)
-                    Span(`/${this.contentDetailData?.photoList?.length}`)
+      if(!this.showDownload) {
+        Column(){
+          Row() {
+            Scroll(this.scroller) {
+              Row() {
+                Flex({
+                  direction: FlexDirection.Column,
+                  justifyContent: FlexAlign.Start
+                }) {
+                  if(this.contentDetailData?.photoList?.length) {
+                    Text() {
+                      Span(`${this.swiperIndex + 1}`)
+                        .fontSize(24)
+                        .fontFamily('PingFang SC-Medium')
+                        .fontWeight(500)
+                        .lineHeight(28)
+                      Span(`/${this.contentDetailData?.photoList?.length}`)
+                        .fontSize(14)
+                        .fontFamily('PingFang SC-Medium')
+                        .fontWeight(500)
+                        .lineHeight(19)
+                    }
+                    .fontColor(Color.White)
+                    .margin(4)
+                  }
+                  if(this.contentDetailData.newsTitle) {
+                    Text(`${this.contentDetailData.newsTitle}`)
+                      .fontColor(Color.White)
+                      .fontSize(16)
+                      .fontFamily('PingFang SC-Semibold')
+                      .fontWeight(600)
+                      .lineHeight(24)
+                      .margin({
+                        top: 4,
+                        left: 0,
+                        bottom: 4,
+                        right: 0
+                      })
+                  }
+                  if(this.contentDetailData.photoList?.[this.swiperIndex].picDesc) {
+                    Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
+                      .fontColor(Color.White)
                       .fontSize(14)
-                      .fontFamily('PingFang SC-Medium')
-                      .fontWeight(500)
-                      .lineHeight(19)
+                      .fontFamily('PingFang SC-Regular')
+                      .fontWeight(400)
+                      .lineHeight(22)
+                      .textOverflow({ overflow: TextOverflow.Ellipsis })
+                      .margin({
+                        top: 4,
+                        left: 0,
+                        bottom: 4,
+                        right: 18
+                      })
+                      .maxLines(32)
                   }
-                  .fontColor(Color.White)
-                  .margin(4)
-                }
-                if(this.contentDetailData.newsTitle) {
-                  Text(`${this.contentDetailData.newsTitle}`)
-                    .fontColor(Color.White)
-                    .fontSize(16)
-                    .fontFamily('PingFang SC-Semibold')
-                    .fontWeight(600)
-                    .lineHeight(24)
-                    .margin({
-                      top: 4,
-                      left: 0,
-                      bottom: 4,
-                      right: 0
-                    })
-                }
-                if(this.contentDetailData.photoList?.[this.swiperIndex].picDesc) {
-                  Text(`${this.contentDetailData.photoList?.[this.swiperIndex].picDesc}`)
-                    .fontColor(Color.White)
-                    .fontSize(14)
-                    .fontFamily('PingFang SC-Regular')
-                    .fontWeight(400)
-                    .lineHeight(22)
-                    .textOverflow({ overflow: TextOverflow.Ellipsis })
-                    .margin({
-                      top: 4,
-                      left: 0,
-                      bottom: 4,
-                      right: 18
-                    })
-                    .maxLines(32)
                 }
               }
+              .width('100%')
             }
-            .width('100%')
+            .scrollable(ScrollDirection.Vertical)
+            .scrollBarWidth(0)
+            .height(px2vp(this.titleHeight))
+            .align(Alignment.Bottom)
           }
-          .scrollable(ScrollDirection.Vertical)
-          .scrollBarWidth(0)
-          .height(px2vp(this.titleHeight))
-          .align(Alignment.Bottom)
+          OperRowListView({
+            contentDetailData: this.contentDetailData,
+            publishCommentModel: this.publishCommentModel,
+            operationButtonList: this.operationButtonList,
+          })
         }
-        OperRowListView({
-          contentDetailData: this.contentDetailData,
-          publishCommentModel: this.publishCommentModel,
-          operationButtonList: this.operationButtonList,
-        })
+        .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
+          TransitionEffect.translate({ x: 0, y: `-${this.bottomSafeHeight}px` })
+        ))
       }
-      .visibility(!this.showDownload ? Visibility.Visible : Visibility.None)
-      Column(){
-        Row() {
-          Flex({
-            direction: FlexDirection.Row,
-            justifyContent: FlexAlign.SpaceBetween
-          }) {
-            if(this.contentDetailData?.photoList?.length) {
-              Text() {
-                Span(`${this.swiperIndex + 1}`)
-                  .fontSize(24)
-                  .fontFamily('PingFang SC-Medium')
-                  .fontWeight(500)
-                  .lineHeight(28)
-                Span(`/${this.contentDetailData?.photoList?.length}`)
-                  .fontSize(14)
-                  .fontFamily('PingFang SC-Medium')
-                  .fontWeight(500)
-                  .lineHeight(19)
+      if(this.showDownload) {
+        Column(){
+          Row() {
+            Flex({
+              direction: FlexDirection.Row,
+              justifyContent: FlexAlign.SpaceBetween
+            }) {
+              if(this.contentDetailData?.photoList?.length) {
+                Text() {
+                  Span(`${this.swiperIndex + 1}`)
+                    .fontSize(24)
+                    .fontFamily('PingFang SC-Medium')
+                    .fontWeight(500)
+                    .lineHeight(28)
+                  Span(`/${this.contentDetailData?.photoList?.length}`)
+                    .fontSize(14)
+                    .fontFamily('PingFang SC-Medium')
+                    .fontWeight(500)
+                    .lineHeight(19)
+                }
+                .fontColor(Color.White)
+                .margin(4)
               }
-              .fontColor(Color.White)
-              .margin(4)
-            }
 
-            if(this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
-              ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
-                .margin({
-                  top: 8,
-                  left: 18,
-                  bottom: 24,
-                  right: 18
-                })
+              if(this.contentDetailData.photoList?.[this.swiperIndex].picPath) {
+                ImageDownloadComponent({ url: this.contentDetailData.photoList?.[this.swiperIndex].picPath })
+                  .margin({
+                    top: 8,
+                    left: 18,
+                    bottom: 24,
+                    right: 18
+                  })
+              }
             }
           }
+          .width('100%')
         }
-        .width('100%')
+        .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
+          TransitionEffect.translate({ x: 0, y: `${this.bottomSafeHeight}px` })
+        ))
       }
-      .visibility(this.showDownload ? Visibility.Visible : Visibility.None)
     }
     .zIndex(10)
     .id('e_swiper_bottom')