Просмотр исходного кода

grid和list的滚动加上动画效果

onecold 1 год назад
Родитель
Сommit
73ba0f3ad6
1 измененных файлов с 33 добавлено и 3 удалено
  1. 33 3
      entry/src/main/ets/view/LocalMusic.ets

+ 33 - 3
entry/src/main/ets/view/LocalMusic.ets

@@ -2970,7 +2970,8 @@ export struct LocalMusic {
   private scroller: Scroller = new Scroller();
   @State startIndex:number = 0
   @State endIndex:number = 0
-
+  @State scaleValue:number = 1
+  @State pinchValue:number = 1
   @Builder
   getGridView(){
 
@@ -2982,6 +2983,7 @@ export struct LocalMusic {
 
           }
         }
+        .transition(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }))
         .clickEffect({level:ClickEffectLevel.LIGHT})
         .scale({ x: this.scaleItem === index ? 1.02 : 1, y: this.scaleItem === index ? 1.02 : 1 })
         .zIndex(this.dragItem === index ? 1 : 0)
@@ -3066,6 +3068,17 @@ export struct LocalMusic {
     .columnsTemplate(this.isGridCoverBig?'repeat(auto-fit, 150)':'repeat(auto-fit, 110)')
     .rowsGap(12)
     .visibility(this.isGridMusic?Visibility.Visible:Visibility.None)
+    .scale({x:this.scaleValue,y:this.scaleValue,z:1})
+    .gesture(PinchGesture({ fingers: 2 })
+      .onActionEnd((event: GestureEvent)=>{
+        this.setFingersTwo()
+      })
+      .onActionUpdate(e=>{
+        this.scaleValue = this.pinchValue*e.scale
+      })
+      .onActionStart(e => {
+
+      }))
     .enableScrollInteraction(true)
     // 滚轴滑动,记录下滑动时的起始位置和终点位置
     .onScrollIndex((start: number, end: number) => {
@@ -3093,6 +3106,20 @@ export struct LocalMusic {
 
   }
 
+
+  setFingersTwo(){
+    this.pinchValue = this.scaleValue;
+    Logger.info('this.pinchValue = '+this.pinchValue);
+    // this.isGridCoverBig = !this.isGridCoverBig
+    // if(this.pinchValue >==1){
+    //   this.isGridCoverBig = true;
+    // }else{
+    //   this.isGridCoverBig = false;
+    // }
+    this.pinchValue = 1;
+    this.scaleValue = 1;
+  }
+
   @State longItemFilePath:string =''
   @State tempLyricContent:string = ''
   @Builder
@@ -3370,8 +3397,8 @@ export struct LocalMusic {
           .animation({ curve: Curve.Sharp, duration: 300 })
 
         }
+        .transition(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }))
         .clickEffect({level:ClickEffectLevel.LIGHT})
-        //.transition(TransitionEffect.move(TransitionEdge.BOTTOM).animation({ duration: 800, curve: Curve.Ease, delay: 100*index }))
         .swipeAction((
           (this.modeType==0||this.modeType==1 ||((this.modeType==3||this.modeType==2)&&this.isCanBack))
             && item.type !== CommonConstants.TYPE_IS_CSJAD &&
@@ -4690,6 +4717,7 @@ export struct LocalMusic {
           duration: 666,
           curve: 'ease-in-out' // 可选动画曲线
         })
+        .transition(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }))
         .clickEffect({level:ClickEffectLevel.MIDDLE})
         //拖动List关键代码开始
         .scale({ x: this.scaleSelect(index), y: this.scaleSelect(index) })
@@ -9632,7 +9660,9 @@ function customPopupBuilder(dataBu: BubbleBean) {
         }
         .backgroundColor($r('app.color.settings_background_main'))
         .margin({ top: 6, bottom: 6 })
-      }.onClick(() => {
+      }
+      .transition(TransitionEffect.scale({ x: 1.2, y: 1.2 }).animation({ duration: 500 }))
+      .onClick(() => {
         dataBu.onItemClick?.(index)
       })
     })