Android自定义水波纹动画Layout实例代码

话不多说，我们先来看看效果：

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大神的这篇文章：

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

在我看来属性动画实际上就类似于定时器，所谓定时器就是独立在主线程之外的另外一个用于计时的线程，每当到达你设定时间的时候这个线程就会通知你；属性动画也不光是另外一个线程，他能够操作主线程UI元素属性就说明了它内部已经做了线程同步。

基本原理

我们先来看下关键代码：

@Override
protected void onDraw(Canvas canvas) {
if (running) {
// get canvas current state
final 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);

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;

public class RippleImageView extends ImageView {
// view center x
private int centerX = 0;
// view center y
private int centerY = 0;
// ripple animation current radius
private float radius = 0;
// the max radius that ripple animation need
private float maxRadius = 0;
// record the ripple animation is running
private 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() {
@Override
public void onAnimationStart(Animator animator) {
running = true;
}
@Override
public void onAnimationEnd(Animator animator) {
running = false;
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
}
@Override
protected 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);
}

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);
}

public void setAnimValue(float value) {
this.radius = value * maxRadius;
System.out.println("radius = " + this.radius);
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
if (running) {
// get canvas current state
final 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);
}

public void startAnimation() {
if (radiusAnimator.isRunning()) {
radiusAnimator.cancel();
}
radiusAnimator.start();
}
}

以上所述是小编给大家介绍的Android自定义水波纹动画Layout实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程网网站的支持！

您可能感兴趣的文章:Android 自定义view实现水波纹动画效果Android自定义View 实现水波纹动画引导效果Android实现水波纹效果Android实现自定义华丽的水波纹效果Android自定义view实现水波纹进度球效果Android实现兼容的水波纹效果Android特效之水波纹的实现Android仿水波纹流量球进度条控制器Android项目实战手把手教你画圆形水波纹loadingviewAndroid实现水波纹点击效果