像音樂播放App一樣移動背景
阿新 • • 發佈:2017-07-16
activit main hide height figure ota add rac oat
假設你常常聽歌。你會發現歌曲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一樣移動背景