FloatFromLeft animation

Summary:
float from left animation for Navigator.SceneConfigs

#1100
@ericvicenti
@ide
Closes https://github.com/facebook/react-native/pull/1249
Github Author: Logan Bernard <bernard.logan4@gmail.com>

@public

Test Plan: Video: https://drive.google.com/file/d/0B9HtmABaCcR0Zi1yNkl5UDhWbzg/view
This commit is contained in:
Logan Bernard 2015-05-12 18:09:08 -07:00 committed by Christopher Chedeau
parent 89e26e92b6
commit 2ed2d20dfe
1 changed files with 40 additions and 0 deletions

View File

@ -101,6 +101,18 @@ var FadeToTheLeft = {
}, },
}; };
var FadeToTheRight = {
...FadeToTheLeft,
transformTranslate: {
from: {x: 0, y: 0, z: 0},
to: {x: Math.round(SCREEN_WIDTH * 0.3), y: 0, z: 0},
},
translateX: {
from: 0,
to: Math.round(SCREEN_WIDTH * 0.3),
}
};
var FadeIn = { var FadeIn = {
opacity: { opacity: {
from: 0, from: 0,
@ -187,6 +199,27 @@ var FromTheRight = {
}, },
}; };
var FromTheLeft = {
...FromTheRight,
transformTranslate: {
from: {x: -SCREEN_WIDTH, y: 0, z: 0},
to: {x: 0, y: 0, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
translateX: {
from: -SCREEN_WIDTH,
to: 0,
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
};
var ToTheBack = { var ToTheBack = {
// Rotate *requires* you to break out each individual component of // Rotate *requires* you to break out each individual component of
@ -374,6 +407,13 @@ var NavigatorSceneConfigs = {
...BaseConfig, ...BaseConfig,
// We will want to customize this soon // We will want to customize this soon
}, },
FloatFromLeft: {
...BaseConfig,
animationInterpolators: {
into: buildStyleInterpolator(FromTheLeft),
out: buildStyleInterpolator(FadeToTheRight),
},
},
FloatFromBottom: { FloatFromBottom: {
...BaseConfig, ...BaseConfig,
gestures: { gestures: {