王士厅

图集点击添加动画

@@ -47,8 +47,10 @@ export struct MultiPictureDetailPageComponent { @@ -47,8 +47,10 @@ export struct MultiPictureDetailPageComponent {
47 @State publishCommentModel: publishCommentModel = new publishCommentModel() 47 @State publishCommentModel: publishCommentModel = new publishCommentModel()
48 @State operationButtonList: string[] = ['comment', 'like', 'collect', 'share'] 48 @State operationButtonList: string[] = ['comment', 'like', 'collect', 'share']
49 @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') as number; 49 @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') as number;
  50 + @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') as number;
50 @State windowHeight: number = AppStorage.get<number>('windowHeight') as number; 51 @State windowHeight: number = AppStorage.get<number>('windowHeight') as number;
51 @State currentOffset:number = 0 52 @State currentOffset:number = 0
  53 + @State duration:number = 0
52 54
53 //watch监听页码回调 55 //watch监听页码回调
54 onCurrentPageNumUpdated(): void { 56 onCurrentPageNumUpdated(): void {
@@ -81,6 +83,7 @@ export struct MultiPictureDetailPageComponent { @@ -81,6 +83,7 @@ export struct MultiPictureDetailPageComponent {
81 } 83 }
82 } 84 }
83 85
  86 +
84 aboutToDisappear() { 87 aboutToDisappear() {
85 88
86 } 89 }
@@ -98,6 +101,7 @@ export struct MultiPictureDetailPageComponent { @@ -98,6 +101,7 @@ export struct MultiPictureDetailPageComponent {
98 @Builder 101 @Builder
99 init() { 102 init() {
100 if (this.contentDetailData.rmhPlatform == 1) { 103 if (this.contentDetailData.rmhPlatform == 1) {
  104 + if(!this.showDownload) {
101 Row() { 105 Row() {
102 Row({ space: 8 }) { 106 Row({ space: 8 }) {
103 if (this.getImgUrl()){ 107 if (this.getImgUrl()){
@@ -221,7 +225,11 @@ export struct MultiPictureDetailPageComponent { @@ -221,7 +225,11 @@ export struct MultiPictureDetailPageComponent {
221 middle: { anchor: "__container__", align: HorizontalAlign.Center } 225 middle: { anchor: "__container__", align: HorizontalAlign.Center }
222 }) 226 })
223 .id('e_attention') 227 .id('e_attention')
224 - .visibility(!this.showDownload ? Visibility.Visible : Visibility.None) 228 + .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
  229 + TransitionEffect.translate({ x: 0, y: `-${this.topSafeHeight + 12}px` })
  230 + ))
  231 + }
  232 +
225 } 233 }
226 if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) { 234 if (this.contentDetailData?.photoList && this.contentDetailData?.photoList?.length > 0) {
227 Swiper(this.swiperController) { 235 Swiper(this.swiperController) {
@@ -241,6 +249,9 @@ export struct MultiPictureDetailPageComponent { @@ -241,6 +249,9 @@ export struct MultiPictureDetailPageComponent {
241 this.currentOffset = Math.abs(extraInfo.currentOffset) 249 this.currentOffset = Math.abs(extraInfo.currentOffset)
242 }) 250 })
243 .onTouch((event: TouchEvent) => { 251 .onTouch((event: TouchEvent) => {
  252 + if(this.duration === 0) {
  253 + this.duration = 500
  254 + }
244 if(event.type === 1) { 255 if(event.type === 1) {
245 // if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) { 256 // if(this.currentOffset > px2vp((this.windowHeight - item.height)/2 - 100)) {
246 if(this.currentOffset > 160) { 257 if(this.currentOffset > 160) {
@@ -285,6 +296,7 @@ export struct MultiPictureDetailPageComponent { @@ -285,6 +296,7 @@ export struct MultiPictureDetailPageComponent {
285 }) 296 })
286 } 297 }
287 Column(){ 298 Column(){
  299 + if(!this.showDownload) {
288 Column(){ 300 Column(){
289 Row() { 301 Row() {
290 Scroll(this.scroller) { 302 Scroll(this.scroller) {
@@ -354,7 +366,11 @@ export struct MultiPictureDetailPageComponent { @@ -354,7 +366,11 @@ export struct MultiPictureDetailPageComponent {
354 operationButtonList: this.operationButtonList, 366 operationButtonList: this.operationButtonList,
355 }) 367 })
356 } 368 }
357 - .visibility(!this.showDownload ? Visibility.Visible : Visibility.None) 369 + .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
  370 + TransitionEffect.translate({ x: 0, y: `-${this.bottomSafeHeight}px` })
  371 + ))
  372 + }
  373 + if(this.showDownload) {
358 Column(){ 374 Column(){
359 Row() { 375 Row() {
360 Flex({ 376 Flex({
@@ -391,7 +407,10 @@ export struct MultiPictureDetailPageComponent { @@ -391,7 +407,10 @@ export struct MultiPictureDetailPageComponent {
391 } 407 }
392 .width('100%') 408 .width('100%')
393 } 409 }
394 - .visibility(this.showDownload ? Visibility.Visible : Visibility.None) 410 + .transition(TransitionEffect.OPACITY.animation({ duration: this.duration, curve: Curve.Ease }).combine(
  411 + TransitionEffect.translate({ x: 0, y: `${this.bottomSafeHeight}px` })
  412 + ))
  413 + }
395 } 414 }
396 .zIndex(10) 415 .zIndex(10)
397 .id('e_swiper_bottom') 416 .id('e_swiper_bottom')