本文實例為大家分享了Android 5.0 實現水波擴散效果的具體代碼，供大家參考，具體內容如下
該效果是通過自定義界面來實現的
1、首先自定義屬性，attrs.xml代碼如下：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="RippleView">
<attr name="rippleColor" format="color" />
<attr name="rippleAlpha" format="float" />
<attr name="maskAlpha" format="float" />
<attr name="rippleTime" format="integer" />
</declare-styleable>
</resources>
其中屬性rippleColor為水波動畫的顏色，rippleAlpha為其透明度，rippleTime為動畫持續時間，maskAlpha為觸摸遮掩層的透明度。
2、自定義RippleView類繼承RelativeLayout布局，也可以由需求所定繼承于其它類，實現水波擴散效果主要的有兩點：水波擴散的繪制和動畫
1)水波的繪制其實就是繪制一個圓形
canvas.drawCircle(mDownX, mDownY, mRadius, mRipplePaint);
2)動畫效果就是該圓形的繪制從小到大的過程，而該圓形到最大時的半徑長度就是當前所在布局的對角線長度：
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 獲取最大半徑
mMaxRadius = (float) Math.sqrt(w * w + h * h);
}
動畫效果用屬性動畫ObjectAnimator來實現（ObjectAnimator是android3.0后出現的）如下
mRippleAnim = ObjectAnimator.ofFloat(this, "radius", 0, mMaxRadius); mRippleAnim.setInterpolator(new AccelerateDecelerateInterpolator()); mRippleAnim.setDuration(mRippleTime);
其中的radius為自定義的屬性，在動畫執行時會回調對應的方法，只需要在該方法中更新圓形的半徑就行了
public void setRadius(final float radius) {
mRadius = radius;
invalidate();
}
RippleView完整代碼如下：
public class RippleView extends RelativeLayout {
private int mRippleColor;// 水波顏色
private float mMaskAlpha;// 遮掩透明度
private float mRippleAlpha;// 水波透明度
private int mRippleTime;// 水波動畫時間
private ObjectAnimator mRippleAnim;// 顯示水波動畫
private float mRadius;// 當前的半徑
private float mMaxRadius;// 水波最大半徑
private float mDownX; // 記錄手指按下的位置
private float mDownY;
private boolean mIsMask;
private boolean mIsAnimating;// 是否正在播放動畫
private RectF mRect;
private Path mPath;
private Paint mMaskPaint;
private Paint mRipplePaint;
public RippleView(Context context) {
this(context, null);
}
public RippleView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RippleView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
// 獲取自定義屬性
TypedArray ta = context.obtainStyledAttributes(attrs,
R.styleable.RippleView);
mRippleColor = ta.getColor(R.styleable.RippleView_rippleColor,
mRippleColor);
mMaskAlpha = ta.getFloat(R.styleable.RippleView_maskAlpha, mMaskAlpha);
mRippleAlpha = ta.getFloat(R.styleable.RippleView_rippleAlpha,
mRippleAlpha);
mRippleTime = ta.getInt(R.styleable.RippleView_rippleTime, mRippleTime);
ta.recycle();
initLast();
}
// 初始化方法
private void init() {
mRippleColor = Color.BLACK;
mMaskAlpha = 0.4f;
mRippleAlpha = 0.8f;
mRippleTime = 800;
mPath = new Path();
mMaskPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mRipplePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
}
// 初始化
private void initLast() {
mMaskPaint.setColor(mRippleColor);
mRipplePaint.setColor(mRippleColor);
mMaskPaint.setAlpha((int) (mMaskAlpha * 255));
mRipplePaint.setAlpha((int) (mRippleAlpha * 255));
}
// 初始化動畫
private void initAnim() {
mRippleAnim = ObjectAnimator.ofFloat(this, "radius", 0, mMaxRadius);
mRippleAnim.setInterpolator(new AccelerateDecelerateInterpolator());
mRippleAnim.setDuration(mRippleTime);
mRippleAnim.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {
mIsAnimating = true;
}
@Override
public void onAnimationEnd(Animator animator) {
setRadius(0);
mIsMask = false;
mIsAnimating = false;
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 獲取最大半徑
mMaxRadius = (float) Math.sqrt(w * w + h * h);
// 獲取該類布局范圍
mRect = new RectF(0f, 0f, getMeasuredWidth() * 1.0f,
getMeasuredHeight() * 1.0f);
// 初始化動畫
initAnim();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
// 按下事件
if (event.getAction() == MotionEvent.ACTION_DOWN) {
mIsMask = true;
invalidate();
} else if (event.getAction() == MotionEvent.ACTION_MOVE) {
invalidate();
}
// 抬起事件
else if (event.getAction() == MotionEvent.ACTION_UP) {
mDownX = event.getX();
mDownY = event.getY();
if (mIsAnimating) {
mRippleAnim.cancel();
}
boolean isInView = mRect.contains(mDownX, mDownY);
if (isInView) {
mRippleAnim.start();
} else {
mIsMask = false;
invalidate();
}
}
return true;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// 繪制遮掩
if (mIsMask) {
canvas.save(Canvas.CLIP_SAVE_FLAG);
mPath.reset();
mPath.addRect(mRect, Path.Direction.CW);
canvas.clipPath(mPath);
canvas.drawRect(mRect, mMaskPaint);
canvas.restore();
}
// 繪制水波
canvas.save(Canvas.CLIP_SAVE_FLAG);
mPath.reset();
mPath.addCircle(mDownX, mDownY, mRadius, Path.Direction.CW);
canvas.clipPath(mPath);
canvas.drawCircle(mDownX, mDownY, mRadius, mRipplePaint);
canvas.restore();
}
// 屬性動畫回調的方法
public void setRadius(final float radius) {
mRadius = radius;
invalidate();
}
}
界面布局代碼
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ripple="http://schemas.android.com/apk/res/com.example.rippleview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000" >
<com.example.rippleview.RippleView
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:background="#ffffff"
android:clickable="true"
ripple:rippleColor="#ababab" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="click me"
android:textSize="18sp" />
</com.example.rippleview.RippleView>
</RelativeLayout>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
