Android开发笔记——点击查看大图过渡动画与图片缩放与移动

从一个activity到另一个activity的过渡

1.小图点击事件代码

@Override
public void onClick(View view) {
    switch (view.getId()) {
        case R.id.img_1:
            view.setClickable(false);
            Intent intentS = new Intent(this, ImageActivity.class);
            int[] screenLocationS = new int[2];
            view.getLocationOnScreen(screenLocationS);
            intentS.putExtra(LEFT, screenLocationS[0]).//将图片位置传到大图activity用于动画初始位置
                    putExtra(TOP, screenLocationS[1]).
                    putExtra(WIDTH, view.getWidth()).
                    putExtra(HEIGHT, view.getHeight()).
                    putExtra(IMAGE, _snapUrl).
                    putExtra(TITLE, _name);
            startActivity(intentS);
            overridePendingTransition(0, 0);//取消原有默认的Activity到Activity的过渡动画
            break;
        case R.id.img_2:
            view.setClickable(false);
            Intent intentM = new Intent(this, ImageActivity.class);
            int[] screenLocationM = new int[2];
            view.getLocationOnScreen(screenLocationM);
            intentM.putExtra(LEFT, screenLocationM[0]).//将图片位置传到大图activity用于动画初始位置
                    putExtra(TOP, screenLocationM[1]).
                    putExtra(WIDTH, view.getWidth()).
                    putExtra(HEIGHT, view.getHeight()).
                    putExtra(IMAGE, _matchUrl).
                    putExtra(TITLE, _name);
            startActivity(intentM);
            overridePendingTransition(0, 0);//取消原有默认的Activity到Activity的过渡动画
            break;
    }
}

2.大图Activity代码

public class BigImageActivity extends Activity implements View.OnClickListener {

    private static final int DURATION = 150;

    public final static String TITLE  = "Title";
    public final static String TOP    = "Top";
    public final static String LEFT   = "Left";
    public final static String WIDTH  = "Width";
    public final static String HEIGHT = "Height";
    public final static String IMAGE  = "Image";

    private int   mLeftDelta;
    private int   mTopDelta;
    private float mWidthScale;
    private float mHeightScale;

    private int           intentTop;
    private int           intentLeft;
    private int           intentWidth;
    private int           intentHeight;
    private LinearLayout  linearLayout;
    private ColorDrawable colorDrawable;
    private ImageView     imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        FaceDetectionApp.setWindowTrans(this, true, false);
        setContentView(R.layout.activity_image);
        initView();
        if (savedInstanceState == null) {
            ViewTreeObserver observer = imageView.getViewTreeObserver();
            observer.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
                @Override
                public boolean onPreDraw() {
                    imageView.getViewTreeObserver().removeOnPreDrawListener(this);
                    int[] screenLocation = new int[2];
                    imageView.getLocationOnScreen(screenLocation);
                    mLeftDelta = intentLeft - screenLocation[0];
                    mTopDelta = intentTop - screenLocation[1];

                    mWidthScale = (float) intentWidth / imageView.getWidth();
                    mHeightScale = (float) intentHeight / imageView.getHeight();
                    enterAnimation(new Runnable() {
                        @Override
                        public void run() {
                            Matrix matrix = imageView.getMatrix();
                            imageView.setImageMatrix(matrix);
                            imageView.setScaleType(ImageView.ScaleType.MATRIX);
                            imageView.setOnTouchListener(new ImageTouchListener());
                        }
                    });
                    return true;
                }
            });
        }
    }

    @Override
    protected void initView() {
        super.initView();
        linearLayout = findViewById(R.id.ll_img);
        imageView = findViewById(R.id.img);
        initValue();
    }

    @Override
    protected void initValue() {
        super.initValue();
        colorDrawable = new ColorDrawable(ContextCompat.getColor(this, R.color.color_item_background));
        linearLayout.setBackground(colorDrawable);
        Bundle bundle = getIntent().getExtras();
        if (bundle != null) {
            title = bundle.getString(TITLE);
            intentTop = bundle.getInt(TOP);
            intentLeft = bundle.getInt(LEFT);
            intentWidth = bundle.getInt(WIDTH);
            intentHeight = bundle.getInt(HEIGHT);
            String imgURL = bundle.getString(IMAGE);
            asyncLoadImageSmallList(imageView, imgURL);//框架代码 不解释
            imageView.setOnClickListener(this);
        }
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.img:
                view.setClickable(false);
                exitAnimation(new Runnable() {
                    public void run() {
                        finish();
                        overridePendingTransition(0, 0);
                    }
                });
                break;
        }
    }

    @Override
    public void onBackPressed() {
        exitAnimation(new Runnable() {
            public void run() {
                finish();
                overridePendingTransition(0, 0);
            }
        });
    }

    public void enterAnimation(final Runnable enterAction) {
        imageView.setPivotX(0);
        imageView.setPivotY(0);
        imageView.setScaleX(mWidthScale);
        imageView.setScaleY(mHeightScale);
        imageView.setTranslationX(mLeftDelta);
        imageView.setTranslationY(mTopDelta);
        TimeInterpolator sDecelerator = new DecelerateInterpolator();
        imageView.animate().setDuration(DURATION).scaleX(1).scaleY(1).
                translationX(0).translationY(0).setInterpolator(sDecelerator).withEndAction(enterAction);
        ObjectAnimator bgAnim = ObjectAnimator.ofInt(colorDrawable, "alpha", 0, 255);
        bgAnim.setDuration(DURATION);
        bgAnim.start();
    }

    public void exitAnimation(final Runnable endAction) {

        TimeInterpolator sInterpolator = new AccelerateInterpolator();
        imageView.animate().setDuration(DURATION).scaleX(mWidthScale).scaleY(mHeightScale).
                translationX(mLeftDelta).translationY(mTopDelta).setInterpolator(sInterpolator).withEndAction(endAction);

        ObjectAnimator bgAnim = ObjectAnimator.ofInt(colorDrawable, "alpha", 0);
        bgAnim.setDuration(DURATION);
        bgAnim.start();
    }
}

3.缩放与移动代码

public class ImageTouchListener implements View.OnTouchListener {

    private              boolean isClick   = false;
    private              int     mode      = 0;// default value
    /**
     * Drag mode
     */
    private static final int     MODE_DRAG = 1;
    /**
     * Zoom mode
     */
    private static final int     MODE_ZOOM = 2;

    /**
     * Beginning point
     */
    private PointF startPoint    = new PointF();
    private Matrix matrix        = new Matrix();
    private Matrix currentMatrix = new Matrix();

    /**
     * Distance between two fingers
     */
    private float  startDis;
    /**
     * The middle point of two fingers
     */
    private PointF midPoint;

    private float values[] = {0, 0, 0, 0, 0, 0, 0, 0, 0};
    private float touchX   = 0;
    private float touchY   = 0;
    private float scaleXY  = 0;

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        ImageView imageView = (ImageView) v;
        switch (event.getAction() & MotionEvent.ACTION_MASK) {
            case MotionEvent.ACTION_DOWN:
                isClick = true;
                mode = MODE_DRAG;
                currentMatrix.set(imageView.getImageMatrix());
                matrix.set(currentMatrix);
                startPoint.set(event.getX(), event.getY());
                touchX = event.getX();
                touchY = event.getY();
                if (scaleXY == 0) {
                    matrix.getValues(values);
                    scaleXY = values[0];
                }
                break;
            case MotionEvent.ACTION_MOVE:
                matrix.getValues(values);
                if (mode == MODE_DRAG) {
                    float dx = event.getX() - startPoint.x;
                    float dy = event.getY() - startPoint.y;
                    if (dx > 15 || dx < -15 || dy > 15 || dy < -15) {
                        isClick = false;
                    }
                    float width = (v.getWidth() * values[0]) / (scaleXY);
                    float height = (v.getHeight() * values[4]) / (scaleXY);
                    float offset1 = v.getContext().getResources().getDimension(R.dimen.item_height);
                    float offset2 = v.getContext().getResources().getDimension(R.dimen.item_height) * 1.2f * values[0];
                    if ((values[2] > v.getWidth() - offset1 && touchX - event.getX() < 0)) {//move to right
                        values[2] = v.getWidth() - offset1 + 5;
                        if (!(values[5] > v.getHeight() - offset1 && touchY - event.getY() < 0) && !(values[5] + height < offset2 && touchY - event.getY() >
                                0)) {
                            values[5] += event.getY() - touchY;
                            touchY = event.getY();
                        }
                        matrix.setValues(values);
                        imageView.setImageMatrix(matrix);
                        return true;
                    } else if ((values[2] + width < offset1 && touchX - event.getX() > 0)) {//move to left
                        values[2] = offset1 - width - 5;
                        if (!(values[5] > v.getHeight() - offset1 && touchY - event.getY() < 0) && !(values[5] + height < offset2 && touchY - event.getY() >
                                0)) {
                            values[5] += event.getY() - touchY;
                            touchY = event.getY();
                        }
                        matrix.setValues(values);
                        imageView.setImageMatrix(matrix);
                        return true;
                    }
                    if ((values[5] > v.getHeight() - offset1 && touchY - event.getY() < 0)) {//move to bottom
                        values[5] = v.getHeight() - offset1 + 5;
                        if (!(values[2] > v.getWidth() - offset1 && touchX - event.getX() < 0) && !(values[2] + width < offset1 && touchX - event.getX() > 0)) {
                            values[2] += event.getX() - touchX;
                            touchX = event.getX();
                        }
                        matrix.setValues(values);
                        imageView.setImageMatrix(matrix);
                        return true;
                    } else if ((values[5] + height < offset2 && touchY - event.getY() > 0)) {//move to top
                        values[5] = offset2 - height - 5;
                        if (!(values[2] > v.getWidth() - offset1 && touchX - event.getX() < 0) && !(values[2] + width < offset1 && touchX - event.getX() > 0)) {
                            values[2] += event.getX() - touchX;
                            touchX = event.getX();
                        }
                        matrix.setValues(values);
                        imageView.setImageMatrix(matrix);
                        return true;
                    }
                    touchX = event.getX();
                    touchY = event.getY();
                    matrix.set(currentMatrix);
                    matrix.postTranslate(dx, dy);
                } else if (mode == MODE_ZOOM) {
                    float endDis = distance(event);
                    if (endDis > 10f) {
                        float scale = endDis / startDis;
                        if (values[0] / scaleXY < 0.5 && scale < 1 || values[0] / scaleXY > 3 && scale > 1) {
                            return true;
                        }
                        matrix.set(currentMatrix);
                        matrix.postScale(scale, scale, midPoint.x, midPoint.y);
                    }
                    isClick = false;
                }
                break;
            case MotionEvent.ACTION_UP:
                if (isClick) {
                    v.performClick();
                }
            case MotionEvent.ACTION_POINTER_UP:
                isClick = false;
                mode = 0;
                break;
            case MotionEvent.ACTION_POINTER_DOWN:
                isClick = false;
                mode = MODE_ZOOM;
                startDis = distance(event);
                if (startDis > 10f) {
                    midPoint = mid(event);
                    currentMatrix.set(imageView.getImageMatrix());
                }
                break;
        }
        imageView.setImageMatrix(matrix);
        return true;
    }

    /**
     * Calculate the distance between two fingers
     */
    private float distance(MotionEvent event) {
        float dx = event.getX(1) - event.getX(0);
        float dy = event.getY(1) - event.getY(0);
        return (float) Math.sqrt(dx * dx + dy * dy);
    }

    /**
     * calculate the middle point of the two fingers
     */
    private PointF mid(MotionEvent event) {
        float midX = (event.getX(1) + event.getX(0)) / 2;
        float midY = (event.getY(1) + event.getY(0)) / 2;
        return new PointF(midX, midY);
    }

}

4.大图布局文件代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:id="@+id/ll_img"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:background="@color/color_item_background"
              android:orientation="vertical">

    <ImageView
        android:id="@+id/img"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:contentDescription="@string/app_name"
        android:scaleType="fitCenter"/>

</LinearLayout>

做个笔记，留作以后，不保证编译通过。并且部分代码涟源网络。

原文链接：http://www.apkbus.com/blog-184446-78285.html