Instagram's heart animation mimic - FadeScale animation

Question

I'm trying to create an animation similar to the instagram double tap animation, where the heart scales up from center while fading in, and then it stays visible for a little and then scales down to center while fading out.

I'm using this animation:

public void animateHeart(final ImageView view) {
AnimationSet animation = new AnimationSet(true);
animation.addAnimation(new AlphaAnimation(0.0f, 1.0f));
animation.addAnimation(new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f));
animation.setDuration(700);
animation.setRepeatMode(Animation.REVERSE);
view.startAnimation(animation);
}

It works well for appearing animation, but the animation doesn't reverse. Also, I want it to animate only once.

May someone tell me what am I doing wrong? Thanks in advance.

Answer 1

You are only starting one Scale and Alpha Animation with your code.

This line :

animation.setRepeatMode(Animation.REVERSE);

apparently does not work well in an AnimationSet, so you have to apply it to each Animation separately. I would recommend something like this :

public void animateHeart(final ImageView view) {
    ScaleAnimation scaleAnimation = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f,
            Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    prepareAnimation(scaleAnimation);

    AlphaAnimation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
    prepareAnimation(alphaAnimation);

    AnimationSet animation = new AnimationSet(true);
    animation.addAnimation(alphaAnimation);
    animation.addAnimation(scaleAnimation);
    animation.setDuration(700);
    animation.setFillAfter(true);

    view.startAnimation(animation);

}

private Animation prepareAnimation(Animation animation){
    animation.setRepeatCount(1);
    animation.setRepeatMode(Animation.REVERSE);
    return animation;
}

Dont forget the

animation.setFillAfter(true);

Or your heart will reappear when the Animation is finished.