今天介紹Android中兩種實(shí)現(xiàn)紋波效果的方式奴愉。
一. 使用ViewAnimationUtils類
1.通過(guò)查看ViewAnimationUtils類源碼發(fā)現(xiàn)該類只有一個(gè)靜態(tài)方法:
2.靜態(tài)方法中各個(gè)參數(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也能正常顯示枝缔。