2

I am trying to animate a view to scale up on touch down and scale down on touch up. The following is my animation declarations:

scale_up.xml

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fillAfter="true"
    android:duration="500"
    android:fromXScale="1.0"
    android:fromYScale="1.0"
    android:toXScale="1.5"
    android:toYScale="1.5" />

scale_down.xml

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fillAfter="true"
    android:duration="500"
    android:fromXScale="1.5"
    android:fromYScale="1.5"
    android:toXScale="1.0"
    android:toYScale="1.0" />

I then use SurfaceHolder's onTouch method to reach to MotionEvents:

public boolean onTouchEvent(MotionEvent event) {
    switch(event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            mView.startAnimation(mScaleUp);
            mView.invalidate();
            // Intentional fall-through

        case MotionEvent.ACTION_MOVE:
            float[] focusCoords = translatePointerCoords(this, event);

            mView.setX(focusCoords[0] - mView.getWidth() / 2);
            mView.setY(focusCoords[0] - mView.getHeight() / 2);

            mView.invalidate();
            mView.requestLayout();
            break;

        case MotionEvent.ACTION_UP:
            mView.startAnimation(mScaleDown);
            mView.invalidate()
            break;
    }
}

public static float[] translatePointerCoords(View view, MotionEvent event) {
    final int index = event.getActionIndex();
    final float[] coords = new float[] { event.getX(index), event.getY(index) };
    Matrix matrix = new Matrix();
    view.getMatrix().invert(matrix);
    matrix.postTranslate(view.getScrollX(), view.getScrollY());
    matrix.mapPoints(coords);

    return coords;
}

The mView view is 120dp x 120dp and it is drawn initially at lication (0, 0). If animations are disabled, I can see the view being dragged under my finder. However, when animations are enabled, upon touching my finger down, I see the view scale up but it also displaced in the bottom-right direction. As it turns out, if I put my finger close to parent's (0, 0) coordinates, the view doesn't get displaced. This means that somehow the pivotX and pivotY either get ignored or somehow they get cached with the old view's position when I load the animations. Also, when I start moving my finger, I see that the scaled image gets distorted and all messed up:

Distorted view after touch and move.

Based on all of this, I'm getting the idea that tween animations with movable/dynamic views are not meant to play together. Should I use property animations? Is that what is commonly used to perform such tasks?

Thanks for any advice!

Vadym
  • 964
  • 1
  • 13
  • 31

1 Answers1

0

I have the same problem, too. It is because your "real" LayoutParam is too small to update the whole "fillAfter" region. A simple way to solve that: invalidate the parent layout!

Yuying Chen
  • 96
  • 1
  • 4