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

Walmyr Carvalho

June 09, 2020
Tweet

More Decks by Walmyr Carvalho

Other Decks in Technology

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

    View full-size slide

  2. Olá, pessoal!
    Meu nome é Walmyr Carvalho,
    muito prazer! :)

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  7. MotionLayout:
    Um jeito novo de animar no Android! ✨

    View full-size slide

  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! ❤

    View full-size slide

  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

    View full-size slide

  10. Como eu faço para começar para utilizar o
    MotionLayout nos nossos projetos?!

    View full-size slide

  11. build.gradle
    // Para utilizar o MotionLayout é necessário
    // fazer uso da biblioteca do ConstraintLayout
    dependencies {
    implementation 'androidx.constraintlayout:constraintlayout:2.0.0-beta6'
    }

    View full-size slide

  12. Certo! Agora, precisamos criar um arquivo de layout
    do tipo MotionLayout no nosso projeto:

    View full-size slide

  13. na pasta /res/layout:
    New > Layout Resource File

    View full-size slide

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

    View full-size slide

  15. Créditos: Android Developers

    View full-size slide

  16. Por padrão, o layout já nos trás um ConstraintSet inicial
    (start), um final (end) e uma Transition por padrão:

    View full-size slide

  17. Créditos: Android Developers

    View full-size slide

  18. É possível customizar e editar atributos do seu
    ConstraintSet pelo MotionEditor, diretamente:

    View full-size slide

  19. Créditos: Android Developers

    View full-size slide

  20. É possível customizar ou adicionar novas Transitions,
    além de suporte a triggers por gestos:

    View full-size slide

  21. Créditos: Android Developers

    View full-size slide

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

    View full-size slide

  23. Créditos: Android Developers

    View full-size slide

  24. Créditos: Android Developers

    View full-size slide

  25. Após essa customização, você consegue prever a sua
    animação pelo Motion Editor também:

    View full-size slide

  26. Créditos: Android Developers

    View full-size slide

  27. Daora, né? ❤

    View full-size slide

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

    View full-size slide

  29. Para a nossa demo, vamos precisar utilizar a versão 4.0
    (estável) do Android Studio, já disponível para download!

    View full-size slide

  30. Android Studio - Android Developers
    Página oficial do Android Studio
    developer.android.com/studio
    Créditos: Android Developers

    View full-size slide

  31. Se eu quiser aprender mais sobre,
    onde eu posso encontrar material?

    View full-size slide

  32. MotionLayout - Android Developers
    Site oficial com guias
    developer.android.com/training/constraint-
    layout/motionlayout/
    Créditos: Android Developers

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  35. Android Dev BR - Comunidade
    Maior comunidade lusófona de Android no
    Slack, com mais de 6.900 pessoas! ❤✨
    androiddevbr.org

    View full-size slide

  36. Perguntas?
    Ficou alguma dúvida?

    View full-size slide

  37. Muito obrigado!
    Se tiver qualquer dúvida ou sugestão,
    pode falar comigo. ❤
    @walmyrcarvalho
    /walmyrcarvalho
    [email protected]

    View full-size slide