react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

647 lines
14 KiB
JavaScript

/**
* Copyright (c) 2015, Facebook, Inc. All rights reserved.
*
* Facebook, Inc. ("Facebook") owns all right, title and interest, including
* all intellectual property and other proprietary rights, in and to the React
* Native CustomComponents software (the "Software"). Subject to your
* compliance with these terms, you are hereby granted a non-exclusive,
* worldwide, royalty-free copyright license to (1) use and copy the Software;
* and (2) reproduce and distribute the Software as part of your own software
* ("Your Software"). Facebook reserves all rights not expressly granted to
* you in this license agreement.
*
* THE SOFTWARE AND DOCUMENTATION, IF ANY, ARE PROVIDED "AS IS" AND ANY EXPRESS
* OR IMPLIED WARRANTIES (INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
* OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE) ARE DISCLAIMED.
* IN NO EVENT SHALL FACEBOOK OR ITS AFFILIATES, OFFICERS, DIRECTORS OR
* EMPLOYEES BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
* PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
* OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
* WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
* OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THE SOFTWARE, EVEN IF
* ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*
* @providesModule NavigatorSceneConfigs
*/
'use strict';
var Dimensions = require('Dimensions');
var PixelRatio = require('PixelRatio');
var buildStyleInterpolator = require('buildStyleInterpolator');
var SCREEN_WIDTH = Dimensions.get('window').width;
var SCREEN_HEIGHT = Dimensions.get('window').height;
var FadeToTheLeft = {
// Rotate *requires* you to break out each individual component of
// rotation (x, y, z, w)
transformTranslate: {
from: {x: 0, y: 0, z: 0},
to: {x: -Math.round(Dimensions.get('window').width * 0.3), y: 0, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
// Uncomment to try rotation:
// Quick guide to reasoning about rotations:
// http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-17-quaternions/#Quaternions
// transformRotateRadians: {
// from: {x: 0, y: 0, z: 0, w: 1},
// to: {x: 0, y: 0, z: -0.47, w: 0.87},
// min: 0,
// max: 1,
// type: 'linear',
// extrapolate: true
// },
transformScale: {
from: {x: 1, y: 1, z: 1},
to: {x: 0.95, y: 0.95, z: 1},
min: 0,
max: 1,
type: 'linear',
extrapolate: true
},
opacity: {
from: 1,
to: 0.3,
min: 0,
max: 1,
type: 'linear',
extrapolate: false,
round: 100,
},
translateX: {
from: 0,
to: -Math.round(Dimensions.get('window').width * 0.3),
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
scaleX: {
from: 1,
to: 0.95,
min: 0,
max: 1,
type: 'linear',
extrapolate: true
},
scaleY: {
from: 1,
to: 0.95,
min: 0,
max: 1,
type: 'linear',
extrapolate: true
},
};
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 = {
opacity: {
from: 0,
to: 1,
min: 0.5,
max: 1,
type: 'linear',
extrapolate: false,
round: 100,
},
};
var FadeOut = {
opacity: {
from: 1,
to: 0,
min: 0,
max: 0.5,
type: 'linear',
extrapolate: false,
round: 100,
},
};
var ToTheLeft = {
transformTranslate: {
from: {x: 0, y: 0, z: 0},
to: {x: -Dimensions.get('window').width, y: 0, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
opacity: {
value: 1.0,
type: 'constant',
},
translateX: {
from: 0,
to: -Dimensions.get('window').width,
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
};
var ToTheUp = {
transformTranslate: {
from: {x: 0, y: 0, z: 0},
to: {x: 0, y: -Dimensions.get('window').height, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
opacity: {
value: 1.0,
type: 'constant',
},
translateY: {
from: 0,
to: -Dimensions.get('window').height,
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
};
var ToTheDown = {
transformTranslate: {
from: {x: 0, y: 0, z: 0},
to: {x: 0, y: Dimensions.get('window').height, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
opacity: {
value: 1.0,
type: 'constant',
},
translateY: {
from: 0,
to: Dimensions.get('window').height,
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
};
var FromTheRight = {
opacity: {
value: 1.0,
type: 'constant',
},
transformTranslate: {
from: {x: Dimensions.get('window').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: Dimensions.get('window').width,
to: 0,
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
scaleX: {
value: 1,
type: 'constant',
},
scaleY: {
value: 1,
type: 'constant',
},
};
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 FromTheDown = {
...FromTheRight,
transformTranslate: {
from: {y: SCREEN_HEIGHT, x: 0, z: 0},
to: {x: 0, y: 0, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
translateY: {
from: SCREEN_HEIGHT,
to: 0,
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
};
var FromTheTop = {
...FromTheRight,
transformTranslate: {
from: {y: -SCREEN_HEIGHT, x: 0, z: 0},
to: {x: 0, y: 0, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
translateY: {
from: -SCREEN_HEIGHT,
to: 0,
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
};
var ToTheBack = {
// Rotate *requires* you to break out each individual component of
// rotation (x, y, z, w)
transformTranslate: {
from: {x: 0, y: 0, z: 0},
to: {x: 0, y: 0, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
transformScale: {
from: {x: 1, y: 1, z: 1},
to: {x: 0.95, y: 0.95, z: 1},
min: 0,
max: 1,
type: 'linear',
extrapolate: true
},
opacity: {
from: 1,
to: 0.3,
min: 0,
max: 1,
type: 'linear',
extrapolate: false,
round: 100,
},
scaleX: {
from: 1,
to: 0.95,
min: 0,
max: 1,
type: 'linear',
extrapolate: true
},
scaleY: {
from: 1,
to: 0.95,
min: 0,
max: 1,
type: 'linear',
extrapolate: true
},
};
var FromTheFront = {
opacity: {
value: 1.0,
type: 'constant',
},
transformTranslate: {
from: {x: 0, y: Dimensions.get('window').height, z: 0},
to: {x: 0, y: 0, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
translateY: {
from: Dimensions.get('window').height,
to: 0,
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
scaleX: {
value: 1,
type: 'constant',
},
scaleY: {
value: 1,
type: 'constant',
},
};
var ToTheBackAndroid = {
opacity: {
value: 1,
type: 'constant',
},
};
var FromTheFrontAndroid = {
opacity: {
from: 0,
to: 1,
min: 0.5,
max: 1,
type: 'linear',
extrapolate: false,
round: 100,
},
transformTranslate: {
from: {x: 0, y: 100, z: 0},
to: {x: 0, y: 0, z: 0},
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
translateY: {
from: 100,
to: 0,
min: 0,
max: 1,
type: 'linear',
extrapolate: true,
round: PixelRatio.get(),
},
};
var BaseOverswipeConfig = {
frictionConstant: 1,
frictionByDistance: 1.5,
};
var BaseLeftToRightGesture = {
// If the gesture can end and restart during one continuous touch
isDetachable: false,
// How far the swipe must drag to start transitioning
gestureDetectMovement: 2,
// Amplitude of release velocity that is considered still
notMoving: 0.3,
// Fraction of directional move required.
directionRatio: 0.66,
// Velocity to transition with when the gesture release was "not moving"
snapVelocity: 2,
// Region that can trigger swipe. iOS default is 30px from the left edge
edgeHitWidth: 30,
// Ratio of gesture completion when non-velocity release will cause action
stillCompletionRatio: 3 / 5,
fullDistance: SCREEN_WIDTH,
direction: 'left-to-right',
};
var BaseRightToLeftGesture = {
...BaseLeftToRightGesture,
direction: 'right-to-left',
};
var BaseDownUpGesture = {
...BaseLeftToRightGesture,
fullDistance: SCREEN_HEIGHT,
direction: 'down-to-up',
};
var BaseUpDownGesture = {
...BaseLeftToRightGesture,
fullDistance: SCREEN_HEIGHT,
direction: 'up-to-down',
};
var BaseConfig = {
// A list of all gestures that are enabled on this scene
gestures: {
pop: BaseLeftToRightGesture,
},
// Rebound spring parameters when transitioning FROM this scene
springFriction: 26,
springTension: 200,
// Velocity to start at when transitioning without gesture
defaultTransitionVelocity: 1.5,
// Animation interpolators for horizontal transitioning:
animationInterpolators: {
into: buildStyleInterpolator(FromTheRight),
out: buildStyleInterpolator(FadeToTheLeft),
},
};
var NavigatorSceneConfigs = {
PushFromRight: {
...BaseConfig,
// We will want to customize this soon
},
FloatFromRight: {
...BaseConfig,
// We will want to customize this soon
},
FloatFromLeft: {
...BaseConfig,
gestures: {
pop: BaseRightToLeftGesture,
},
animationInterpolators: {
into: buildStyleInterpolator(FromTheLeft),
out: buildStyleInterpolator(FadeToTheRight),
},
},
FloatFromBottom: {
...BaseConfig,
gestures: {
pop: {
...BaseLeftToRightGesture,
edgeHitWidth: 150,
direction: 'top-to-bottom',
fullDistance: SCREEN_HEIGHT,
}
},
animationInterpolators: {
into: buildStyleInterpolator(FromTheFront),
out: buildStyleInterpolator(ToTheBack),
},
},
FloatFromBottomAndroid: {
...BaseConfig,
gestures: null,
defaultTransitionVelocity: 3,
springFriction: 20,
animationInterpolators: {
into: buildStyleInterpolator(FromTheFrontAndroid),
out: buildStyleInterpolator(ToTheBackAndroid),
},
},
FadeAndroid: {
...BaseConfig,
gestures: null,
animationInterpolators: {
into: buildStyleInterpolator(FadeIn),
out: buildStyleInterpolator(FadeOut),
},
},
HorizontalSwipeJump: {
...BaseConfig,
gestures: {
jumpBack: {
...BaseLeftToRightGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
jumpForward: {
...BaseRightToLeftGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
},
animationInterpolators: {
into: buildStyleInterpolator(FromTheRight),
out: buildStyleInterpolator(ToTheLeft),
},
},
HorizontalSwipeJumpFromRight: {
...BaseConfig,
gestures: {
jumpBack: {
...BaseRightToLeftGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
jumpForward: {
...BaseLeftToRightGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
pop: BaseRightToLeftGesture,
},
animationInterpolators: {
into: buildStyleInterpolator(FromTheLeft),
out: buildStyleInterpolator(FadeToTheRight),
},
},
VerticalUpSwipeJump: {
...BaseConfig,
gestures: {
jumpBack: {
...BaseDownUpGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
jumpForward: {
...BaseDownUpGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
},
animationInterpolators: {
into: buildStyleInterpolator(FromTheDown),
out: buildStyleInterpolator(ToTheUp),
},
},
VerticalDownSwipeJump: {
...BaseConfig,
gestures: {
jumpBack: {
...BaseUpDownGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
jumpForward: {
...BaseUpDownGesture,
overswipe: BaseOverswipeConfig,
edgeHitWidth: null,
isDetachable: true,
},
},
animationInterpolators: {
into: buildStyleInterpolator(FromTheTop),
out: buildStyleInterpolator(ToTheDown),
},
},
};
module.exports = NavigatorSceneConfigs;