1
- 'use strict' ;
1
+ import React from 'react-native' ;
2
+ const { PixelRatio, Navigator, Dimensions} = React ;
3
+ import buildStyleInterpolator from 'react-native/Libraries/Utilities/buildStyleInterpolator' ;
2
4
3
- // Scene Config
4
- var { Navigator, Dimensions, PixelRatio} = require ( 'react-native' ) ;
5
- var buildStyleInterpolator = require ( 'react-native/Libraries/Utilities/buildStyleInterpolator' ) ;
6
- var FlatFloatFromRight = Object . assign ( { } , Navigator . SceneConfigs . FloatFromRight ) ;
7
- var FlatFloatFromBottom = Object . assign ( { } , Navigator . SceneConfigs . FloatFromBottom ) ;
8
- FlatFloatFromRight . gestures = { } ;
5
+ var NoTransition = {
6
+ opacity : {
7
+ from : 1 ,
8
+ to : 1 ,
9
+ min : 1 ,
10
+ max : 1 ,
11
+ type : 'linear' ,
12
+ extrapolate : false ,
13
+ round : 100 ,
14
+ } ,
15
+ } ;
9
16
10
- var FlatFadeToTheLeft = {
17
+ var FadeToTheLeft = {
18
+ // Rotate *requires* you to break out each individual component of
19
+ // rotation (x, y, z, w)
11
20
transformTranslate : {
12
21
from : { x : 0 , y : 0 , z : 0 } ,
13
22
to : { x : - Math . round ( Dimensions . get ( 'window' ) . width * 0.3 ) , y : 0 , z : 0 } ,
@@ -17,6 +26,25 @@ var FlatFadeToTheLeft = {
17
26
extrapolate : true ,
18
27
round : PixelRatio . get ( ) ,
19
28
} ,
29
+ // Uncomment to try rotation:
30
+ // Quick guide to reasoning about rotations:
31
+ // http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-17-quaternions/#Quaternions
32
+ // transformRotateRadians: {
33
+ // from: {x: 0, y: 0, z: 0, w: 1},
34
+ // to: {x: 0, y: 0, z: -0.47, w: 0.87},
35
+ // min: 0,
36
+ // max: 1,
37
+ // type: 'linear',
38
+ // extrapolate: true
39
+ // },
40
+ transformScale : {
41
+ from : { x : 1 , y : 1 , z : 1 } ,
42
+ to : { x : 0.95 , y : 1 , z : 1 } ,
43
+ min : 0 ,
44
+ max : 1 ,
45
+ type : 'linear' ,
46
+ extrapolate : true
47
+ } ,
20
48
opacity : {
21
49
from : 1 ,
22
50
to : 0.3 ,
@@ -35,43 +63,85 @@ var FlatFadeToTheLeft = {
35
63
extrapolate : true ,
36
64
round : PixelRatio . get ( ) ,
37
65
} ,
66
+ scaleX : {
67
+ from : 1 ,
68
+ to : 0.95 ,
69
+ min : 0 ,
70
+ max : 1 ,
71
+ type : 'linear' ,
72
+ extrapolate : true
73
+ } ,
74
+ scaleY : {
75
+ from : 1 ,
76
+ to : 0.95 ,
77
+ min : 0 ,
78
+ max : 1 ,
79
+ type : 'linear' ,
80
+ extrapolate : true
81
+ } ,
38
82
} ;
39
- var FlatFadeToTheUp = {
83
+
84
+
85
+
86
+ var FromTheRight = {
40
87
opacity : {
41
88
value : 1.0 ,
42
89
type : 'constant' ,
43
90
} ,
44
91
45
- translateY : {
46
- from : 0 ,
47
- to : - Math . round ( Dimensions . get ( 'window' ) . height * 0.3 ) ,
92
+ transformTranslate : {
93
+ from : { x : Dimensions . get ( 'window' ) . width , y : 0 , z : 0 } ,
94
+ to : { x : 0 , y : 0 , z : 0 } ,
48
95
min : 0 ,
49
96
max : 1 ,
50
97
type : 'linear' ,
51
98
extrapolate : true ,
52
99
round : PixelRatio . get ( ) ,
53
100
} ,
54
- } ;
55
101
56
- FlatFloatFromBottom . animationInterpolators . out = buildStyleInterpolator ( FlatFadeToTheUp ) ;
57
- FlatFloatFromRight . animationInterpolators . out = buildStyleInterpolator ( FlatFadeToTheLeft ) ;
102
+ translateX : {
103
+ from : Dimensions . get ( 'window' ) . width ,
104
+ to : 0 ,
105
+ min : 0 ,
106
+ max : 1 ,
107
+ type : 'linear' ,
108
+ extrapolate : true ,
109
+ round : PixelRatio . get ( ) ,
110
+ } ,
58
111
59
- var None = {
60
- gestures : {
112
+ scaleX : {
113
+ value : 1 ,
114
+ type : 'constant' ,
115
+ } ,
116
+ scaleY : {
117
+ value : 1 ,
118
+ type : 'constant' ,
61
119
} ,
120
+ } ;
62
121
63
- // Rebound spring parameters when transitioning FROM this scene
64
- springFriction : 0 ,
65
- springTension : 2000 ,
66
122
67
- // Velocity to start at when transitioning without gesture
68
- defaultTransitionVelocity : 1.5 ,
69
123
70
- // Animation interpolators for horizontal transitioning:
71
- animationInterpolators : {
72
- into : buildStyleInterpolator ( FlatFadeToTheUp ) ,
73
- out : buildStyleInterpolator ( FlatFadeToTheUp ) ,
124
+ const Animations = {
125
+ FlatFloatFromRight : {
126
+ ...Navigator . SceneConfigs . FloatFromRight ,
127
+ // Animation interpolators for horizontal transitioning:
128
+ animationInterpolators : {
129
+ into : buildStyleInterpolator ( FromTheRight ) ,
130
+ out : buildStyleInterpolator ( FadeToTheLeft ) ,
131
+ } ,
132
+ // We will want to customize this soon
74
133
} ,
75
- } ;
76
134
77
- module . exports = { FlatFloatFromRight, FlatFloatFromBottom, None} ;
135
+
136
+ None : {
137
+ ...Navigator . SceneConfigs . FloatFromRight ,
138
+ gestures : null ,
139
+ defaultTransitionVelocity : 100 ,
140
+ animationInterpolators : {
141
+ into : buildStyleInterpolator ( NoTransition ) ,
142
+ out : buildStyleInterpolator ( NoTransition ) ,
143
+ }
144
+ }
145
+ }
146
+
147
+ export default Animations ;
0 commit comments