Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Animações no Android com Motion Editor!

Animações no Android com Motion Editor!

This talk was held during an online edition of the Android Curitiba meetup of GDG Salvador, that happened on June 9th.

The talk was about what's new Motion Editor, available on Android Studio 4.0 and recently launched. The talk discussed the concept behind MotionLayout, how you can create one and edit it using Motion Editor. Them, we moved through the basic features of it, such as MotionLayout visualization, ConstraintSet configurations, setup of Transitions, KeyFrames and KeyFrameSets.

Lastly, we've created our own MotionLayout, edited it using Motion Editor and got some other complex examples of elaborated usages of Motion Editor for animations using a Google sample.

The content is in portuguese (pt-BR).

More info: https://www.meetup.com/pt-BR/Android-Curitiba/events/271043133/
Video: https://www.youtube.com/watch?v=mTqFtdDAOD4

B567f69eed037ed20536fc825305a38d?s=128

Walmyr Carvalho

June 09, 2020
Tweet

Transcript

  1. Animações no Android com Motion Editor! Conhecendo essa nova ferramenta

    do Android Studio 4.0! ✨ Walmyr Carvalho Mobile Technical Leader @ idwall, Founder @ Kusudama Google Developer Expert, Android @walmyrcarvalho
  2. Olá, pessoal! Meu nome é Walmyr Carvalho, muito prazer! :)

  3. Trabalho com desenvolvimento Android há 10 anos e sou um

    Google Developer Experts de Android no Brasil há 4 anos. Além disso, estou muito próximo da comunidade nacional de Android, sendo organizador do Kotlin Meetup São Paulo e do Android Dev BR, a maior comunidade lusófona de Android do mundo, com mais de 6.900 pessoas! Também apoio o empreendedorismo nacional, sendo mentor de Android e mobile no Google for Startups Accelerator e na ACE Startups.
  4. Já ajudei a evoluir produtos mobile para empresas como Loggi,

    99, Cielo, CI&T, Hotel Urbano e Globo Esporte, durante mais de 9 anos de carreira como especialista em Android. Créditos: Google Play
  5. Nesse ano fundei a Kusudama, um estúdio de desenvolvimento e

    design de produtos digitais para Android e iOS, que tem como seu objetivo criar experiências que tratem seus usuários com respeito dentro do universo mobile.
  6. Recentemente me juntei ao grande time da idwall como Mobile

    Technical Leader, com o objetivo de criar a próxima plataforma de identidade digital brasileira no mobile, além de soluções para empresas que buscam aumentar a confiança na identificação dos seus usuários.
  7. MotionLayout: Um jeito novo de animar no Android! ✨

  8. O MotionLayout é uma subclasse do ConstraintLayout lançado em 2018

    e que ajuda na construção de animações de maneira mais fácil e organizada! ❤
  9. MotionLayout - Android Developers Documentação oficial do MotionLayout, com uma

    explicação detalhada do seu funcionamento e muitos exemplos de uso! tiny.cc/doc-motionlayout Créditos: Android Developers
  10. Como eu faço para começar para utilizar o MotionLayout nos

    nossos projetos?!
  11. build.gradle // Para utilizar o MotionLayout é necessário // fazer

    uso da biblioteca do ConstraintLayout dependencies { implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta6' }
  12. Certo! Agora, precisamos criar um arquivo de layout do tipo

    MotionLayout no nosso projeto:
  13. na pasta /res/layout: New > Layout Resource File

  14. Feito! Após o arquivo de layout criado, você deve encontrar

    essa interface:
  15. Créditos: Android Developers

  16. Por padrão, o layout já nos trás um ConstraintSet inicial

    (start), um final (end) e uma Transition por padrão:
  17. Créditos: Android Developers

  18. É possível customizar e editar atributos do seu ConstraintSet pelo

    MotionEditor, diretamente:
  19. Créditos: Android Developers

  20. É possível customizar ou adicionar novas Transitions, além de suporte

    a triggers por gestos:
  21. Créditos: Android Developers

  22. É possível customizar as transições e seus comportamento através de

    Keyframes:
  23. Créditos: Android Developers

  24. Créditos: Android Developers

  25. Após essa customização, você consegue prever a sua animação pelo

    Motion Editor também:
  26. Créditos: Android Developers

  27. Daora, né? ❤

  28. Bora ver como o Motion Editor funciona na prática? ✨

  29. Para a nossa demo, vamos precisar utilizar a versão 4.0

    (estável) do Android Studio, já disponível para download!
  30. Android Studio - Android Developers Página oficial do Android Studio

    developer.android.com/studio Créditos: Android Developers
  31. Se eu quiser aprender mais sobre, onde eu posso encontrar

    material?
  32. MotionLayout - Android Developers Site oficial com guias developer.android.com/training/constraint- layout/motionlayout/

    Créditos: Android Developers
  33. views-widgets-samples - GitHub Projeto open source criado pelo Google disponível

    no perfil do Android no GitHub, com vários exemplos de layouts feitos com MotionLayout! github.com/android/views-widgets-samples/ Créditos: Android Developers
  34. Rebecca Frank (GDE, Android) - Blog Artigo escrito pela Rebecca

    Franks, GDE de Android, mostrando mais detalhes sobre o Motion Editor! riggaroo.dev/getting-started-with-the- motion-editor-in-android-studio-4-0/ Créditos: Rebecca Franks
  35. Android Dev BR - Comunidade Maior comunidade lusófona de Android

    no Slack, com mais de 6.900 pessoas! ❤✨ androiddevbr.org
  36. Perguntas? Ficou alguma dúvida?

  37. Muito obrigado! Se tiver qualquer dúvida ou sugestão, pode falar

    comigo. ❤ @walmyrcarvalho /walmyrcarvalho walmyr@kusudama.com.br