Animate (Zoom and Translate) a part of image on android canvas view

Question

I have an image e.g. the image shown below:

This image has two parts part 1 of size width W and height L and part 2 (smaller part) of width w and height h (call part one as source and part 2 as destination). Let the coordinates of the 1st rectangle be (measured from top left corner): top:100 left: 10 right: 200 bottom: 300 and the coordinates of the 2nd rectangle be (as measured from top left corner): top 50 left: 500 bottom: 100 right: 700

I want to animate from source to destination such that the image translates and zooms in from source to destination.

So my first screen would look like:

and my second image would look like:

How do I tween between these two ? My code (without animation) looks like as follows:

public class SuperGame extends View implements OnGestureListener
{
    int sreenHeight, screenWidth;
    int drawCount = 0;
    Bitmap bg;

    public SuperGame(Context context, Bitmap bmp)
    {
        this.screenWidth = getContext().getResources().getDisplayMetrics().widthPixels;
    this.screenHeight = getContext().getResources().getDisplayMetrics().heightPixels;
        bg = BitmapFactory.decodeResource(getResources(),R.drawable.bg_img);
    }

    @Override
    /* this function triggers the image change
    */
    public boolean onDown(MotionEvent e) {
    invalidate(0,0,screenWidth, screenHeight);
    return true;
}

    @Override
    public void onDraw(Canvas canvas)
    {
        Rect dest = new Rect(0,0,screenWidth, screenHeight);
        if (count==0) //draw the first image part
        {
            count=1;
            Rect src = new Rect(100,10,200,300);//coordinates of rectangle 1       
            canvas.drawBitmap(bg,  src, dest, new Paint());
        }
        else //draw the second image part - (I'd like to show movement/ transition between these)
        {
            Rect src = new Rect(50,500,100,700);//coordinates of rectangle 2       
            count=0;
            canvas.drawBitmap(bg,  src, dest, new Paint());
        }
    }
}

How to I animate the transition (which involves zoomin as well as translation)?

Answer 1

You might need to create a custom valueAnimator of type Rect/RectF. Code example given below:

public class RectFEvaluator 
    implements TypeEvaluator<RectF>
{

    @Override
    public RectF evaluate(float fraction, RectF srcRect, RectF destRect) {
        RectF betweenRect = new RectF();
        betweenRect.bottom = srcRect.bottom + fraction*(destRect.bottom-srcRect.bottom);
        betweenRect.top = srcRect.top + fraction*(destRect.top-srcRect.top);
        betweenRect.left = srcRect.left + fraction*(destRect.left-srcRect.left);
        betweenRect.right = srcRect.right + fraction*(destRect.right-srcRect.right);
        return betweenRect;
    }

}

The value animator will give you the intermediate values between src Rect and dest Rect. Once you have these values, updated them using an animation