Making Animations

[Vad1mo]

Hello,
I am modifying the double tap listener to use for zooming in and zooming out. I was wondering how to integrate my simple ZoomAnimation.

    public boolean update(GestureImageView view, long elapsedTime) {

        if (elapsedTime<duration){
            return true;
        }
        return false;
    }

Now I have to move and scale the image in the direction where the touch event occurred. How can I reuse your code to do so.

        if(doubleTapDetector.onTouchEvent(event)) {
            initialDistance = 0;
            lastScale = currentScale;
            //lastScale = image.getScale();;
            currentScale = image.getScale();;
            next.x = image.getImageX();
            next.y = image.getImageY();
            calculateBoundaries();
            image.animationStart(new ZoomAnimation());
        }

would you mind to give some hints on doing so reusing your code.

Thank you!

[jasonpolites]

Hey,

This is actually a fairly complex task, even though it sounds simple. In order to zoom to a specific point on the image in an animation every "frame" of the animation has to do two things:

1. Increase the scale by an amount proportional to the amount of time that has passed
2. Move the center point of the image along a vector running on the OPPOSITE direction to the vector formed between the image center point and the touch point for a zoom.

The second part is the complicated bit. If you don't do this the image will "appear" to move outwards as it scales up because it always scales from the midpoint.

This is done in the pinch-zoom code here:

https://github.com/jasonpolites/gesture-imageview/blob/master/main/src/com/polites/android/GestureImageViewTouchListener.java#L196

If you wanted to do this I would put all your logic into the ZoomAnimation object. That is, the touch point (x,y) and the length of time you want the animation to last.

The "elapsedTime" parameter in the update() method of the animation gives you the total elapsed time since the animation started. So the position and scale should be based on this time vs. the length of time you want the animation to last.

I do plan to implement this at some point, and whenever that is I would most likely do this:

When the ZoomAnimation is started record the midpoint of the image and the touch point for the destination, then calculate the vector between the two. (using the VectorF object).

Once you have this you adjust its length then use it to calculate the expected x,y position for the NEW midpoint of the image. The amount the midpoint should be moved is calculated from the initial distance between the original midpoint and the touch point together with the scale. For example.. if the touch point is calculated at a distance of 100 from the midpoint of the image, and you want to scale by 150% then the scaled distance is 150, this means you have to move the image by 50 in the OPPOSITE direction to the vector between the midpoint and the touch point.

Confused yet? ;)

[Vad1mo]

thank you for the outline. I will give it a try. Do I need to change something outside ZoomAnimation?

for exmple on double tap return e.g.?

        if(doubleTapDetector.onTouchEvent(event)) {
            initialDistance = 0;
            lastScale = currentScale;
            //lastScale = image.getScale();;
            currentScale = image.getScale();;
            next.x = image.getImageX();
            next.y = image.getImageY();
            calculateBoundaries();
            image.animationStart(new ZoomAnimation());
        }

[jasonpolites]

Actually.. I've already implemented this. Just not quite finished. Will upload soon