Android - Image animation not working as intended

Question

I have 4 clickable images surounding the center of my screen. Upon clicking one of the images I want the image to slide from it's current position to the center of the screen.

Once the image reaches the center of the screen I would like the image to flip and then have my fragment load.

How do I obtain this full sequence? I have my fragment loading but I am unsure of how to create an animation that slides my image from it's current position to the center. The layout of the page is know and is as follows.

1 2 3

4 5 6

7 8 9

where 2, 4, 6, 8 are my images that I want to slide and 5 is the position that I want them to slide to on click (then flip and show my fragment).

Thanks, Dman

EDIT :

One thing I cannot get to occur is the events to play in sequence. Currently when i click the image it waits the offset that I have set on the flip_image.xml animation and then plays them all at once in the duration given to the flip_image.xml animation. Any help on this would be much appreciated.

slide_left.xml

<?xml version="1.0" encoding="utf-8"?>
<translate 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:fromXDelta="0%" 
    android:toXDelta="-112%"
    android:duration="1000"/>

slide_alpha.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:fromAlpha="0.8"
    android:toAlpha="1.0"
    android:duration="1000" />

flip_image.xml

<?xml version="1.0" encoding="utf-8"?>
<scale
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromXScale="0.0"
    android:toXScale="1.0"
    android:pivotX="50%"
    android:fromYScale="1.0"
    android:toYScale="1.0"
    android:startOffset="1000"
    android:duration="200" />

Calling Code:

private void loadFragmentAnimation(final ImageView view, final int slideDirection) {
        AnimationSet animSet = new AnimationSet(true);
        animSet.addAnimation(AnimationUtils.loadAnimation(getActivity(), slideDirection));
        animSet.addAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.slide_alpha));
        animSet.addAnimation(AnimationUtils.loadAnimation(getActivity(), R.anim.flip_image));
        animSet.setAnimationListener(new AnimationListener() {

            public void onAnimationStart(Animation animation) {             
            }

            public void onAnimationRepeat(Animation animation) {                
            }

            public void onAnimationEnd(Animation animation) {
                // mCallBack.categorySelected(view.getId());
            }
        });

        view.startAnimation(animSet);
    }

score 0 · Answer 1 · edited May 23 '17 at 10:34

0

Use View animation.

Create an AnimationSet having a TranslateAnimation followed by a ScaleAnimation to simulate a flip (you may need to mirror the image on the other side of the flip. Perhaps there's an easier way?).
Then set the animation to the ImageView using setAnimation().

I guess you should be able to specify the animation in XML too.

Edit:

For the flip animation, you may refer to the following links:

edited May 23 '17 at 10:34

Community

1
1

answered Dec 03 '12 at 16:03

Dheeraj Vepakomma

26,870
17
81
104

thanks a lot for this, seems to be working. One thing I cannot get to occur is the events to play in sequence. Currently when i click the image it waits the offset that I have set on one of the animations and then plays them all at once in the duration given to only the animation with the offset in it. I will supply my code above. Any help on this would be much appreciated. – DMCApps Dec 03 '12 at 19:23
1

@DheerajVS I have updated my question, any help with this would be much appreciated – DMCApps Dec 03 '12 at 19:38

Android - Image animation not working as intended

1 Answers1