像音樂播放App一樣移動背景

標籤：rup   duration   date   imageview   asc   map   rip   demo   ret   

假設你常常聽歌。你會發現歌曲app的背景會隨著音樂移動的，從左至右或者從上到下。這樣的動畫儘管簡單，可是這裡有一個技巧。

假設你還不明確這樣的動效看看以下的demo

(很多其它具體請參考：https://github.com/flavienlaurent/PanningView）
一，使用setImageMatrix播放圖片動畫
以下是官方文檔給出的解釋

你能夠看到這裡的解釋非常easy。就是取代ImageView的映像矩陣。然後configureBounds和invalidate被調用。
在java代碼中我們能夠設定Matrix的scaleType

mImageView.setScaleType(ScaleType.MATRIX)

或者在xml檔案裡設定

android:scaleType="matrix"

以下是ImageView的初始矩陣（matrix)

在x和y方向上放大2倍

final Matrix matrix = new Matrix();matrix.postScale(2, 2);imageView.setImageMatrix(matrix);

final Matrix matrix = new Matrix();matrix.postScale(2, 2);matrix.postRotate(15);imageView.setImageMatrix(matrix);

二，使你的圖片移動
首先我們須要計算ImageView當前方向（水平。縱向）和圖片當前方向的比例，就比方水平方向吧，我們就要讓圖片和view的高度同樣，橫向放大或者縮小。

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

這樣我們就能保證圖片的高和ImageView同樣，而且填充滿ImageView.
接下來我們就讓ImageView的圖片移動，我們要用到一個強大的Android動畫架構：ValueAnimator,其原理就是利用ImageView的映像矩陣在x軸方向變換移動。

mAnimator = ValueAnimator.ofFloat(0, 100);mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {  @Override  public void onAnimationUpdate(ValueAnimator animation) {      float value = (Float) animation.getAnimatedValue();      matrix.reset();      matrix.postScale(scaleFactor, scaleFactor);      matrix.postTranslate(-value, 0);      imageView.setImageMatrix(matrix);  }});mAnimator.setDuration(5000);mAnimator.start();

整個代碼例如以下：

package com.testimageview;import android.animation.Animator;import android.animation.AnimatorListenerAdapter;import android.animation.ValueAnimator;import android.app.Activity;import android.graphics.Matrix;import android.graphics.RectF;import android.os.Bundle;import android.widget.ImageView;public class MainActivity extends Activity{    private static final int RightToLeft = 1;    private static final int LeftToRight = 2;    private static final int DURATION = 5000;    private ValueAnimator mCurrentAnimator;    private final Matrix mMatrix = new Matrix();    private ImageView mImageView;    private float mScaleFactor;    private int mDirection = RightToLeft;    private RectF mDisplayRect = new RectF();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);      mImageView = (ImageView) findViewById(R.id.imageView);      mImageView.post(new Runnable() {          @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(float from, float to) {      mCurrentAnimator = ValueAnimator.ofFloat(from, to);      mCurrentAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {          @Override          public void onAnimationUpdate(ValueAnimator animation) {              float value = (Float) animation.getAnimatedValue();              mMatrix.reset();              mMatrix.postScale(mScaleFactor, mScaleFactor);              mMatrix.postTranslate(value, 0);              mImageView.setImageMatrix(mMatrix);          }      });      mCurrentAnimator.setDuration(DURATION);      mCurrentAnimator.addListener(new AnimatorListenerAdapter() {          @Override          public void onAnimationEnd(Animator animation) {              if(mDirection == RightToLeft)                  mDirection = LeftToRight;              else                  mDirection = RightToLeft;              animate();          }      });      mCurrentAnimator.start();    }    private void updateDisplayRect() {      mDisplayRect.set(0, 0, mImageView.getDrawable().getIntrinsicWidth(),              mImageView.getDrawable().getIntrinsicHeight());      mMatrix.mapRect(mDisplayRect);    }}

像音樂播放App一樣移動背景