kylefang/react-navigation
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-navigation.git synced 2026-02-12 09:21:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: tweak android q animations

Browse Source
This commit is contained in:
satyajit.happy
2019-09-08 12:40:38 +02:00
parent 8e8b7eef36
commit f57a91c417
2 changed files with 28 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx
View File

@@ -201,31 +201,35 @@ export function forRevealFromBottomAndroid({
/**
* Standard Android-style reveal from the bottom for Android Q.
* TODO: Update this with correct values when AOSP is updated.
*/
export function forScaleFromCenterAndroid({
current,
next,
closing,
}: CardInterpolationProps): CardInterpolatedStyle {
const cardOpacityFocused = interpolate(current.progress, {
inputRange: [0, 0.5, 1],
outputRange: [0, 1, 1],
const progress = add(current.progress, next ? next.progress : 0);
const opacity = interpolate(progress, {
inputRange: [0, 0.8, 1, 1.2, 2],
outputRange: [0, 0.5, 1, 0.33, 0],
});
const cardScaleFocused = interpolate(current.progress, {
inputRange: [0, 1],
outputRange: [0.9, 1],
});
const cardScaleUnFocused = next
? interpolate(next.progress, {
inputRange: [0, 1],
outputRange: [1, 1.1],
})
: 1;
const scale = cond(
closing,
interpolate(current.progress, {
inputRange: [0, 1],
outputRange: [0.9, 1],
}),
interpolate(progress, {
inputRange: [0, 1, 2],
outputRange: [0.85, 1, 1.1],
})
);
return {
containerStyle: {
opacity: cardOpacityFocused,
transform: [{ scale: cardScaleFocused }, { scale: cardScaleUnFocused }],
opacity,
transform: [{ scale }],
},
};
}

14
packages/stack/src/TransitionConfigs/TransitionSpecs.tsx
View File

@@ -18,7 +18,7 @@ export const TransitionIOSSpec: TransitionSpec = {
/**
* Configuration for activity open animation from Android Nougat.
* See http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
* See http://aosp.opersys.com/xref/android-7.1.2_r37/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
*/
export const FadeInFromBottomAndroidSpec: TransitionSpec = {
animation: 'timing',
@@ -30,7 +30,7 @@ export const FadeInFromBottomAndroidSpec: TransitionSpec = {
/**
* Configuration for activity close animation from Android Nougat.
* See http://androidxref.com/7.1.1_r6/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml
* See http://aosp.opersys.com/xref/android-7.1.2_r37/xref/frameworks/base/core/res/res/anim/activity_close_exit.xml
*/
export const FadeOutToBottomAndroidSpec: TransitionSpec = {
animation: 'timing',
@@ -42,26 +42,28 @@ export const FadeOutToBottomAndroidSpec: TransitionSpec = {
/**
* Approximate configuration for activity open animation from Android Pie.
* See http://androidxref.com/9.0.0_r3/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
* See http://aosp.opersys.com/xref/android-9.0.0_r47/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
*/
export const RevealFromBottomAndroidSpec: TransitionSpec = {
animation: 'timing',
config: {
duration: 425,
// 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
// See http://aosp.opersys.com/xref/android-9.0.0_r47/xref/frameworks/base/core/res/res/interpolator/fast_out_extra_slow_in.xml
easing: Easing.bezier(0.35, 0.45, 0, 1),
},
};
/**
* Approximate configuration for activity open animation from Android Q.
* TODO: Update this with correct values when AOSP is updated.
* See http://aosp.opersys.com/xref/android-10.0.0_r2/xref/frameworks/base/core/res/res/anim/activity_open_enter.xml
*/
export const ScaleFromCenterAndroidSpec: TransitionSpec = {
animation: 'timing',
config: {
duration: 425,
duration: 400,
// This is super rough approximation of the path used for the curve by android
// See http://aosp.opersys.com/xref/android-10.0.0_r2/xref/frameworks/base/core/res/res/interpolator/fast_out_extra_slow_in.xml
easing: Easing.bezier(0.35, 0.45, 0, 1),
},
};