Learn about how to create the animation where a Fab transforms to a dialog
- [Instructor] In apps with material design,…a unique experience is that a fab will typically transform…from a circle to a larger rectangle…where the counting of the next scene is revealed.…This is a nice transition effect…that helps users understand the relationship between scenes.…In this video, we're going to learn…how to implement it with the animated API…in ReactNative.…Let's study the animation in slow motion.…Upon clicking, the fab moves towards the screen center…and grows bigger and bigger.…
When it gets there, it stops moving,…but its size keeps growing.…Notice that when the circle is bigger than the rectangle…that it is transformed into,…it is clipped by the edges of the rectangle.…Finally, the fab fades out…and the dialog fades in.…There are a few techniques required…to implement this animation…and we give you an overview.…We can use an animated value…to drive the progress of the entire animation,…which runs from zero to one…as we have observed in the slow motion.…
The animation can be divided into three stages.…
- 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.