O Android Studio agora inclui um editor de design visual para o tipo de layout MotionLayout, facilitando a criação e a visualização de animações.
O Motion Editor oferece uma interface simples para processar elementos da biblioteca MotionLayout, que serve como base para a animação em apps para Android. Sem o Android Studio, a criação e alteração desses elementos exige edição manual das restrições nos arquivos de recurso XML. O Motion Editor pode gerar esse XML para você, oferecendo compatibilidade com estados de início e fim, frames-chave, transições e linhas do tempo.
Para começar a usar o Motion Editor:
- Crie um ConstraintLayout.
- Clique com o botão direito do mouse na visualização no Layout Editor.
- Clique em Convert to MotionLayout, conforme mostrado abaixo.
Depois que o Android Studio converte o ConstraintLayout para MotionLayout, um arquivo
Motion Scene (um arquivo .xml
com _scene
anexado ao nome do arquivo de layout)
também é adicionado ao diretório que contém o XML.
O MotionLayout
se torna seu layout raiz e aparece na IU do
Motion Editor. O layout já inclui um ConstraintSet
inicial, um ConstraintSet
final e uma transição do início ao fim.
Você pode usar o gráfico de visão geral para selecionar ConstraintSet
ou
Transition
, bem como componentes do painel de seleção.
Em seguida, você pode editar as restrições e os atributos do ConstraintSet
inicial ou final
da mesma forma que editaria ConstraintLayout
.
Se você quiser criar mais elementos para sua imagem, poderá usar os ícones de criação
para adicionar rapidamente gestos ConstraintSet
, Transition
ou
OnClick
/OnSwipe
.
Para adicionar um frame-chave, clique na seta Transition:
Em seguida, no painel de linha do tempo Transition, clique no canto superior direito e selecione KeyPosition:
Essa ação abre uma caixa de diálogo em que você pode definir atributos para o frame-chave.
Você também pode adicionar gerenciadores OnClick
e OnSwipe
à transição no
painel de atributos.
Essa ação abre uma caixa de diálogo em que você pode definir atributos do clique, como componentes de destino e direção de arraste.
O editor de movimento é compatível com a visualização de animações na superfície de design. Quando uma
animação for selecionada, clique em Play
acima da linha do tempo para visualizar a animação.