CODEWITHSUNDEEP
android
zorgbargle
zorgbargle

Reputation: 730

How to animate zoom out with ImageView that uses Matrix scaling

So I have an ImageView using a Matrix to scale the Bitmap I'm displaying. I can double-tap to zoom to full-size, and my ScaleAnimation handles animating the zoom-in, it all works fine.

Now I want to double-tap again to zoom out, but when I animate this with ScaleAnimation, the ImageView does not draw the newly exposed areas of the image (as the current viewport shrinks), instead you see the portion of visible image shrinking in. I have tried using ViewGroup.setClipChildren(false), but this only leaves the last-drawn artifacts from the previous frame - leading to an trippy telescoping effect, but not quite what I was after.

I know there are many zoom-related questions, but none cover my situation - specifically animating the zoom-out operation. I do have the mechanics working - ie aside from the zoom-out animation, double-tapping to zoom in and out works fine.

Any suggestions?

Upvotes: 1

Views: 4625

Answers (1)

zorgbargle
zorgbargle

Reputation: 730

In the end I decided to stop using the Animation classes offered by Android, because the ScaleAnimation applies a scale to the ImageView as a whole which then combines with the scale of the ImageView's image Matrix, making it complicated to work with (aside from the clipping issues I was having). Since all I really need is to animate the changes made to the ImageView's Matrix, I implemented the OnDoubleTapListener (at the end of this post - I leave it as an "exercise to the reader" to add the missing fields and methods - I use a few PointF and Matrix fields to avoid excess garbage creation). Basically the animation itself is implemented by using View.post to keep posting a Runnable that incrementally changes the ImageView's image Matrix:

public boolean onDoubleTap(MotionEvent e) {
        final float x = e.getX();
        final float y = e.getY();
        matrix.reset();
        matrix.set(imageView.getImageMatrix());
        matrix.getValues(matrixValues);
        matrix.invert(inverseMatrix);
        doubleTapImagePoint[0] = x;
        doubleTapImagePoint[1] = y;
        inverseMatrix.mapPoints(doubleTapImagePoint);
        final float scale = matrixValues[Matrix.MSCALE_X];
        final float targetScale = scale < 1.0f ? 1.0f : calculateFitToScreenScale();
        final float finalX;
        final float finalY;
        // assumption: if targetScale is less than 1, we're zooming out to fit the screen
        if (targetScale < 1.0f) {
            // scaling the image to fit the screen, we want the resulting image to be centred. We need to take
            // into account the shift that is applied to zoom on the tapped point, easiest way is to reuse
            // the transformation matrix.
            RectF imageBounds = new RectF(imageView.getDrawable().getBounds());
            // set up matrix for target 
            matrix.reset();
            matrix.postTranslate(-doubleTapImagePoint[0], -doubleTapImagePoint[1]);
            matrix.postScale(targetScale, targetScale);
            matrix.mapRect(imageBounds);

            finalX = ((imageView.getWidth() - imageBounds.width()) / 2.0f) - imageBounds.left;
            finalY = ((imageView.getHeight() - imageBounds.height()) / 2.0f) - imageBounds.top;
        } 
        // else zoom around the double-tap point
        else {
            finalX = x;
            finalY = y;
        }

        final Interpolator interpolator = new AccelerateDecelerateInterpolator();
        final long startTime = System.currentTimeMillis();
        final long duration = 800;
        imageView.post(new Runnable() {
            @Override
            public void run() {
                float t = (float) (System.currentTimeMillis() - startTime) / duration;
                t = t > 1.0f ? 1.0f : t;
                float interpolatedRatio = interpolator.getInterpolation(t);
                float tempScale = scale + interpolatedRatio * (targetScale - scale);
                float tempX = x + interpolatedRatio * (finalX - x);
                float tempY = y + interpolatedRatio * (finalY - y);
                matrix.reset();
                // translate initialPoint to 0,0 before applying zoom
                matrix.postTranslate(-doubleTapImagePoint[0], -doubleTapImagePoint[1]);
                // zoom
                matrix.postScale(tempScale, tempScale);
                // translate back to equivalent point
                matrix.postTranslate(tempX, tempY);
                imageView.setImageMatrix(matrix);
                if (t < 1f) {
                    imageView.post(this);
                }
            }
        });

        return false;
    }

Upvotes: 5

Related Questions