Skip to content
This repository has been archived by the owner on Nov 26, 2019. It is now read-only.

Commit

Permalink
Tweak the wipe animation to be more accurate
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed May 26, 2019
1 parent 58901b2 commit 9c1ebdf
Show file tree
Hide file tree
Showing 4 changed files with 15 additions and 23 deletions.
2 changes: 1 addition & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { View, Text, Button, StyleSheet, Platform } from 'react-native';
import { View, Text, Button, StyleSheet } from 'react-native';
import Stack, { SceneProps } from './components/Stack';
import { Route } from './types';
import { DefaultTransition } from './TransitionConfigs/TransitionPresets';
Expand Down
2 changes: 1 addition & 1 deletion src/TransitionConfigs/CardStyleInterpolators.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Animated from 'react-native-reanimated';
import { CardInterpolationProps, CardInterpolatedStyle } from '../types';

const { cond, multiply, sub, interpolate } = Animated;
const { cond, multiply, interpolate } = Animated;

/**
* Standard iOS-style slide in from the right.
Expand Down
17 changes: 8 additions & 9 deletions src/TransitionConfigs/TransitionPresets.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,8 @@ import {
} from './CardStyleInterpolators';
import { forUIKit, forNoAnimation } from './HeaderStyleInterpolators';
import {
TransitionSpecIOS,
WipeInFromBottomAndroidSpec,
WipeOutToBottomAndroidSpec,
TransitionIOSSpec,
WipeFromBottomAndroidSpec,
FadeOutToBottomAndroidSpec,
FadeInFromBottomAndroidSpec,
} from './TransitionSpecs';
Expand All @@ -22,8 +21,8 @@ export const SlideFromRightIOS: TransitionPreset = {
direction: 'horizontal',
headerMode: 'float',
transitionSpec: {
open: TransitionSpecIOS,
close: TransitionSpecIOS,
open: TransitionIOSSpec,
close: TransitionIOSSpec,
},
cardStyleInterpolator: forHorizontalIOS,
headerStyleInterpolator: forUIKit,
Expand All @@ -34,8 +33,8 @@ export const ModalSlideFromBottomIOS: TransitionPreset = {
direction: 'vertical',
headerMode: 'screen',
transitionSpec: {
open: TransitionSpecIOS,
close: TransitionSpecIOS,
open: TransitionIOSSpec,
close: TransitionIOSSpec,
},
cardStyleInterpolator: forVerticalIOS,
headerStyleInterpolator: forNoAnimation,
Expand All @@ -58,8 +57,8 @@ export const WipeFromBottomAndroid: TransitionPreset = {
direction: 'vertical',
headerMode: 'screen',
transitionSpec: {
open: WipeInFromBottomAndroidSpec,
close: WipeOutToBottomAndroidSpec,
open: WipeFromBottomAndroidSpec,
close: WipeFromBottomAndroidSpec,
},
cardStyleInterpolator: forWipeFromBottomAndroid,
headerStyleInterpolator: forNoAnimation,
Expand Down
17 changes: 5 additions & 12 deletions src/TransitionConfigs/TransitionSpecs.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Easing } from 'react-native-reanimated';
import { TransitionSpec } from '../types';

export const TransitionSpecIOS: TransitionSpec = {
export const TransitionIOSSpec: TransitionSpec = {
timing: 'spring',
config: {
stiffness: 1000,
Expand Down Expand Up @@ -32,19 +32,12 @@ export const FadeOutToBottomAndroidSpec: TransitionSpec = {
};

// See http://androidxref.com/9.0.0_r3/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
export const WipeInFromBottomAndroidSpec: TransitionSpec = {
export const WipeFromBottomAndroidSpec: TransitionSpec = {
timing: 'timing',
config: {
duration: 425,
easing: Easing.bezier(0.4, 0, 0.2, 1),
},
};

// See http://androidxref.com/9.0.0_r3/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml
export const WipeOutToBottomAndroidSpec: TransitionSpec = {
timing: 'timing',
config: {
duration: 425,
easing: Easing.bezier(0.4, 0, 0.2, 1),
// This is super rough approximation of the path used for the curve by android
// See http://androidxref.com/9.0.0_r3/xref/frameworks/base/core/res/res/interpolator/fast_out_extra_slow_in.xml
easing: Easing.bezier(0.35, 0.45, 0, 1),
},
};

0 comments on commit 9c1ebdf

Please sign in to comment.