Android自訂水波紋動畫Layout執行個體代碼_Android

話不多說，我們先來看看效果：

Hi前輩搜尋預覽

這一張是《Hi前輩》的搜尋預覽圖，你可以在這裡下載這個APP查看更多效果：

http://www.wandoujia.com/apps/com.superlity.hiqianbei

LSearchView

這是一個MD風格的搜尋方塊，整合了ripple動畫以及search時的loading，使用很簡單，如果你也需要這樣的搜尋控制項不妨來試試：https://github.com/onlynight/LSearchView

RippleEverywhere

女友的照片：

女友的照片：

這是一個水波紋動畫支援庫，由於使用暫時只支援Android4.0以上版本。https://github.com/onlynight/RippleEverywhere

實現原理

使用屬性動畫完成該動畫的實現，由於android2.3以下已經不是主流機型，故只相容4.0以上系統。

關於屬性動畫，如果還有童鞋不瞭解可以去看看hongyang大神的這篇文章：

http://www.jb51.net/article/82668.htm

在我看來屬性動畫實際上就類似於定時器，所謂定時器就是獨立在主線程之外的另外一個用於計時的線程，每當到達你設定時間的時候這個線程就會通知你；屬性動畫也不光是另外一個線程，他能夠操作主線程UI元素屬性就說明了它內部已經做了線程同步。

基本原理

我們先來看下關鍵代碼：

@Overrideprotected void onDraw(Canvas canvas) {if (running) {// get canvas current statefinal int state = canvas.save();// add circle to path to crate ripple animation// attention: you must reset the path first,// otherwise the animation will run wrong way.ripplePath.reset();ripplePath.addCircle(centerX, centerY, radius, Path.Direction.CW);canvas.clipPath(ripplePath);// the {@link View#onDraw} method must be called before// {@link Canvas#restoreToCount}, or the change will not appear.super.onDraw(canvas);canvas.restoreToCount(state);return;}// in a normal condition, you should call the// super.onDraw the draw the normal situation.super.onDraw(canvas);}Canvas#save()和Canvas#restoreToCount()

這個兩個方法用於繪製狀態的儲存與恢複。繪製之前先儲存上一次的狀態；繪製完成後恢複前一次的狀態；以此類推直到running成為false，中間的這個過程就是動畫的過程。

Path#addCircle()和Canvas#clipPath()

addCircle用於在path上繪製一個圈；clipPath繪製剪下後的path（只繪製path內的地區，其他地區不繪製）。

radiusAnimator = ObjectAnimator.ofFloat(this, "animValue", 0, 1);/*** This method will be called by {@link this#radiusAnimator}* reflection calls.** @param value animation current value*/public void setAnimValue(float value) {this.radius = value * maxRadius;System.out.println("radius = " + this.radius);invalidate();}

這一段是動畫的動效關鍵，首先要有一個隨著時間推移而變化的值，當每次這個值變化的時候我們需要跟新介面讓view重新繪製調用onDraw方法，我們不能手動調用onDraw方法，系統給我們提供的invalidate會強制view重繪進而調用onDraw方法。

以上就是這個動畫的全部關鍵原理了，下面我們來一份完整的源碼：

import android.animation.Animator;import android.animation.ObjectAnimator;import android.annotation.TargetApi;import android.content.Context;import android.graphics.Canvas;import android.graphics.Path;import android.util.AttributeSet;import android.view.View;import android.view.animation.AccelerateDecelerateInterpolator;import android.widget.ImageView;/*** Created by lion on 2016/11/11.* <p>* RippleImageView use the {@link Path#addCircle} function* to draw the view when {@link RippleImageView#onDraw} called.* <p>* When you call {@link View#invalidate()} function,then the* {@link View#onDraw(Canvas)} will be called. In that way you* can use {@link Path#addCircle} to draw every frame, you will* see the ripple animation.*/public class RippleImageView extends ImageView {// view center xprivate int centerX = 0;// view center yprivate int centerY = 0;// ripple animation current radiusprivate float radius = 0;// the max radius that ripple animation needprivate float maxRadius = 0;// record the ripple animation is runningprivate boolean running = false;private ObjectAnimator radiusAnimator;private Path ripplePath;public RippleImageView(Context context) {super(context);init();}public RippleImageView(Context context, AttributeSet attrs) {super(context, attrs);init();}public RippleImageView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}@TargetApi(21)public RippleImageView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {super(context, attrs, defStyleAttr, defStyleRes);init();}private void init() {ripplePath = new Path();// initial the animator, when animValue change,// radiusAnimator will call {@link this#setAnimValue} method.radiusAnimator = ObjectAnimator.ofFloat(this, "animValue", 0, 1);radiusAnimator.setDuration(1000);radiusAnimator.setInterpolator(new AccelerateDecelerateInterpolator());radiusAnimator.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animator) {running = true;}@Overridepublic void onAnimationEnd(Animator animator) {running = false;}@Overridepublic void onAnimationCancel(Animator animator) {}@Overridepublic void onAnimationRepeat(Animator animator) {}});}@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {super.onLayout(changed, left, top, right, bottom);centerX = (right - left) / 2;centerY = (bottom - top) / 2;maxRadius = maxRadius(left, top, right, bottom);}/*** Calculate the max ripple animation radius.** @param left view left* @param top view top* @param right view right* @param bottom view bottom* @return*/private float maxRadius(int left, int top, int right, int bottom) {return (float) Math.sqrt(Math.pow(right - left, 2) + Math.pow(bottom - top, 2) / 2);}/*** This method will be called by {@link this#radiusAnimator}* reflection calls.** @param value animation current value*/public void setAnimValue(float value) {this.radius = value * maxRadius;System.out.println("radius = " + this.radius);invalidate();}@Overrideprotected void onDraw(Canvas canvas) {if (running) {// get canvas current statefinal int state = canvas.save();// add circle to path to crate ripple animation// attention: you must reset the path first,// otherwise the animation will run wrong way.ripplePath.reset();ripplePath.addCircle(centerX, centerY, radius, Path.Direction.CW);canvas.clipPath(ripplePath);// the {@link View#onDraw} method must be called before// {@link Canvas#restoreToCount}, or the change will not appear.super.onDraw(canvas);canvas.restoreToCount(state);return;}// in a normal condition, you should call the// super.onDraw the draw the normal situation.super.onDraw(canvas);}/*** call the {@link Animator#start()} function to start the animation.*/public void startAnimation() {if (radiusAnimator.isRunning()) {radiusAnimator.cancel();}radiusAnimator.start();}}

以上所述是小編給大家介紹的Android自訂水波紋動畫Layout執行個體代碼，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！