CODEWITHSUNDEEP
androidanimationandroid-imageview
Jahir Fiquitiva
Jahir Fiquitiva

Reputation: 1509

Instagram's heart animation mimic - FadeScale animation

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.

Upvotes: 4

Views: 4069

Answers (2)

Pratibha Sarode
Pratibha Sarode

Reputation: 1849

           final Animation myAnim = AnimationUtils.loadAnimation(getActivity(), R.anim.bounce);

                // Use bounce interpolator with amplitude 0.2 and frequency 20
                MyBounceInterpolator interpolator = new MyBounceInterpolator(0.1, 15);
                myAnim.setInterpolator(interpolator);

                imgFavourite.startAnimation(myAnim);

Add anim folder in res folder. add bounce.xml

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <scale
        android:duration="2000"
        android:fromXScale="0.3"
        android:toXScale="1.0"
        android:fromYScale="0.3"
        android:toYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%" />
</set>

create MyBounceInterpolator.java class

public class MyBounceInterpolator implements android.view.animation.Interpolator {
    private double mAmplitude = 1;
    private double mFrequency = 10;

    public MyBounceInterpolator(double amplitude, double frequency) {
        mAmplitude = amplitude;
        mFrequency = frequency;
    }

    public float getInterpolation(float time) {
        return (float) (-1 * Math.pow(Math.E, -time / mAmplitude) *
                Math.cos(mFrequency * time) + 1);
    }
}

Upvotes: 0

A Honey Bustard
A Honey Bustard

Reputation: 3493

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.

Upvotes: 9

Related Questions