当前位置： 移动技术网 > 移动技术>移动开发>Android > Android自定义水波纹动画Layout实例代码

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

2019年07月24日  | 移动技术网移动技术  | 我要评论

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

hi前辈搜索预览

hi前辈搜索预览

这一张是《hi前辈》的搜索预览图，你可以在这里下载这个app查看更多效果：

lsearchview

lsearchview

这是一个md风格的搜索框，集成了ripple动画以及search时的loading，使用很简单，如果你也需要这样的搜索控件不妨来试试：https://github.com/onlynight/lsearchview

rippleeverywhere

女友的照片：

ripple demo

女友的照片：

ripple principle

这是一个水波纹动画支持库，由于使用暂时只支持android4.0以上版本。https://github.com/onlynight/rippleeverywhere

实现原理

使用属性动画完成该动画的实现，由于android2.3以下已经不是主流机型，故只兼容4.0以上系统。

关于属性动画，如果还有童鞋不了解可以去看看hongyang大神的这篇文章：

在我看来属性动画实际上就类似于定时器，所谓定时器就是独立在主线程之外的另外一个用于计时的线程，每当到达你设定时间的时候这个线程就会通知你；属性动画也不光是另外一个线程，他能够操作主线程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);
/**
* 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 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);
}
/**
* 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();
}
@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);
}
/**
* call the {@link animator#start()} function to start the animation.
*/
public void startanimation() {
if (radiusanimator.isrunning()) {
radiusanimator.cancel();
}
radiusanimator.start();
}
}

以上所述是小编给大家介绍的android自定义水波纹动画layout实例代码，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网