Shared element transition with React Native

Transcript

1. Shared Element Transition with React Native @narendra_shetty
2. Narendra Shetty Front-End Engineer @ Booking.com Amsterdam
3. What is Shared Element Transition?
4. What is Transition?
5. What is Transition? Transition is an animation which guides users to focus on what you want
6. What is Transition? Transition is an animation which guides users to focus on what you want Keep Users from getting lost Transitions between different screens involves enter and exit transitions
7. What is Shared Element Transition?
8. What is Shared Element Transition? As the name suggest, there is a single element being shared and moved from one screen to another during transition
9. What is Shared Element Transition? As the name suggest, there is a single element being shared and moved from one screen to another during transition This emphasizes continuity between transitions and breaks screen boundaries as the user navigates the app. This forces the human eye to focus on the content and its representation
10. Few good examples
11. Few good examples
12. Does React Native support shared elements?
13. Does React Native support shared elements? NO! :(
14. App
15. App Grid Detail Text Image Text Image
16. App Grid Detail Text Image Text Image
17. App Grid Detail Text Image Text Image
18. Goal
19. Goal
20. Goal Pure JavaScript Reasonably smooth animation
21. Dissecting the animation
22. Dissecting the animation
23. Dissecting the animation
24. Do you really believe that there is a single image being shared between the grid and detail screens?
25. Do you really believe that there is a single image being shared between the grid and detail screens? NO! :)
26. Dissecting the animation
27. Things to know
28. Things to know import { Animated } from 'react-native';
29. Things to know import { Animated } from 'react-native'; let AnimatedValue = new Animated.Value(0);
30. Things to know import { Animated } from 'react-native'; Animated.timing(AnimatedValue, { toValue: 1, duration: 3000 }).start(); let AnimatedValue = new Animated.Value(0);
31. Things to know import { Animated } from 'react-native'; let AnimatedValue = new Animated.Value(0); Animated.timing(AnimatedValue, { toValue: 1, duration: 3000 }).start(); AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [1, 0] });
32. Implementation
33. Grid Screen Detail Screen
34. <Image click> <back>
35. Without Transition
36. <Image click> <back> Exit Grid Entry Detail
37. Adding Exit Transition
38. Adding Exit Transition { opacity: 1 }
39. Adding Exit Transition { opacity: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }) }
40. Adding Exit Transition Animated.timing(AnimatedValue, { toValue: 1, duration: 3000, }).start(); Trigger { opacity: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [1, 0] }) }
41. With exit transition on Grid screen
42. Adding Entry Transition
43. { transform: [{ translateY: 0 }] } Adding Entry Transition
44. { transform: [{ translateY: AnimatedValue.interpolate({ inputRange: [0, 0.5, 1], outputRange: [100, 100, 0] }) }] } Adding Entry Transition
45. Adding Entry Transition { transform: [{ translateY: AnimatedValue.interpolate({ inputRange: [0, 0.5, 1], outputRange: [100, 100, 0] }) }] } Animated.timing(AnimatedValue, { toValue: 1, duration: 3000, }).start(); Trigger
46. With exit and entry transition on grid and detail screen
47. Adding Transition Layer
48. Grid Screen Detail Screen
49. Grid Screen Detail Screen Transition Layer x: 0 y: 600 width: 200 height: 112 x: 0 y: 0 width: 360 height: 300
50. Grid Screen Detail Screen Transition Layer x: 0 y: 600 width: 200 height: 112 x: 0 y: 0 width: 360 height: 300
51. Grid Screen Detail Screen Transition Layer
52. Animation in Transition Layer
53. Animation in Transition Layer By interpolating on width, height, top and left
54. { position: 'absolute', width: source.width, height: source.height, left: source.pageX, top: source.pageY }
55. { position: 'absolute', width: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [source.width, destination.width] }) }
56. { position: 'absolute', width: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [source.width, destination.width] }), height: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [source.height, destination.height] }) }
57. { position: 'absolute', width: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [source.width, destination.width] }), height: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [source.height, destination.height] }), left: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [source.pageX, destination.pageX] }) }
58. { position: 'absolute', width: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [source.width, destination.width] }), height: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [source.height, destination.height] }), left: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [source.pageX, destination.pageX] }), top: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [source.pageY, destination.pageY] }) }
59. By interpolating on width, height, top and left
60. Performance Analysis
61. Performance Analysis Simulating a busy app
62. Performance Analysis Simulating a busy app setInterval(() => { for (let i = 0; i < 5e8; i++) {} }, 1000);
63. Simulating a busy app setInterval(() => { for (let i = 0; i < 5e8; i++) {} }, 1000);
64. JS thread Native thread Click Uses requestAnimationFrame Generates new input value Generates new output value Passed as props to the View View is updated using setNativeProps Passed to Native over the bridge Native View is updated
65. useNativeDriver
66. useNativeDriver Animated.timing(AnimatedValue, { toValue: 1, duration: 3000 }).start();
67. Animated.timing(AnimatedValue, { toValue: 1, duration: 3000, useNativeDriver: true }).start(); useNativeDriver
68. JS thread Native thread Uses Native Driver Generates new input value Generates new output value Serializes animated nodes Native View is updated Click Passed to Native over the bridge
69. useNativeDriver can only animate non-layout properties, things like transform and opacity will work but flexbox and position properties won't. Disadvantage
70. Animation in Transition Layer By interpolating on Transform and using useNativeDriver
71. By interpolating on Transform and using useNativeDriver translateX translateY scale
72. Grid Screen Detail Screen
73. const sourceAspectRatio = source.width / source.height; const destAspectRatio = dest.width / dest.height;
74. const sourceAspectRatio = source.width / source.height; const destAspectRatio = dest.width / dest.height; if (sourceAspectRatio - destAspectRatio > 0) { // Landscape image } else { // Portrait image }
75. if (sourceAspectRatio - destAspectRatio > 0) { // Landscape image const newWidth = sourceAspectRatio * dest.height; } else { // Portrait image const newHeight = dest.width / sourceAspectRatio; } const sourceAspectRatio = source.width / source.height; const destAspectRatio = dest.width / dest.height;
77. const sourceAspectRatio = source.width / source.height; const destAspectRatio = dest.width / dest.height; if (sourceAspectRatio - destAspectRatio > 0) { // Landscape image } else { // Portrait image }
78. if (sourceAspectRatio - destAspectRatio > 0) { // Landscape image dest.posX -= (newWidth - dest.width) / 2; } else { // Portrait image dest.posY -= (newHeight - dest.height) / 2; } const sourceAspectRatio = source.width / source.height; const destAspectRatio = dest.width / dest.height;
81. const openingInitScale = source.width / newWidth;
85. const translateInitX = source.posX + source.width / 2; const translateInitY = source.posY + source.height / 2;
86. const translateInitX = source.posX + source.width / 2; const translateInitY = source.posY + source.height / 2; const translateDestX = dest.posX + dest.width / 2; const translateDestY = dest.posY + dest.height / 2;
87. const translateInitX = source.posX + source.width / 2; const translateInitY = source.posY + source.height / 2; const translateDestX = dest.posX + dest.width / 2; const translateDestY = dest.posY + dest.height / 2; openingInitTranslateX = translateInitX - translateDestX; openingInitTranslateY = translateInitY - translateDestY;
88. <Image click> <back>
89. <Image click> <back> Animated.timing(AnimatedValue, { toValue: 1, duration: 3000, useNativeDriver: true }).start();
90. { position: 'absolute', width: destination.width, height: destination.height, left: destination.posX, top: destination.posY }
91. { position: 'absolute', width: destination.width, height: destination.height, left: destination.posX, top: destination.posY, transform: [ { translateX: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [openingInitTranslateX, 0] }) }, { translateY: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [openingInitTranslateY, 0] }) }, { scale: AnimatedValue.interpolate({ inputRange: [0, 1], outputRange: [openingInitScale, 1] }) } ] }
92. By interpolating on transform and using useNativeDriver
93. Performance Analysis Simulating a busy app
94. Performance Analysis Simulating a busy app setInterval(() => { for (let i = 0; i < 5e8; i++) {} }, 1000);
95. Simulating a busy app setInterval(() => { for (let i = 0; i < 5e8; i++) {} }, 1000);
97. Hiding the source and destination image during transition
98. Hiding the source and destination image during transition { opacity: AnimatedValue.interpolate({ inputRange: [0.005, 0.01], outputRange: [1, 0] }) }
99. Hiding the source and destination image during transition { opacity: AnimatedValue.interpolate({ inputRange: [0, 0.99, 0.995], outputRange: [0, 0, 1] }) }
100. After hiding source and destination image during transition
101. Handling back button
102. <Image click> <back> Animated.timing(AnimatedValue, { toValue: 1, duration: 3000, useNativeDriver: true }).start(); Animated.timing(AnimatedValue, { toValue: 0, duration: 3000, useNativeDriver: true }).start();
103. Handling Back button
104. @narendrashetty
105. @narendrashetty
106. https://expo.io/@narendrashetty/ photo-gallery
107. Narendra Shetty @narendra_shetty https://expo.io/@narendrashetty/photo-gallery