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

Lottie + Kotlin = <3

Lottie + Kotlin = <3

LIGHTNING TALK: Utilizando Lottie com Kotlin, é possível criar incríveis experiências no Android

Apresentado na Kotlin Night Cascavel #01 - 27/04/2018

278d0b5b8f680ac2a39bb3d8a6e21be3?s=128

Wellington Mitrut

April 27, 2018
Tweet

More Decks by Wellington Mitrut

Other Decks in Programming

Transcript

  1. Lottie + Kotlin = Criando experiências incríveis com animações @wmitrut

    Wellington Mitrut
  2. Wellington Mitrut UI Engineer Co-Organizador @ GDG Cascavel / Kotlin

    Cascavel Blogueiro Musa Fitness Open Culture Cerveja Gatos
  3. Animações para Android Nosso foco hoje Implementação com Lottie

  4. Animações são incríveis!

  5. - Informam - Provém Contexto - São Divertidas

  6. ? Como implementar animações no Android de forma simples e

    rápida?
  7. None
  8. None
  9. O Lottie é uma biblioteca universal que processa animações do

    After Effects em tempo real e permite que animações sejam tão facilmente usadas e manipuladas quanto arquivos estáticos.
  10. None
  11. COMO QUE TESTA?

  12. MANEIRA FÁCIL

  13. None
  14. MANEIRA FÁCIL PORÉM + LEGAL

  15. None
  16. Versão mais atualizada = 3.1.2 = 26/04/2018

  17. dependencies { ... compile 'com.airbnb.android:lottie:2.5.1' compile 'com.android.support:design:27.0.2' ... }

  18. E para a animação:

  19. None
  20. <com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="match_parent" android:layout_height="240dp" android:layout_alignParentStart="true" android:layout_alignParentTop="true" android:layout_marginEnd="8dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:lottie_autoPlay="true"

    app:lottie_fileName="rey.json app:lottie_loop="true" tools:layout_editor_absoluteY="16dp" tools:ignore="MissingConstraints" /> - Criar uma pasta assets - Chamar a animação na tela
  21. None
  22. <color name="colorPrimary">#00D1C1</color> <color name="colorPrimaryDark">#007A87</color> <color name="colorAccent">#FF4081</color> <color name="colorStop">#FF5252</color> <color name="colorWhite">#ffffff</color>

    - Criando o estilo do app
  23. - Adicionar Ícones - vector drawables!

  24. <android.support.design.widget.FloatingActionButton android:id="@+id/button_pause" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="10dp" android:layout_marginBottom="8dp" android:layout_marginEnd="8dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp"

    app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.28" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/animation_view" app:layout_constraintVertical_bias="0.502" app:srcCompat="@drawable/pause" /> - Criando nossos botões <android.support.design.widget.FloatingActionButton android:id="@+id/button_stop" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_margin="10dp" android:layout_marginBottom="8dp" android:layout_marginEnd="8dp" android:layout_marginStart="8dp" android:layout_marginTop="8dp" app:backgroundTint="@color/colorWhite" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.698" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/animation_view" app:layout_constraintVertical_bias="0.502" app:srcCompat="@drawable/stop" />
  25. None
  26. val animationView = findViewById<View>(R.id.animation_view) as LottieAnimationView val pauseButton = findViewById<View>(R.id.button_pause)

    val stopButton = findViewById<View>(R.id.button_stop) - Instanciando nossos elementos
  27. pauseButton.setOnClickListener{ if (animationView.isAnimating) { animationView.pauseAnimation() button_pause.setImageResource(R.drawable.play) } } - Pausando

    a animação
  28. pauseButton.setOnClickListener{ if (animationView.isAnimating) { animationView.pauseAnimation() button_pause.setImageResource(R.drawable.play) } else { animationView.resumeAnimation()

    button_pause.setImageResource(R.drawable.pause) } } - Continuando animação
  29. stopButton.setOnClickListener{ animationView.cancelAnimation() animationView.progress = 0F button_pause.setImageResource(R.drawable.play) } - Parando a

    animação de vez
  30. Dicas

  31. None
  32. None
  33. Obrigado @wmitrut Wellington Mitrut