Reverse Animation

[garudaonekh]

Hi, Nice animation. Anyway, I have no idea how reverse the animation back to its original state.

[mhdatie]

+1 for revert animation

[mhdatie]

@chamroeunbm try setting the ObjectAnimator in the fragment and call anim.reverse()

I haven't tried it but based on the documentation it reverses the animation. Also:

• add a flag that indicates the final and current state of the container
• override in AnimatorListenerAdapter the onAnimationStart method and implement the reverse of onAnimationEnd ONLY if the current state of the container is revealed.

I will try it and let you know.

[axsddlr]

anyone able to revert the animation?

[adb-shell]

Hi @Ayysir You can use a Reverse interpolator comes back in the same path

public class ReverseInterpolator implements Interpolator { @Override public float getInterpolation(float paramFloat) { return Math.abs(paramFloat -1f); } }

For more you can check in my post

[axsddlr]

@callmekarthik just tried the class, similar to how you've implemented it still does nothing

[adb-shell]

private void reverseFabPressed(){ AnimatorPath path = new AnimatorPath(); path.moveTo(0, 0); path.curveTo(-200, -50, -230, -450, -255, -500); final ObjectAnimator anim = ObjectAnimator.ofObject(this, "fabLoc", new PathEvaluator(), path.getPoints().toArray()); anim.setInterpolator(new ReverseInterpolator()); anim.setDuration(300); anim.start(); }

is the method i call to reverse the animations, are you doing something similar? this simply reverse along the same path.

[axsddlr]

@callmekarthik I set the reverse FAB method in a onclick listener and it does nothing ` public void onFabPressed(View view) { final float startX = mFab.getX();

    AnimatorPath path = new AnimatorPath();
    path.moveTo(0, 0);
    path.curveTo(-200, 200, -400, 100, -600, 50);

    anim = ObjectAnimator.ofObject(this, "fabLoc",
            new PathEvaluator(), path.getPoints().toArray());

    anim.setInterpolator(new AccelerateInterpolator());
    anim.setDuration(ANIMATION_DURATION);
    anim.start();

    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {

        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            if (Math.abs(startX - mFab.getX()) > MINIMUN_X_DISTANCE) {
                if (!mRevealFlag) {
                    mFabContainer.setY(mFabContainer.getY() + mFabSize / 2);

                    mFab.animate()
                            .scaleXBy(SCALE_FACTOR)
                            .scaleYBy(SCALE_FACTOR)
                            .setListener(mEndRevealListener)
                            .setDuration(ANIMATION_DURATION);

                    mRevealFlag = true;
                }
            }
        }
    });
}

public void reverseFab (View view) {
    final float startX = mFab.getX();
    AnimatorPath path = new AnimatorPath();
    path.moveTo(0, 0);
    path.curveTo(-200, 200, -400, 100, -600, 50);

    anim = ObjectAnimator.ofObject(this, "fabLoc",
            new PathEvaluator(), path.getPoints().toArray());

    anim.setInterpolator(new ReverseInterpolator());
    anim.setDuration(ANIMATION_DURATION);
    anim.start();
}

private AnimatorListenerAdapter mEndRevealListener = new AnimatorListenerAdapter() {

    @Override
    public void onAnimationEnd(Animator animation) {
        super.onAnimationEnd(animation);

        mFab.setVisibility(View.INVISIBLE);
        mFabContainer.setBackgroundColor(getResources()
                .getColor(R.color.brand_accent));

        for (int i = 0; i < mControlsContainer.getChildCount(); i++) {
            View v = mControlsContainer.getChildAt(i);
            ViewPropertyAnimator animator = v.animate()
                    .scaleX(1).scaleY(1)
                    .setDuration(ANIMATION_DURATION);

            animator.setStartDelay(i * 50);
            animator.start();
        }
    }
};

/**
 * We need this setter to translate between the information the animator
 * produces (a new "PathPoint" describing the current animated location)
 * and the information that the button requires (an xy location). The
 * setter will be called by the ObjectAnimator given the 'fabLoc'
 * property string.
 */
public void setFabLoc(PathPoint newLoc) {
    mFab.setTranslationX(newLoc.mX);

    if (mRevealFlag)
        mFab.setTranslationY(newLoc.mY - (mFabSize / 2));
    else
        mFab.setTranslationY(newLoc.mY);
}`

[axsddlr]

wish original @saulmm added a reverse animation to bring it back to original state

[axsddlr]

anymore news on reversing animation

[uzbhutta]

@Ayysir Were you able to implement a reverse animation successfully since the last post? Thanks in advance

[axsddlr]

No I was not able to

On Jul 25, 2016 11:38 AM, "Umar Bhutta" [email protected] wrote:

@Ayysir https://github.com/Ayysir Were you able to implement a reverse animation successfully since the last post? Thanks in advance

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/saulmm/Curved-Fab-Reveal-Example/issues/5#issuecomment-234990906, or mute the thread https://github.com/notifications/unsubscribe-auth/AB3SMyG8JUSFJOBXh40QmaMdC-nWfZqQks5qZNhagaJpZM4FwR00 .

[uzbhutta]

@Ayysir If you're still interested, I formulated a workaround solution using Scenes and the ChangeTransform() animation. Let's say on a button press you want to reverse the animation, then in the OnClickListener for that button, you would:

//define the root of where the transition will take place, i.e. mFabContainer, or in my case, the whole layout
ViewGroup transitionRoot = mRelativeLayout;

//create a scene, using the current activity/fragment layout
                Scene originalScene = Scene.getSceneForLayout(transitionRoot, R.layout.name_of_current_activity/fragment_layout, context);

                originalScene.setEnterAction(new Runnable() {
                    @Override
                    public void run() {
                             //rebind views because after a Transition, Activity/Fragment gets recreated
                    }
                });

//kick it into action using ChangeTransform() for smooth reverse transition 
TransitionManager.go(originalScene, new ChangeTransform());

Hope that helps.

[segunmicheal27]

Please can you give a full useage example

[segunmicheal27]

@uzbhutta it try to use seen like this:

`public void reverseFab (View view) {

    Scene originalScene = Scene.getSceneForLayout((ViewGroup) mRootView, R.layout.fragment_root_layout, getActivity());
    //rebind views because after a Transition, Activity/Fragment gets recreated
    originalScene.setEnterAction(this::bindViews);

//kick it into action using ChangeTransform() for smooth reverse transition TransitionManager.go(originalScene, new ChangeTransform()); }`

but the problem the fab refuse to reveal again it just rest to the left hand side when i clicked on it

[sdroider]

Has anyone realized this reverse ???