00:15SHARON HARRIS: Hi, my
name is Sharon Harris,
00:17and I'm a motion designer in the
Material Design Team at Google.
00:21As you may already
know, material design
00:23was founded on the
metaphor of smart paper--
00:26a collection of surfaces
that can adapt to guide users
00:29through an experience.
00:30Part of that metaphor is shown
through an elevation system
00:33that accurately renders
light and shadows.
00:36But coordinating those
surfaces with motion
00:39in a smart and elegant way
has been a tougher challenge
00:43Our latest material update
is the motion system,
00:46including a set of guidelines,
specs, and developer
00:48documentation for making
the most important motion
00:54Transitions are a
coordinated sequence
00:55of motions that help users
understand and navigate
00:59Great transitions are
fundamental to the usability
01:03Our new system includes
four transition patterns
01:05animating between components
and full screen views.
01:09Container transform, shared
axis, fade through, and fade.
01:13The system also provides
customization options
01:15to stylize your transitions.
01:17You can adjust the duration,
easing, and motion path
01:20to express the
style of your app.
01:22Now, we'll talk it through
the four transition
01:24patterns in more detail.
01:27The first pattern is
container transform.
01:30This pattern creates
a visible connection
01:32between two UI elements.
01:34For example, when a card
transforms into a details page,
01:37the user's focus is
directed to identify
01:39that the Details page is an
expanded version of the card.
01:43Now, let's look at how to
implement the container
01:45transform pattern on Android.
01:47First, identify the UI
element of your container
01:50in your starting layout and
give it a transition name.
01:54In your ending layout,
identify the UI element
01:57into which your starting
UI element will transform.
02:00Give this element the
same transition name.
02:02In your ending fragment, set
the sharedElementEnterTransition
02:06to a new
MaterialContainerTransform
02:08inside the onCreate method.
02:11Finally, when the user taps
on the starting element,
02:14begin the container transform
with a fragment transaction
02:17containing a mapping
of the tapped element
02:20to the transition name.
02:22For information on how to
apply a container transform
02:24between activities or views,
see the developer documentation.
02:29Our second pattern is
called shared axis.
02:32This pattern uses a
shared transformation
02:35on the xy or z-axis to reinforce
the spatial or navigational
02:40relationship between elements.
02:42For example, when tapping
next in a setup flow,
02:45both the outgoing
and incoming elements
02:47transform horizontally
in unison.
02:50By moving in the same
direction, elements
02:53are perceived to be
related to each other.
02:55Now, let's look at how to
implement the shared axis
03:00To add a shared axis
transition in the x-axis,
03:03set up the entering and exiting
transitions of your outgoing
03:06and incoming fragments.
03:08In your outgoing fragment,
create a new material
03:10shared axis
transition and set it
03:13as your fragment's
exit transition
03:15in the onCreate method.
03:17Be sure to specify the forward
property of this transition.
03:21This is what controls
the direction in which
03:23the fragment will animate.
03:26In your incoming fragment,
create a new MaterialSharedAxis
03:29and set it as your
fragments enter transition
03:31in the onCreate method,
making sure the forward
03:35here matches the exit transition
of your outgoing fragment.
03:39When you're ready to navigate
to your new fragment,
03:41add or replace the
outgoing fragment
03:43with a new instance of
your incoming fragment.
03:46Your outgoing fragment
will now slide and fade out
03:49to the left, while your incoming
fragment will slide and fade
03:53For details on how setting
up a transition in the return
03:56direction or for the
other axis and scenarios,
03:59see the documentation
on material.io.
04:03Our third pattern
is the fade through.
04:05You can use fade through for
transitions between UI elements
04:08that do not have a strong
relationship for each other.
04:11For example,
transitions triggered
04:13by tapping a bottom
navigation bar,
04:15use this fade-through pattern.
04:17Destinations in the
bottom navigation
04:19typically are not strongly
related to each other,
04:22so this fade-through pattern
doesn't mislead users
04:24into thinking that they
can swipe horizontally
04:26between destinations.
04:28Now, let's look at
how to implement
04:30the fade-through
pattern on Android.
04:32Setting this up is
nearly identical
04:34to implement in the
shared access pattern.
04:37Set your outgoing
fragment's exit transition
04:39to a new instance of
MaterialFadeThrough.
04:42Likewise, set your incoming
fragment's enter transition
04:45to a new instance of
MaterialFadeThrough.
04:48Just completing these steps
will create a working animation
04:50between your two fragments.
04:52You might notice
each individual UI
04:54component in your layouts
scaling out and back in.
04:57To have the fade through or
other transitions, including
05:00shared axis, run only on
a specific UI elements,
05:04set the transition group
property to true on the view
05:09To customize the look and feel
of the transition further,
05:12see the developer documentation.
05:14Our fourth and final
pattern is the fade.
05:17You can use a fade for
UI elements that enter
05:22This pattern applies to
components like dialogues,
05:24menus, snack bars, and FABs.
05:27Elements that enter use a quick
fade in and subtly scale up.
05:31When elements exit,
they simply fade out.
05:34Now, let's look at how to
implement the fade pattern
05:36to show and tie
to FAB on Android.
05:39In your activity or fragment,
construct a new MaterialFade.
05:42Then begin a
transition by calling
05:44TransitionManage
r.beginDelayedTransition,
05:47passing in the FAB's parent in
our newly constructed material
05:52Finally, alter the
visibility of the FAB
05:55to have the transition
system animate
05:56the change with the supplied
material fade transition.
05:59Using the same code, you can
change the FAB's visibility
06:02back to visible, and the
FAB will fade back in.
06:06These patterns are designed
to be simple and functional
06:09by default. But the
good news is you
06:11can customize any transition.
06:13For example, using
an arc motion path
06:15creates a more emphasized
and dramatic style.
06:18Android's container transform
can easily accept a path
06:21to create such an effect.
06:23For a dropped in implementation,
set your container's path
06:26motion to a new instance
of material arc motion--
06:29a class which provides
a standard material
06:34Some of the feedback we
hear across our design
06:35and engineering
communities is that part
06:38of what makes motion
hard to implement
06:39is that there aren't many tools
to help designers collaborate
06:44Spec in motion is
tricky, which is a shame
06:47since it's necessary for
bridging the gap between design
06:49intent and implementation.
06:51This is another challenge we're
tackling with material design.
06:55Our updated motion guidelines
present motion specs
06:57in a new interactive
timeline format.
07:00They include all the
basic information
07:01needed to understand
and build an animation.
07:05These specs were authored using
a web-based tool called Direct,
07:08which was created by Google
Motion Designer John Schlemmer
07:11and used internally by many
other Google designers.
07:15We're excited to now share
these motion specs publicly
07:17in our guidelines
to help explain all
07:19the details of a motion design.
07:22The code for Direct is
open source at this link,
07:24so you can create and host
your own direct motion specs.
07:27Make sure to share
creations with us.
07:30Would you find a tool like
Direct useful in your work?
07:32Please let us know
in the comments.
07:35As you may have noticed,
this motion content
07:37is tagged as beta on our site.
07:39That's because we wanted to
release this early to make
07:41sure we're taking the right
technical and design approach
07:44before adding more features.
07:46There are so many directions to
take this work in the future,
07:49and we'd love to
know what you think.
07:51Be sure to share your
feedback in the comments
07:53below or by reaching out to
@materialdesign on Twitter.
07:56We're hopeful this is just a
start in our mission to make
07:58motion easy to implement.
08:00Thanks for watching.
