Skip to content
This repository has been archived by the owner on Feb 8, 2020. It is now read-only.

Commit

Permalink
fix: tweak android q animations
Browse files Browse the repository at this point in the history
  • Loading branch information
satya164 committed Sep 8, 2019
1 parent 8e8b7ee commit f57a91c
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 22 deletions.
36 changes: 20 additions & 16 deletions packages/stack/src/TransitionConfigs/CardStyleInterpolators.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 cardScaleFocused = interpolate(current.progress, {
inputRange: [0, 1],
outputRange: [0.9, 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 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 changes: 8 additions & 6 deletions packages/stack/src/TransitionConfigs/TransitionSpecs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand All @@ -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),
},
};

0 comments on commit f57a91c

Please sign in to comment.