自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HarmonyOS自定義UI之水波紋效果

作者：王江濤
開(kāi)發(fā) 前端 OpenHarmony
任何東西都可以在生活中找到案例，我們要做水波紋效果，就想象一下，每個(gè)人應(yīng)該都有把石頭扔進(jìn)進(jìn)水里的經(jīng)歷，首先水波是從中心點(diǎn)的小圓慢慢放大為大圓，然后慢慢消失。

[[423871]]

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

概述

​ 當(dāng)點(diǎn)擊一個(gè)view時(shí)，然后一個(gè)水波紋就會(huì)從點(diǎn)擊處擴(kuò)散開(kāi)來(lái)，模擬水波背景動(dòng)效實(shí)現(xiàn)。

實(shí)現(xiàn)思路

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

效果如下：

HarmonyOS 自定義UI之水波紋效果-鴻蒙HarmonyOS技術(shù)社區(qū)

實(shí)現(xiàn)過(guò)程：

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

  1. //初始化畫筆 
  2. private void inint() { 
  3.      this.animationRunning = false; 
  4.      this.paint = new Paint(); 
  5.      this.paint.setAntiAlias(true); 
  6.      this.paint.setStyle(FILLANDSTROKE_STYLE); 
  7.      this.paint.setColor(new Color(Color.getIntColor("#0000FF")));//設(shè)置水波紋的顏色 
  8.  } 
  9.  
  10.  @Override 
  11.  public void onDraw(Component component, Canvas canvas) { 
  12.      float touchX = (float) this.getWidth() / 2; 
  13.      float touchY = (float) this.getHeight() / 2; 
  14.       this.paint.setAlpha(1 - 1* this.ripplePose);//透明都也是從0到1  因?yàn)閞ipplePose 是從0-1變換 
  15.      this.radiusMax = component.getWidth()/2; 
  16.         float radiusMax2 = component.getWidth()/4; 
  17.      //根據(jù)比例設(shè)置半徑大小 
  18.       canvas.drawCircle(touchX, touchY,  this.radiusMax * this.ripplePose +radiusMax2, this.paint); 
  19.  } 

this.ripplePose的變化曲率為 0 - 1 根據(jù)比例計(jì)算出半徑從小到大的大小，來(lái)繪制圓，這里我為什么加 radiusMax2是因?yàn)榻o他一個(gè)初始半徑，讓他不要從圓心開(kāi)始，這樣看起來(lái)就比較舒服了， 在點(diǎn)擊的時(shí)候觸發(fā)動(dòng)畫，代碼如下：

  1. @Override 
  2. public boolean onTouchEvent(Component component, TouchEvent touchEvent) { 
  3.  if (touchEvent.getPointerCount() == 1 && touchEvent.getAction() == PRIMARY_POINT_DOWN) { // 一個(gè)手指按下 
  4.      this.downX = this.getTouchX(touchEvent, 0); 
  5.      this.createAnimation(this.getTouchX(touchEvent, 0), this.getTouchY(touchEvent, 0)); 
  6.  } else if (touchEvent.getPointerCount() == 1 && touchEvent.getAction() == POINT_MOVE) { // 一個(gè)手指移動(dòng) 
  7.  
  8.  
  9.  } else if (touchEvent.getPointerCount() == 1 && touchEvent.getAction() == PRIMARY_POINT_UP) { //一個(gè)手指抬起 
  10.      this.invalidate(); 
  11.  } 
  12.  return false; 
  13. } 

效果如下：

但是當(dāng)我把水波紋應(yīng)用到 PageSlider 中帶有ListContainer 的時(shí)候，滑動(dòng)的時(shí)候也會(huì)觸發(fā)水波紋，所以需要解決事件沖突。

事件沖突解決

在添加了長(zhǎng)按陰影效果后，在滑動(dòng)PageSlider 頁(yè)面的時(shí)候listContainer的子item也會(huì)觸發(fā)點(diǎn)擊事件，導(dǎo)致各種事件沖突，解決方法就是 在Touch事件中計(jì)算定義出各種事件，各個(gè)擊破。

1.點(diǎn)擊事件：抬起時(shí)間-按下時(shí)間 沒(méi)有超過(guò)200ms

2.長(zhǎng)按事件：按下超過(guò)200ms

3.長(zhǎng)按滑動(dòng)事件：移動(dòng)監(jiān)聽(tīng)里面計(jì)算 滑動(dòng)距離超過(guò)20，時(shí)間超過(guò)200 沒(méi)有抬起

4.短按滑動(dòng)事件: 時(shí)間少于200ms 距離超過(guò) 200px 沒(méi)有抬起

5.然后處理各種事件

另外發(fā)現(xiàn)，手機(jī)點(diǎn)擊的時(shí)候移動(dòng)事件會(huì)觸發(fā)，而模擬器不會(huì)觸發(fā)，這個(gè)也需要注意！

這樣就完成了整個(gè)繪制過(guò)程，代碼如下：

  1. /** 
  2.   * 觸摸監(jiān)聽(tīng) 
  3.   * 
  4.   * @param component view 
  5.   * @param touchEvent touchEvent 
  6.   * @return 是否消費(fèi) 
  7.   */ 
  8. public boolean onTouchEvent(Component component, TouchEvent touchEvent) { 
  9.  if (touchEvent.getPointerCount() == NUM1 && touchEvent.getAction() == NUM1) { 
  10.      this.downX = this.getTouchX(touchEvent, 0); 
  11.      this.downY = this.getTouchY(touchEvent, 0); 
  12.      this.downTime = System.currentTimeMillis(); 
  13.      this.isDownPose = true; 
  14.      this.isSlide = false; 
  15.      isYinYing = false; 
  16.  } else if (touchEvent.getPointerCount() == NUM1 && touchEvent.getAction() == NUM3) { 
  17.      float upx = this.getTouchX(touchEvent, 0); 
  18.      long theTime = System.currentTimeMillis(); 
  19.      int xjuli = (int) Math.abs(upx - downX); 
  20.      int timejuli = (int) Math.abs(theTime - this.downTime); 
  21.      if (isDownPose && timejuli > NUM200 && xjuli < NUM2 && !isSlide) { 
  22.          this.createAnimation(this.getTouchX(touchEvent, 0), this.getTouchY(touchEvent, 0)); 
  23.          myevenHandler.sendEvent(1, NUM250); 
  24.          this.isSlide = true; 
  25.          return true; 
  26.      } 
  27.      return true; 
  28.  } else if (touchEvent.getPointerCount() == NUM1 && touchEvent.getAction() == NUM2) { 
  29.      float upx = this.getTouchX(touchEvent, 0); 
  30.      long upTimes = System.currentTimeMillis(); 
  31.      isDownPose = false; 
  32.      isYinYing = false; 
  33.      int xjuli = (int) Math.abs(upx - downX); 
  34.      if (!this.isDownPose && upTimes - this.downTime < NUM200 && xjuli < NUM5) { 
  35.          this.isDownPose = false; 
  36.          this.createAnimation(this.getTouchX(touchEvent, 0), this.getTouchY(touchEvent, 0)); 
  37.      } else if (!this.isDownPose && System.currentTimeMillis() - this.downTime > NUM250) { 
  38.          this.invalidate(); 
  39.      } else { 
  40.          this.isDownPose = false; 
  41.      } 
  42.      this.isDownPose = false; 
  43.  } 
  44.  return true; 
  45. } 
  46.   
  47. /** 
  48.   * 長(zhǎng)按監(jiān)聽(tīng) 
  49.   * 
  50.   * @param component view 
  51.   */ 
  52. @Override 
  53.  public void onLongClicked(Component component) { 
  54.      this.createAnimation(this.downX, this.downY); 
  55.      myevenHandler.sendEvent(1, NUM250); 
  56.      this.isSlide = true; 
  57.  } 
  58.   
  59.   
  60.    /** 
  61.   * 繪制 
  62.   * 
  63.   * @param var1 Component 
  64.   * @param var2 Canvas 
  65.   */ 
  66.   public void onDraw(Component var1, Canvas var2) { 
  67.      if (isYinYing) { 
  68.          this.paint.setAlpha(NUM03F); 
  69.          var2.drawCircle(this.touchX, this.touchY, this.radiusMax * this.ripplePose - 0 / NUM2F, this.paint); 
  70.      } else { 
  71.          if (this.getWidth() != 0 && this.getHeight() != 0) { 
  72.              this.radiusMax = (float) Math.sqrt(this.getWidth() 
  73.                      * this.getWidth() + this.getHeight() * this.getHeight()); 
  74.              if (this.rippleType != NUM2) { 
  75.                  this.radiusMax /= NUM2F; 
  76.              } 
  77.              this.radiusMax -= (float) this.ripplePadding; 
  78.              if (this.isCentered || this.rippleType == 1) { 
  79.                  this.touchX = (float) this.getWidth() / NUM2F; 
  80.                  this.touchY = (float) this.getHeight() / NUM2F; 
  81.              } 
  82.              this.paint.setAlpha(this.rippleAlpha - this.rippleAlpha * this.ripplePose); 
  83.              float var3 = 0.0F; 
  84.              if (this.rippleType == NUM1 && this.ripplePose > NUM04) { 
  85.                  this.paint.setStyle(Paint.Style.STROKE_STYLE); 
  86.                  var3 = this.radiusMax * this.ripplePose - this.radiusMax * (this.ripplePose - NUM04) / NUM06; 
  87.                  this.paint.setStrokeWidth(this.radiusMax * this.ripplePose 
  88.                          - this.radiusMax * (this.ripplePose - NUM04) / NUM06); 
  89.              } else { 
  90.                  this.paint.setStyle(Paint.Style.FILL_STYLE); 
  91.              } 
  92.              var2.drawCircle(this.touchX, this.touchY, this.radiusMax * this.ripplePose - var3 / NUM2F, this.paint); 
  93.          } 
  94.      } 
  95.  } 

效果如下：

完整項(xiàng)目代碼

想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

 

責(zé)任編輯：jianghua 來(lái)源： 鴻蒙社區(qū)
鴻蒙HarmonyOS應(yīng)用
相關(guān)推薦

2023-10-30 08:35:50

水波紋效果vue

2023-12-20 17:28:48

水波紋ArkUI動(dòng)畫開(kāi)發(fā)

2024-05-31 08:43:31

2021-09-02 10:00:42

鴻蒙HarmonyOS應(yīng)用

2021-09-15 10:19:15

鴻蒙HarmonyOS應(yīng)用

2009-06-25 14:53:35

自定義UI組件JSF框架

2022-05-18 16:17:31

設(shè)備開(kāi)發(fā)鴻蒙

2011-03-02 10:24:23

DashboardAndroid用戶界面設(shè)計(jì)模板

2021-01-21 07:35:40

JenkinsUICSS

2022-03-21 15:19:27

鴻蒙UI組件ets自定義

2021-03-09 15:23:45

鴻蒙HarmonyOS應(yīng)用開(kāi)發(fā)

2013-03-28 10:58:30

自定義Android界android

2013-01-06 10:43:54

Android開(kāi)發(fā)View特效

2024-05-30 08:23:37

ViewPager滑動(dòng)效果接口

2022-04-24 15:17:56

鴻蒙操作系統(tǒng)

2015-02-12 15:33:43

微信SDK

2010-04-28 11:14:20

Windows 7桌面

2022-04-07 14:17:15

Harmonytoast組件鴻蒙

2023-02-20 15:20:43

啟動(dòng)頁(yè)組件鴻蒙

2021-08-24 15:25:59

鴻蒙HarmonyOS應(yīng)用
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)