Open garudaonekh opened 9 years ago
+1 for revert animation
@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:
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.
anyone able to revert the animation?
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
@callmekarthik just tried the class, similar to how you've implemented it still does nothing
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.
@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);
}`
wish original @saulmm added a reverse animation to bring it back to original state
anymore news on reversing animation
@Ayysir Were you able to implement a reverse animation successfully since the last post? Thanks in advance
No I was not able to
On Jul 25, 2016 11:38 AM, "Umar Bhutta" notifications@github.com 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 .
@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.
Please can you give a full useage example
@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
Has anyone realized this reverse ???
Hi, Nice animation. Anyway, I have no idea how reverse the animation back to its original state.