[[423871]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com

概述

​ 當點擊一個view時，然后一個水波紋就會從點擊處擴散開來，模擬水波背景動效實現。

實現思路

​ 任何東西都可以在生活中找到案例，我們要做水波紋效果，就想象一下，每個人應該都有把石頭扔進進水里的經歷，首先水波是從中心點的小圓慢慢放大為大圓，然后慢慢消失，我們模擬的時候只需要畫圓，通過Canvas. drawCircle(float x, float y, float radius, Paint paint); 方法來實現，通過一點點放大半徑在根據變化速率設置透明度的方式實現。

效果如下：

實現過程：

通過計算view的最大寬度 / 2為布局的最大半徑，最小半徑就是0然后給它一個插值動畫讓它動起來，每次點擊就讓它繪制圓，圓的半徑為 (this.radiusMax * 插值動畫比例 )，插值動畫比例的變化曲率為 0 - 1 根據比例計算出半徑從小到大的大小，代碼如下：

//初始化畫筆 
private void inint() { 
     this.animationRunning = false; 
     this.paint = new Paint(); 
     this.paint.setAntiAlias(true); 
     this.paint.setStyle(FILLANDSTROKE_STYLE); 
     this.paint.setColor(new Color(Color.getIntColor("#0000FF")));//設置水波紋的顏色 
 } 
 
 @Override 
 public void onDraw(Component component, Canvas canvas) { 
     float touchX = (float) this.getWidth() / 2; 
     float touchY = (float) this.getHeight() / 2; 
      this.paint.setAlpha(1 - 1* this.ripplePose);//透明都也是從0到1  因為ripplePose 是從0-1變換 
     this.radiusMax = component.getWidth()/2; 
        float radiusMax2 = component.getWidth()/4; 
     //根據比例設置半徑大小 
      canvas.drawCircle(touchX, touchY,  this.radiusMax * this.ripplePose +radiusMax2, this.paint); 
 } 

this.ripplePose的變化曲率為 0 - 1 根據比例計算出半徑從小到大的大小，來繪制圓，這里我為什么加 radiusMax2是因為給他一個初始半徑，讓他不要從圓心開始，這樣看起來就比較舒服了， 在點擊的時候觸發動畫，代碼如下：

@Override 
public boolean onTouchEvent(Component component, TouchEvent touchEvent) { 
 if (touchEvent.getPointerCount() == 1 && touchEvent.getAction() == PRIMARY_POINT_DOWN) { // 一個手指按下 
     this.downX = this.getTouchX(touchEvent, 0); 
     this.createAnimation(this.getTouchX(touchEvent, 0), this.getTouchY(touchEvent, 0)); 
 } else if (touchEvent.getPointerCount() == 1 && touchEvent.getAction() == POINT_MOVE) { // 一個手指移動 
 
 
 } else if (touchEvent.getPointerCount() == 1 && touchEvent.getAction() == PRIMARY_POINT_UP) { //一個手指抬起 
     this.invalidate(); 
 } 
 return false; 
} 

效果如下：

但是當我把水波紋應用到 PageSlider 中帶有ListContainer 的時候，滑動的時候也會觸發水波紋，所以需要解決事件沖突。

事件沖突解決

在添加了長按陰影效果后，在滑動PageSlider 頁面的時候listContainer的子item也會觸發點擊事件，導致各種事件沖突，解決方法就是 在Touch事件中計算定義出各種事件，各個擊破。

1.點擊事件：抬起時間-按下時間 沒有超過200ms

2.長按事件：按下超過200ms

3.長按滑動事件：移動監聽里面計算 滑動距離超過20，時間超過200 沒有抬起

4.短按滑動事件: 時間少于200ms 距離超過 200px 沒有抬起

5.然后處理各種事件

另外發現，手機點擊的時候移動事件會觸發，而模擬器不會觸發，這個也需要注意！

這樣就完成了整個繪制過程，代碼如下：

/** 
  * 觸摸監聽 
  * 
  * @param component view 
  * @param touchEvent touchEvent 
  * @return 是否消費 
  */ 
public boolean onTouchEvent(Component component, TouchEvent touchEvent) { 
 if (touchEvent.getPointerCount() == NUM1 && touchEvent.getAction() == NUM1) { 
     this.downX = this.getTouchX(touchEvent, 0); 
     this.downY = this.getTouchY(touchEvent, 0); 
     this.downTime = System.currentTimeMillis(); 
     this.isDownPose = true; 
     this.isSlide = false; 
     isYinYing = false; 
 } else if (touchEvent.getPointerCount() == NUM1 && touchEvent.getAction() == NUM3) { 
     float upx = this.getTouchX(touchEvent, 0); 
     long theTime = System.currentTimeMillis(); 
     int xjuli = (int) Math.abs(upx - downX); 
     int timejuli = (int) Math.abs(theTime - this.downTime); 
     if (isDownPose && timejuli > NUM200 && xjuli < NUM2 && !isSlide) { 
         this.createAnimation(this.getTouchX(touchEvent, 0), this.getTouchY(touchEvent, 0)); 
         myevenHandler.sendEvent(1, NUM250); 
         this.isSlide = true; 
         return true; 
     } 
     return true; 
 } else if (touchEvent.getPointerCount() == NUM1 && touchEvent.getAction() == NUM2) { 
     float upx = this.getTouchX(touchEvent, 0); 
     long upTimes = System.currentTimeMillis(); 
     isDownPose = false; 
     isYinYing = false; 
     int xjuli = (int) Math.abs(upx - downX); 
     if (!this.isDownPose && upTimes - this.downTime < NUM200 && xjuli < NUM5) { 
         this.isDownPose = false; 
         this.createAnimation(this.getTouchX(touchEvent, 0), this.getTouchY(touchEvent, 0)); 
     } else if (!this.isDownPose && System.currentTimeMillis() - this.downTime > NUM250) { 
         this.invalidate(); 
     } else { 
         this.isDownPose = false; 
     } 
     this.isDownPose = false; 
 } 
 return true; 
} 
  
/** 
  * 長按監聽 
  * 
  * @param component view 
  */ 
@Override 
 public void onLongClicked(Component component) { 
     this.createAnimation(this.downX, this.downY); 
     myevenHandler.sendEvent(1, NUM250); 
     this.isSlide = true; 
 } 
  
  
   /** 
  * 繪制 
  * 
  * @param var1 Component 
  * @param var2 Canvas 
  */ 
  public void onDraw(Component var1, Canvas var2) { 
     if (isYinYing) { 
         this.paint.setAlpha(NUM03F); 
         var2.drawCircle(this.touchX, this.touchY, this.radiusMax * this.ripplePose - 0 / NUM2F, this.paint); 
     } else { 
         if (this.getWidth() != 0 && this.getHeight() != 0) { 
             this.radiusMax = (float) Math.sqrt(this.getWidth() 
                     * this.getWidth() + this.getHeight() * this.getHeight()); 
             if (this.rippleType != NUM2) { 
                 this.radiusMax /= NUM2F; 
             } 
             this.radiusMax -= (float) this.ripplePadding; 
             if (this.isCentered || this.rippleType == 1) { 
                 this.touchX = (float) this.getWidth() / NUM2F; 
                 this.touchY = (float) this.getHeight() / NUM2F; 
             } 
             this.paint.setAlpha(this.rippleAlpha - this.rippleAlpha * this.ripplePose); 
             float var3 = 0.0F; 
             if (this.rippleType == NUM1 && this.ripplePose > NUM04) { 
                 this.paint.setStyle(Paint.Style.STROKE_STYLE); 
                 var3 = this.radiusMax * this.ripplePose - this.radiusMax * (this.ripplePose - NUM04) / NUM06; 
                 this.paint.setStrokeWidth(this.radiusMax * this.ripplePose 
                         - this.radiusMax * (this.ripplePose - NUM04) / NUM06); 
             } else { 
                 this.paint.setStyle(Paint.Style.FILL_STYLE); 
             } 
             var2.drawCircle(this.touchX, this.touchY, this.radiusMax * this.ripplePose - var3 / NUM2F, this.paint); 
         } 
     } 
 } 

效果如下：

完整項目代碼

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

https://harmonyos.51cto.com