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

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?
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.
11. COMO QUE TESTA?
12. MANEIRA FÁCIL
14. MANEIRA FÁCIL PORÉM + LEGAL
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:
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
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" />
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
33. Obrigado @wmitrut Wellington Mitrut