Scale and center matrix on arbitrary point

Question

I'm using a custom ImageView to display a rather large bitmap. The bitmap display is being handled by a matrix that transforms it to what the user sees. I'm trying to implement a "double-tap-to-zoom" but I can't quite get it right. I'm trying to have the image zoom on the point where the user touched with this point ending up in the center of the screen at the end.

I worked through a lot of the matrix math and transformations and basically the following transformation is what I need to do

float dx = centerX - focusX;
float dy = centerY - focusY;

Matrix m = new Matrix( baseMatrix );
m.postTranslate( -focusX, -focusY );
m.postScale( scale, scale );
m.postTranslate( focusX + dx, focusY + dy );

Which if I was just swapping the matrices would be fine but I need to animate from the baseMatrix to this new one. Is there a way I can interpolate between these two matrices?

I tried to interpolate the scale and translation separately but that didn't work out well for me (quite possible that I did it wrong and it is the correct way to go). The way I am currently interpolating just for the scale is below. I've tried adding a translation interpolation in the handler as well and it just didn't work out

mHandler.post( new Runnable() {

  @Override
  public void run() {
    mZooming = true;

    long now = System.currentTimeMillis();
    float currentMs = Math.min( durationMs, now - startTime );
    float newScale = (float) mEasing.easeInOut( currentMs, 0, deltaScale, durationMs );

    zoomTo( oldScale + newScale, destX, destY );

    if ( currentMs < durationMs ) {
      mHandler.post( this );
    } else {
      onZoomAnimationCompleted( getScale() );
      scrollBy( dx, dy, durationMs )
    }
  }
});

Has anyone done something like this before? Am I approaching it completely wrong?

Thanks in advance