Move the background like a music play app

Suppose you often listen to songs. You will find that the background of the song app moves with the music, from left to right or from top to bottom. This kind of animation is simple, but there is a trick here.

Let's say you're not sure about the effect. Look at the demo below

(Many other specific please refer to: Https://github.com/flavienlaurent/PanningView)
One, use Setimagematrix to play picture animation
The following is an explanation given in the official documentation

You can see the explanation here is very easy. is the image matrix that replaces the ImageView. Then Configurebounds and invalidate are called.
In Java code we are able to set the matrix's ScaleType

mImageView.setScaleType(ScaleType.MATRIX)

or set it in an XML file.

android:scaleType="matrix"

The following is the initial matrix of the ImageView (matrix)

Twice times magnification in X and y directions

finalnew Matrix();matrix.postScale(22);imageView.setImageMatrix(matrix);

finalnew Matrix();matrix.postScale(22);matrix.postRotate(15);imageView.setImageMatrix(matrix);

Two, make your picture move
First we need to calculate the current direction of the ImageView (horizontal. Portrait) and the ratio of the current direction of the picture, just like the horizontal direction, we have to let the picture and view height same, zoom in or zoom out.

float scaleFactor = (float)imageView.getHeight() / (float) drawable.getIntrinsicHeight();mMatrix.postScale(scaleFactor, scaleFactor);

This way we can guarantee that the picture is high and imageview the same, and filled with ImageView.
Next we let ImageView's picture move, we use a powerful Android animation frame: Valueanimator, the principle is to use the ImageView image matrix in the direction of the x-axis shift.

mAnimator = ValueAnimator.ofFloat(0100);mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {  @Override  publicvoidonAnimationUpdate(ValueAnimator animation) {      float value = (Float) animation.getAnimatedValue();      matrix.reset();      matrix.postScale(scaleFactor, scaleFactor);      0);      imageView.setImageMatrix(matrix);  }});mAnimator.setDuration(5000);mAnimator.start();

The entire code such as the following:

 PackageCom.testimageview;ImportAndroid.animation.Animator;ImportAndroid.animation.AnimatorListenerAdapter;ImportAndroid.animation.ValueAnimator;Importandroid.app.Activity;ImportAndroid.graphics.Matrix;ImportAndroid.graphics.RectF;ImportAndroid.os.Bundle;ImportAndroid.widget.ImageView; Public  class mainactivity extends Activity{    Private Static Final intRightToLeft =1;Private Static Final intLeftToRight =2;Private Static Final intDURATION = the;PrivateValueanimator Mcurrentanimator;Private FinalMatrix Mmatrix =NewMatrix ();PrivateImageView Mimageview;Private floatMscalefactor;Private intMdirection = RightToLeft;PrivateRECTF Mdisplayrect =NewRECTF ();@Override    protected void onCreate(Bundle savedinstancestate) {Super. OnCreate (Savedinstancestate);      Setcontentview (R.layout.activity_main);      Mimageview = (ImageView) Findviewbyid (R.id.imageview); Mimageview.post (NewRunnable () {@Override           Public void Run() {Mscalefactor = (float) Mimageview.getheight ()/(float) mimageview.getdrawable (). Getintrinsicheight ();              Mmatrix.postscale (Mscalefactor, mscalefactor);              Mimageview.setimagematrix (Mmatrix);          Animate ();    }      }); }Private void Animate() {updatedisplayrect ();if(mdirection = = RightToLeft)      {Animate (Mdisplayrect.left, Mdisplayrect.left-(Mdisplayrect.right-mimageview.getwidth ())); }Else{Animate (Mdisplayrect.left,0.0f); }    }Private void Animate(floatFromfloatTo) {Mcurrentanimator = Valueanimator.offloat (from, to); Mcurrentanimator.addupdatelistener (NewValueanimator.animatorupdatelistener () {@Override           Public void onanimationupdate(Valueanimator animation) {floatValue = (Float) animation.getanimatedvalue ();              Mmatrix.reset ();              Mmatrix.postscale (Mscalefactor, mscalefactor); Mmatrix.posttranslate (Value,0);          Mimageview.setimagematrix (Mmatrix);      }      });      Mcurrentanimator.setduration (DURATION); Mcurrentanimator.addlistener (NewAnimatorlisteneradapter () {@Override           Public void Onanimationend(Animator animation) {if(mdirection = = RightToLeft) mdirection = LeftToRight;ElseMdirection = RightToLeft;          Animate ();      }      });    Mcurrentanimator.start (); }Private void Updatedisplayrect() {Mdisplayrect.set (0,0, Mimageview.getdrawable (). Getintrinsicwidth (), mimageview.getdrawable (). Getintrinsicheight ());    Mmatrix.maprect (Mdisplayrect); }}

Move the background like a music play app