Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Android native transition between screens #726

Closed
ferrannp opened this issue Mar 17, 2017 · 3 comments
Closed

Android native transition between screens #726

ferrannp opened this issue Mar 17, 2017 · 3 comments

Comments

@ferrannp
Copy link
Contributor

@ferrannp ferrannp commented Mar 17, 2017

Update 1

This might be even more complicated checking the actual newest source:

activity_open_enter.xml
activity_open_exit.xml
activity_close_enter.xml
activity_close_exit.xml

Original

We had a discussion about this in the past @ericvicenti @satya164. To me, right now it looks similar to the default Android behaviour but still I think it is not as it is on Android. Specially when going back (exit animation).

This is the current implementation (TransitionConfig.js):

// Standard Android navigation transition when opening an Activity
const FadeInFromBottomAndroid = ({
  // See http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
  transitionSpec: {
    duration: 350,
    easing: Easing.out(Easing.poly(5)),  // decelerate
    timing: Animated.timing,
  },
  screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid,
} : TransitionConfig);

// Standard Android navigation transition when closing an Activity
const FadeOutToBottomAndroid = ({
  // See http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml
  transitionSpec: {
    duration: 230,
    easing: Easing.in(Easing.poly(4)),  // accelerate
    timing: Animated.timing,
  },
  screenInterpolator: CardStackStyleInterpolator.forFadeFromBottomAndroid,
} : TransitionConfig);

But when I check those links: http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml & http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml#26, I see a different configuration.

in
alpha: 200ms, decelerate_quart(2)
position: 350ms, decelerate_quint(2.5)

out
alpha: 150ms, linear, delay 150
position: 250ms, accelerate_quart(2.5)

First of all there are two animations (alpha and position) that run in parallel (with different durations and easing). I've been trying to replicate the values directly in Transitioner.js. Right now it looks like:

const animations = indexHasChanged
  ? [
    timing(
      progress,
      {
        ...transitionSpec,
        toValue: 1,
      },
    ),
    timing(
      position,
      {
        ...transitionSpec,
        toValue: nextProps.navigation.state.index,
      },
    ),
  ]
  : [];

...
Animated.parallel(animations).start(this._onTransitionEnd);
});

I tried to replicate the config:

let alphaDelay = 0, alphaDuration, alphaEasing, positionDuration, positionEasing;
if (transitionSpec.duration === 350) {
  alphaDuration = 200;
  alphaEasing = Easing.bezier(0.165, 0.840, 0.440, 1.000); // ease-out-quart
  positionDuration = 350;
  positionEasing = Easing.bezier(0.230, 1.000, 0.320, 1.000); // ease-out-quint
} else { // 250
  alphaDuration = 150;
  alphaDelay = 100;
  alphaEasing = Easing.linear();
  positionDuration = 250;
  positionEasing = Easing.bezier(0.895, 0.030, 0.685, 0.220); // ease-in-quart
}

const animations = indexHasChanged
  ? [
    timing(
      progress,
      {
        ...transitionSpec,
        duration: alphaDuration,
        easing: alphaEasing,
        delay: alphaDelay > 0 ? alphaDelay : 0,
        toValue: 1,
      },
    ),
    timing(
      position,
      {
        ...transitionSpec,
        duration: positionDuration,
        easing: positionEasing,
        toValue: nextProps.navigation.state.index,
      },
    ),
  ]
  : [];

...
Animated.parallel(animations).start(this._onTransitionEnd);

It looks like:

ezgif-3-ee25b4c40d

But I feel I am still missing something. Even that it uses Animated.parallel, it does not seem that the alpha one (the first one) is affecting at all. Actually, if I remove it completely from the array, I do not see any difference (I think). UPDATE: Instead of parallel I think we need Animated.stagger instead

What do you think? :)

@grabbou

This comment has been minimized.

Copy link
Collaborator

@grabbou grabbou commented Apr 26, 2017

Consider sending a PR that improves animations!

@brentvatne brentvatne closed this Feb 7, 2018
@Noitidart

This comment has been minimized.

Copy link

@Noitidart Noitidart commented Mar 21, 2018

There is also an Android "More" transition when in settings. I created an RFC - react-navigation/rfcs#35

@react-navigation react-navigation locked and limited conversation to collaborators Mar 22, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants
You can’t perform that action at this time.