很多的app的進入主頁的頁面是這樣的，一張靜態圖片居中顯示並且充滿屏幕，同時不斷放大圖片中間部分，形成一種圖片不斷向中間放大的動畫效果。AutoZoomInImageView繼承ImageView並且實現了這種動畫效果。
功能：
1.圖像居中顯示（圖像覆蓋整個AutoZoomInImageView），並可以使其進行中心放大顯示的動畫。
2.可以設置動畫放大的時長。
3.可以設置動畫放大的比例，設置其動畫效果達到的最終尺寸是其初始化尺寸的增大倍數。
原理：
1.調整圖片，使圖片位於屏幕正中間。由於Android手機屏幕尺寸多樣，而圖片的大小也不甚相同，爲了靈活的使用此效果，需要將任意尺寸比例的圖片顯示在任意尺寸比例的手機屏幕正中間，同時不使圖片扭曲變形。
2.更改float[]的值，然後更新Matrix並應用到ImageView中，從而達到圖片zoomin的效果。
添加至工程:
compile 'cn.carbs.android:AutoZoomInImageView:1.0.1'https://github.com/Carbs0126/AutoZoomInImageView
這裏不再介紹
下面來看一個圖：
主要看這個動畫三秒後跳轉，看代碼
<pre name="code" class="html">import com.ss.b.view.AutoZoomInImageView;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.widget.TextView;
public class TwinActivity extends Activity {
AutoZoomInImageView iv;
private TextView tv;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_twin);
initView();
}
private void initView() {
iv = (AutoZoomInImageView) findViewById(R.id.view);
tv = (TextView) findViewById(R.id.textview);
iv.post(new Runnable() {
@Override
public void run() {
// 簡單方式啓動放大動畫
// iv.init()
// .startZoomInByScaleDeltaAndDuration(0.3f, 1000,
// 1000);//放大增量是0.3，放大時間是1000毫秒，放大開始時間是1000毫秒以後
// 使用較爲具體的方式啓動放大動畫
iv.init()
.setScaleDelta(0.3f)
// 放大的係數是原來的（1 + 0.3）倍
.setDurationMillis(3000)
// 動畫的執行時間爲1000毫秒
.setOnZoomListener(
new AutoZoomInImageView.OnZoomListener() {
@Override
public void onStart(View view) {
// 放大動畫開始時的回調
handler.sendEmptyMessageDelayed(0, 1000);
}
@Override
public void onUpdate(View view,
float progress) {
// 放大動畫進行過程中的回調 progress取值範圍是[0,1]
}
@Override
public void onEnd(View view) {
// 放大動畫結束時的回調
// vanishView(iv);
Intent intent = new Intent(
TwinActivity.this,
MainActivity.class);
finish();
startActivity(intent);
}
}).start(1000);// 延遲1000毫秒啓動
}
});
}
@SuppressLint("HandlerLeak")
private final Handler handler = new Handler() {
@Override
public void handleMessage(android.os.Message msg) {
switch (msg.what) {
case 0:
tv.setText("2");
handler.sendEmptyMessageDelayed(1, 1000);
break;
case 1:// 顯示界面
tv.setText("3");
break;
default:
break;
}
};
};
}
注意：動畫開始是是延遲一秒，所以實際還有兩秒的時間就要跳轉頁面，這裏時間我直接給了一個string型的值。實際中應該用時間的累加值，根據實際需要進行靈活變動。
下面是AutoZoomInImageView這個類的源碼，不想去github上看的可以參考這個
import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Matrix;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
public class AutoZoomInImageView extends ImageView{
private int mDrawableW;
private int mDrawableH;
private int mImageViewW;
private int mImageViewH;
private long mDurationMillis = 700;
private float[] mValues = new float[9];
private float mScaleDelta = 0.2f;
private Drawable mDrawable;
private Matrix mMatrix;
public AutoZoomInImageView(Context context) {
super(context);
this.setScaleType(ScaleType.MATRIX);
}
public AutoZoomInImageView(Context context, AttributeSet attrs) {
super(context, attrs);
this.setScaleType(ScaleType.MATRIX);
}
public AutoZoomInImageView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.setScaleType(ScaleType.MATRIX);
}
public AutoZoomInImageView init(){
initInternalValues();
initPicturePosition();
return this;
}
public void init(Drawable drawable){
initInternalValues(drawable);
initPicturePosition();
}
private void initInternalValues(){
mDrawable = getDrawable();
if(mDrawable == null){
throw new IllegalArgumentException("please set the source of AutoZoomInImageView");
}
mDrawableW = mDrawable.getIntrinsicWidth();
mDrawableH = mDrawable.getIntrinsicHeight();
mImageViewW = getMeasuredWidth();
mImageViewH = getMeasuredHeight();
mMatrix = getImageMatrix();
mMatrix.getValues(mValues);
}
private void initInternalValues(Drawable drawable){
mDrawable = drawable;
if (mDrawable == null) {
throw new IllegalArgumentException("please set the source of AutoZoomInImageView");
}
mDrawableW = mDrawable.getIntrinsicWidth();
mDrawableH = mDrawable.getIntrinsicHeight();
mImageViewW = getMeasuredWidth();
mImageViewH = getMeasuredHeight();
mMatrix = getImageMatrix();
mMatrix.getValues(mValues);
}
private void initPicturePosition(){
updateMatrixValuesOrigin(mMatrix, mValues, mDrawableW, mDrawableH, mImageViewW, mImageViewH);
setImageMatrix(mMatrix);
}
private void startZoomInByScaleDelta(final float scaleDelta, long duration){
final float oriScaleX = mValues[0];
final float oriScaleY = mValues[4];
ValueAnimator va = ValueAnimator.ofFloat(0, scaleDelta);
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (Float)animation.getAnimatedValue();
if(mOnZoomListener != null) mOnZoomListener.onUpdate(AutoZoomInImageView.this, value / scaleDelta);
updateMatrixValuesSpan(mValues, mDrawableW, mDrawableH, mImageViewW, mImageViewH,
oriScaleX, oriScaleY, value);
mMatrix.setValues(mValues);
setImageMatrix(mMatrix);
}
});
va.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
if(mOnZoomListener != null) mOnZoomListener.onStart(AutoZoomInImageView.this);
}
@Override
public void onAnimationEnd(Animator animation) {
if(mOnZoomListener != null) mOnZoomListener.onEnd(AutoZoomInImageView.this);
}
@Override
public void onAnimationCancel(Animator animation) {}
@Override
public void onAnimationRepeat(Animator animation) {}
});
va.setDuration(duration);
va.start();
}
/**
* start zooming in
* @param scaleDelta
* the scale that the image will add to original scale
* @param durationMillis
* the duration of zoomin animation, in millisecond.
* @param delayMillis
* the delayed time of starting zoomin animation, in millisecond.
*/
public void startZoomInByScaleDeltaAndDuration(final float scaleDelta, final long durationMillis, long delayMillis){
if(scaleDelta < 0){
throw new IllegalArgumentException("scaleDelta should be larger than 0, now scaleDelta is " + scaleDelta);
}
if(durationMillis < 0){
throw new IllegalArgumentException("durationMillis should not be less than 0, now durationMillis is " + durationMillis);
}
if(delayMillis < 0){
throw new IllegalArgumentException("delayMillis should not be less than 0, now delayMillis is " + delayMillis);
}
postDelayed(new Runnable() {
@Override
public void run() {
startZoomInByScaleDelta(scaleDelta, durationMillis);
}
}, delayMillis);
}
/**
* the scale that the image will add to original scale
* @param scaleDelta
* @return
*/
public AutoZoomInImageView setScaleDelta(float scaleDelta){
mScaleDelta = scaleDelta;
return this;
}
/**
* the duration of zoomin animation, in millisecond.
* @param durationMillis
* @return
*/
public AutoZoomInImageView setDurationMillis(long durationMillis){
mDurationMillis = durationMillis;
return this;
}
/**
* callback when zoomin animation finished
* @param onZoomListener
* @return
*/
public AutoZoomInImageView setOnZoomListener(OnZoomListener onZoomListener){
mOnZoomListener = onZoomListener;
return this;
}
/**
* start animation of zoomin
* @param delayMillis
* the delayed time of starting zoomin animation, in millisecond.
*/
public void start(long delayMillis){
postDelayed(new Runnable() {
@Override
public void run() {
startZoomInByScaleDelta(mScaleDelta, mDurationMillis);
}
}, delayMillis);
}
private void updateMatrixValuesOrigin(Matrix outMatrix, float[] outValues, float drawW, float drawH, float imageW, float imageH){
if(outMatrix == null || outValues == null){
throw new IllegalArgumentException("please set the source of AutoZoomInImageView's matrix and values");
}
outMatrix.reset();
if ((imageH * drawW > drawH * imageW)) {
float scale1 = (imageH)/(drawH);
float offset1 = (drawW * scale1 - imageW)/2;
outMatrix.postScale(scale1, scale1);
outMatrix.postTranslate(-offset1, 0);
} else {
float scale2 = (imageW)/(drawW);
float offset2 = (drawH * scale2 - imageH)/2;
outMatrix.postScale(scale2, scale2);
outMatrix.postTranslate(0, -offset2);
}
outMatrix.getValues(outValues);
}
private void updateMatrixValuesSpan(float[] outValues,
float drawW, float drawH,
float imageW, float imageH,
float oriScaleX, float oriScaleY,
float scaleDelta){
outValues[0] = oriScaleX * (1 + scaleDelta);
outValues[4] = oriScaleY * (1 + scaleDelta);
float offsetwidth = (drawW * outValues[0] - imageW)/2;
outValues[2] = - offsetwidth;
float offsetHeight = (drawH * outValues[4] - imageH)/2;
outValues[5] = - offsetHeight;
}
private OnZoomListener mOnZoomListener;
public interface OnZoomListener{
/**
* callback when zoom in animation is updating
* @param view AutoZoomInImageView
* @param progress return the progress of animation, scope is [0,1]
*/
void onUpdate(View view, float progress);
void onEnd(View view);
void onStart(View view);
}
}注：把這個類放在哪個包下在xml文件裏就用哪個包名.類名引用即可。還有就是使用這個類要注意 minSdkVersion 11