Learn about, at a high-level, a common approach to implement shared element transition. Learn about the available options to add shared element transition to an app
- [Instructor] We should always try our best to make…the app intuitive.…When moving between screens instead of…instantaneously switching to the new screen…it's important to explain it's relationship…with the existing screen through animations.…For example, when opening the detail screen of a product…from the gallery we can make the product image…fly out from it's socket in the gallery…and transform to the image in the detail screen.…This transition indicates that we're showing…more information of one of the…many products in the gallery.…
This animation is commonly referred to…as shared element transition.…I'll first show you a common approach…to implement it from scratch and then discuss…how to add the transition to our app.…As its name indicates, it appears…that there is a single image being shared…and moved from one screen to another.…In fact, nothing is shared, we still have…two different images on the gallery and detail screens.…Before the transition starts we obtain…the bounding box of the image on the gallery.…
- Using material design principles
- Working with units and measurements
- Using elevation and drop shadows
- Leveraging grids and keylines
- Setting up React Native for Android
- Building floating action buttons
- Creating an immersive experience
- Adding motion and transitions
- Animating icons
- Using component libraries
Skill Level Intermediate
Android App Development: Data Persistence Librarieswith Annyce Davis4h 52m Intermediate
React Native Ecosystem and Workflowwith Emmanuel Henri1h 3m Intermediate
1. Material Design Overview
2. Tools and Environment Setup
3. Build the Materials with React Native
4. Material Motion with React Native
5. Component Libraries
Library selection strategy3m 10s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.