Android Custom Water Ripple Animation layout instance Code _android

Not much to say, we first look at the effect:

Hi Predecessors Search Preview

This is the "Hi Seniors" Search Preview, where you can download the app to see more results:

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

Lsearchview

This is a MD-style search box that integrates ripple animations and search loading, and it's easy to use if you need a search control like this: Https://github.com/onlynight/LSearchView

Rippleeverywhere

Photo of girlfriend:

Photo of girlfriend:

This is a water Ripple animation support library, due to the use of temporary only support Android4.0 above version. Https://github.com/onlynight/RippleEverywhere

Implementation principle

Use the property animation to complete the animation, because the following android2.3 is not the mainstream model, it is only compatible with more than 4.0 of the system.

About attribute animation, if there are children's shoes do not understand can go to see the Hongyang of the great god this article:

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

In my opinion, the property animation is actually similar to the timer, the so-called timer is independent of the main thread in addition to a timer for the timing of the threads, each time you arrive at the set times the thread will notify you; property animation is not just another thread, He was able to manipulate the main thread UI element properties to show that it had been synchronized internally.

Basic principle

Let's take a look at the key code:

@Override
protected void OnDraw (Canvas Canvas) {
if (running) {
//Get Canvas Current state
final int stat E = Canvas.save ();
Add circle to path to crate Ripple animation
//attention:you must reset the path I,
//otherwise the Anim Ation'll run wrong way.
Ripplepath.reset ();
Ripplepath.addcircle (CenterX, CenterY, radius, Path.Direction.CW);
Canvas.clippath (Ripplepath);
The {@link View#ondraw} method must is called before
//{@link Canvas#restoretocount}, or the change won't be AppE Ar.
Super.ondraw (canvas);
Canvas.restoretocount (state);
return;
}
In a normal condition, your should call the
//Super.ondraw The draw the normal situation.
Super.ondraw (canvas);
}
Canvas#save () and Canvas#restoretocount ()

This two method is used to draw the save and restore of state. Saves the previous state before drawing, restores the previous state after the drawing completes, and so on until running becomes false, and the middle process is the animation process.

Path#addcircle () and Canvas#clippath ()

Addcircle is used to draw a circle on the path; Clippath draws the cut path (only the areas within the path are drawn, and the other areas are not drawn).

Radiusanimator = Objectanimator.offloat (This, "Animvalue", 0, 1);
/** * This method is
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 ();
}

This section is the animation of the key to the dynamic, first of all have a change over time value, when this value changes each time we need to with the new interface Let view redraw call OnDraw method, we can not manually call the OnDraw method, The invalidate that the system gives US forces the view to redraw and then invoke the OnDraw method.

The above is the animation of all the key principles, the following we come to a complete source code:

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#ondra
W} called. * <p> * When your call {@link view#invalidate ()} function,then the * {@link View#ondraw (Canvas)} 'll be called.
In so way you can use {@link path#addcircle} to draw every frame, and you'll * 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;
The record of the Ripple animation is running private Boolean running = false;
Private Objectanimator Radiusanimator;
Private Path Ripplepath; Public Rippleimageview {Super [context]; init ();} public Rippleimageview, AttributeSet
Attrs) {Super (context, attrs); init ():} public Rippleimageview (context, AttributeSet attrs, int defstyleattr) {
Super (context, attrs, defstyleattr);
Init (); @TargetApi Public Rippleimageview (context context, AttributeSet attrs, int defstyleattr, int defstyleres) {Super (CO
ntext, attrs, defstyleattr, defstyleres);
Init (); private void Init () {Ripplepath = new Path ();//Initial the animator, when animvalue change,//Radiusanimator would CA
ll {@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 O Nanimationend (animator animator) {running = false;} @Override public void Onanimationcancel (animator animator) {} @Over
Ride public void Onanimationrepeat (animator animator) {}}); @Override protected void OnLayout (Boolean changed, int left, int. top, int right, int bottom) {super.onlayout (changed, l
EFT, 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 @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 is 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.sav
E (); Add circle to path to crate Ripple Animation//attention:you must reset the path I//otherwise the animation WI
ll run wrong way.
Ripplepath.reset ();
Ripplepath.addcircle (CenterX, CenterY, radius, Path.Direction.CW);
Canvas.clippath (Ripplepath);
The {@link View#ondraw} method must is called before//{@link Canvas#restoretocount}, or the change won't be appear.
Super.ondraw (canvas);
Canvas.restoretocount (state);
Return
}//In a normal condition, your 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 (); }
}

The above is a small series to introduce the Android custom water ripple Animation Layout instance code, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!