Android紋波效果的實(shí)現(xiàn)

今天介紹Android中兩種實(shí)現(xiàn)紋波效果的方式奴愉。

一. 使用ViewAnimationUtils類

1.通過(guò)查看ViewAnimationUtils類源碼發(fā)現(xiàn)該類只有一個(gè)靜態(tài)方法:


靜態(tài)方法

2.靜態(tài)方法中各個(gè)參數(shù)的含義:


參數(shù)含義
  • view:使用紋波效果的視圖對(duì)象
  • centerX:圓心的x軸坐標(biāo)伴网,相對(duì)于view
  • centerY:圓形的Y軸坐標(biāo),相對(duì)于view
  • startRadius:圓的開始半徑
  • endRadius:圓的結(jié)束半徑

3.ViewAnimationUtils類是從API level 21引入的柜裸,因此在使用的時(shí)候需要首先判斷手機(jī)的版本號(hào)错森,然后再執(zhí)行紋波動(dòng)畫峻仇。下面以點(diǎn)擊一個(gè)Button為例俄讹,演示通過(guò)ViewAnimationUtils類實(shí)現(xiàn)的紋波效果:

布局文件activity.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_height="match_parent"
    android:gravity="center"    
    android:orientation="vertical">    

    <Button        
       android:id="@+id/view"        
       android:layout_width="250dp"        
       android:layout_height="150dp"
       android:layout_gravity="center_horizontal"
       android:text="Button"/>
</LinearLayout>

MainActivity.java

package rich.ivan.testa;

import android.animation.Animator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewAnimationUtils;
import android.view.animation.AccelerateInterpolator;
import android.widget.Button;

public class MainActivity extends AppCompatActivity implements View.OnClickListener, View.OnTouchListener {
  private int mRawX;   
  private int mRawY;    

  @Override    
  protected void onCreate(Bundle savedInstanceState) {             
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);        
    Button button = (Button) findViewById(R.id.view);
    button.setOnClickListener(this);        
    button.setOnTouchListener(this);    
  }    

  @Override    
  public void onClick(final View view) {        
    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP) {            
      Animator animator = ViewAnimationUtils.createCircularReveal(                
          view,                    
          mRawX,                    
          mRawY,                    
          0,                    
          Math.max(view.getWidth(), view.getHeight()));

      animator.setDuration(2000);            
      animator.setInterpolator(new AccelerateInterpolator());        

      animator.addListener(new Animator.AnimatorListener() {                   
        @Override                
        public void onAnimationStart(Animator animation) {}           
     
        @Override                
        public void onAnimationEnd(Animator animation) {}                
      
        @Override                
        public void onAnimationCancel(Animator animation) {}                

        @Override                
        public void onAnimationRepeat(Animator animation) {}            
      });            
    
      animator.start();        
    }    
  }    

  @Override    
  public boolean onTouch(View v, MotionEvent event) {        
    switch (event.getAction()) {            
      case MotionEvent.ACTION_DOWN:                
        mRawX = (int) event.getX();                
        mRawY = (int) event.getY();        
    }        

    return false;    
  }
}

4.點(diǎn)擊按鈕顯示紋波效果:


按鈕紋波效果圖

5.我們發(fā)現(xiàn)使用這種方式創(chuàng)建紋波效果時(shí)哆致,動(dòng)畫開始時(shí)整個(gè)Button被覆蓋了,隨著紋波的擴(kuò)散逐漸顯示出來(lái)患膛,這就是使用ViewAnimationUtils類創(chuàng)建紋波的特征摊阀,View會(huì)被先覆蓋掉。

二. 通過(guò)xml文件配置

1.因?yàn)榧y波效果在API 21以后才引入踪蹬,所以首先在res目錄下創(chuàng)建drawable-v21資源目錄胞此,然后在該目錄下新建ripple_effect.xml文件:

ripple_effect.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"         
        android:color="@color/colorPrimary">    
    <item>        
        <shape android:shape="rectangle">            
            <solid android:color="#FFFFFF"/>        
        </shape>    
    </item>
</ripple>

2.設(shè)置Button控件的屬性:android:background="@drawable/ripple_effect"

activity_main_test.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_height="match_parent"
    android:gravity="center"    
    android:orientation="vertical">    

    <Button        
       android:id="@+id/view"        
       android:layout_width="250dp"        
       android:layout_height="150dp"
       android:layout_gravity="center_horizontal"
       android:background="@drawable/ripple_effect"
       android:text="Button"/>
</LinearLayout>

3.修改MainActivity.java中引用的布局文件,同時(shí)刪除ViewAnimationUtils創(chuàng)建動(dòng)畫部分的代碼(這里不再貼出代碼)跃捣。

setContentView(R.layout.activity_main_test);

4.實(shí)現(xiàn)效果圖:


效果圖

5.使用這種方式繪制紋波效果時(shí)系統(tǒng)不會(huì)先覆蓋原來(lái)的View豌鹤,而是在原來(lái)的View上面繪制圓形,在繪制紋波時(shí)保證了原來(lái)的View也能正常顯示枝缔。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末布疙,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子愿卸,更是在濱河造成了極大的恐慌灵临,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,682評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件趴荸,死亡現(xiàn)場(chǎng)離奇詭異儒溉,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)发钝,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門顿涣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人酝豪,你說(shuō)我怎么就攤上這事涛碑。” “怎么了孵淘?”我有些...
    開封第一講書人閱讀 165,083評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵蒲障,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我瘫证,道長(zhǎng)揉阎,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,763評(píng)論 1 295
  • 正文 為了忘掉前任背捌,我火速辦了婚禮毙籽,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘毡庆。我一直安慰自己坑赡,他們只是感情好巡扇,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著垮衷,像睡著了一般厅翔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上搀突,一...
    開封第一講書人閱讀 51,624評(píng)論 1 305
  • 那天刀闷,我揣著相機(jī)與錄音,去河邊找鬼仰迁。 笑死甸昏,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的徐许。 我是一名探鬼主播施蜜,決...
    沈念sama閱讀 40,358評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼雌隅!你這毒婦竟也來(lái)了翻默?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,261評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤恰起,失蹤者是張志新(化名)和其女友劉穎修械,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體检盼,經(jīng)...
    沈念sama閱讀 45,722評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡肯污,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了吨枉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片蹦渣。...
    茶點(diǎn)故事閱讀 40,030評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖貌亭,靈堂內(nèi)的尸體忽然破棺而出柬唯,到底是詐尸還是另有隱情,我是刑警寧澤属提,帶...
    沈念sama閱讀 35,737評(píng)論 5 346
  • 正文 年R本政府宣布权逗,位于F島的核電站美尸,受9級(jí)特大地震影響冤议,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜师坎,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評(píng)論 3 330
  • 文/蒙蒙 一恕酸、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧胯陋,春花似錦蕊温、人聲如沸袱箱。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,941評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)发笔。三九已至,卻和暖如春凉翻,著一層夾襖步出監(jiān)牢的瞬間了讨,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,057評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工制轰, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留前计,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,237評(píng)論 3 371
  • 正文 我出身青樓垃杖,卻偏偏與公主長(zhǎng)得像男杈,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子调俘,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容