Browse Source

refactored custom transitions api

yogevbd 7 years ago
parent
commit
312c1a220b

+ 4
- 4
lib/ios/RNNTransitionStateHolder.m View File

13
 	self.startAlpha = [RNNUtils getDoubleOrKey:transition withKey:@"startAlpha" withDefault:1];
13
 	self.startAlpha = [RNNUtils getDoubleOrKey:transition withKey:@"startAlpha" withDefault:1];
14
 	self.endAlpha = [RNNUtils getDoubleOrKey:transition withKey:@"endAlpha" withDefault:1];
14
 	self.endAlpha = [RNNUtils getDoubleOrKey:transition withKey:@"endAlpha" withDefault:1];
15
 	self.interactivePop = [RNNUtils getBoolOrKey:transition withKey:@"interactivePop" withDefault:NO];
15
 	self.interactivePop = [RNNUtils getBoolOrKey:transition withKey:@"interactivePop" withDefault:NO];
16
-	self.startX = [RNNUtils getDoubleOrKey:transition withKey:@"startX" withDefault:0];
17
-	self.startY = [RNNUtils getDoubleOrKey:transition withKey:@"startY" withDefault:0];
18
-	self.endX = [RNNUtils getDoubleOrKey:transition withKey:@"endX" withDefault:0];
19
-	self.endY = [RNNUtils getDoubleOrKey:transition withKey:@"endY" withDefault:0];
16
+	self.startX = [RNNUtils getDoubleOrKey:transition[@"x"] withKey:@"from" withDefault:0];
17
+	self.startY = [RNNUtils getDoubleOrKey:transition[@"y"] withKey:@"from" withDefault:0];
18
+	self.endX = [RNNUtils getDoubleOrKey:transition[@"x"] withKey:@"to" withDefault:0];
19
+	self.endY = [RNNUtils getDoubleOrKey:transition[@"y"] withKey:@"to" withDefault:0];
20
 	self.fromId = [transition objectForKey:@"fromId"];
20
 	self.fromId = [transition objectForKey:@"fromId"];
21
 	self.toId = [transition objectForKey:@"toId"];
21
 	self.toId = [transition objectForKey:@"toId"];
22
 	self.fromElement = nil;
22
 	self.fromElement = nil;

+ 4
- 3
playground/src/screens/CustomTransitionDestination.js View File

30
   pop() {
30
   pop() {
31
     Navigation.pop(this.props.componentId, {
31
     Navigation.pop(this.props.componentId, {
32
       customTransition: {
32
       customTransition: {
33
-        animations: [{ type: 'sharedElement', fromId: 'title2', toId: 'title1', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
33
+        animations: [
34
+          { type: 'sharedElement', fromId: 'title2', toId: 'title1', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
34
         { type: 'sharedElement', toId: 'image1', fromId: 'customDestinationImage', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
35
         { type: 'sharedElement', toId: 'image1', fromId: 'customDestinationImage', startDelay: 0, springVelocity: 0.2, duration: 0.5 },
35
         { type: 'sharedElement', toId: 'image2', fromId: 'customDestinationImage2', startDelay: 0, duration: 0.8 },
36
         { type: 'sharedElement', toId: 'image2', fromId: 'customDestinationImage2', startDelay: 0, duration: 0.8 },
36
-        { fromId: 'image4', startY: 50, startX: 50, startAlpha: 0, startDelay: 0, duration: 0.8, springVelocity: 0.5 },
37
-        { fromId: 'customDestinationParagraph', endY: 50, endX: 50, endAlpha: 0, startAlpha: 1, startDelay: 0, duration: 0.8 }
37
+        { fromId: 'image4', x: { from: 50}, y: { from: 50}, startAlpha: 0, startDelay: 0, duration: 0.8, springVelocity: 0.5 },
38
+        { fromId: 'customDestinationParagraph', y: { to: 50}, x: { to: 50}, endAlpha: 0, startAlpha: 1, startDelay: 0, duration: 0.8 }
38
         ],
39
         ],
39
         duration: 0.8
40
         duration: 0.8
40
       }
41
       }

+ 1
- 1
playground/src/screens/CustomTransitionOrigin.js View File

61
               { type: 'sharedElement', fromId: 'image1', toId: 'customDestinationImage', startDelay: 0, springVelocity: 0.9,
61
               { type: 'sharedElement', fromId: 'image1', toId: 'customDestinationImage', startDelay: 0, springVelocity: 0.9,
62
               springDamping: 0.9, duration: 0.8, interactivePop: true },
62
               springDamping: 0.9, duration: 0.8, interactivePop: true },
63
               { type: 'sharedElement', fromId: 'image2', toId: 'customDestinationImage2', startDelay: 0, duration: 0.8 },
63
               { type: 'sharedElement', fromId: 'image2', toId: 'customDestinationImage2', startDelay: 0, duration: 0.8 },
64
-              { fromId: 'image4', endY: 50, endX: 50, endAlpha: 0, startDelay: 0, duration: 0.8, springVelocity: 0.5 },
64
+              { fromId: 'image4', x: { to: 50 }, y: { to: 50 }, endAlpha: 0, startDelay: 0, duration: 0.8, springVelocity: 0.5 },
65
               { fromId: 'customDestinationParagraph', startY: 50, startAlpha: 0, endAlpha: 1, startDelay: 0, duration: 0.8 }
65
               { fromId: 'customDestinationParagraph', startY: 50, startAlpha: 0, endAlpha: 1, startDelay: 0, duration: 0.8 }
66
             ],
66
             ],
67
             duration: 0.8
67
             duration: 0.8