Exemplos de Animação de Transição de Atividade do Kotlin Android

Para criar um aplicativo moderno, você pode querer usar animações de transição em sua atividade. O Android Framework fornece a capacidade de induzir transições animadas elegantes à medida que você abre ou sai de uma atividade. Neste artigo, queremos analisar como incluir tais transições.

Exemplo 1: Kotlin Android - Transições de atividades sem nenhuma biblioteca

Vejamos um exemplo de como criar transições animadas sem utilizar a biblioteca de terceiros.

Passo 1: Dependências

Não é necessária a dependência de terceiros.

Passo 2: Animações

O próximo passo é realmente escrever estas animações em XML e incluí-las em um diretório de recursos chamado anim. Se tal diretório não existir em seu aplicativo, então crie-o.

Depois de criar o diretório 'animal', adicionaremos os seguintes arquivos de animação neles:

**slide_down.xml***

Em seguida, adicionamos o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="50"
        android:fromYDelta="0%p"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toYDelta="100%p" />

</set>

**Slide_in_left.xml***

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

**slide_in_right.xml***

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

**Slide_out_left_left.xml***

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="-100%p"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

**slide_out_right.xml***

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="100%p"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

**slide_up.xml***

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="100"
        android:fromYDelta="100%"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toXDelta="0" />

</set>

Passo 3: Estilos

Na terceira etapa, precisamos realmente aplicar as animações às atividades. Entretanto, isto é feito declarativamente no nível do tema, em oposição ao nível da atividade

Portanto, no arquivo styles.xml crie um estilo como se segue:

    <style name="CustomActivityAnimation" parent="@android:style/Animation.Activity">
        <item name="android:activityOpenEnterAnimation">@anim/slide_in_right</item>
        <item name="android:activityOpenExitAnimation">@anim/slide_out_left</item>
        <item name="android:activityCloseEnterAnimation">@anim/slide_in_left</item>
        <item name="android:activityCloseExitAnimation">@anim/slide_out_right</item>
    </style>

Em seguida, aplicá-lo ao tema da seguinte forma:

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowAnimationStyle">@style/CustomActivityAnimation</item>
    </style>

Aqui estão os estilos completos.xml:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowAnimationStyle">@style/CustomActivityAnimation</item>
    </style>

    <style name="CustomActivityAnimation" parent="@android:style/Animation.Activity">
        <item name="android:activityOpenEnterAnimation">@anim/slide_in_right</item>
        <item name="android:activityOpenExitAnimation">@anim/slide_out_left</item>
        <item name="android:activityCloseEnterAnimation">@anim/slide_in_left</item>
        <item name="android:activityCloseExitAnimation">@anim/slide_out_right</item>
    </style>

</resources>

Passo 4: Atividades

Teremos três atividades:

1. ActivityA
2. ActivityB
3. AtividadeC

**ActivityA.kt***

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityA : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_a)
    }

    fun intentB(view: View?) {
        startActivity(Intent(this, ActivityB::class.java))
    }

    fun intentC(view: View?) {
        startActivity(Intent(this, ActivityC::class.java))
    }
}

**ActivityB***

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityB : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_b)
    }

    fun intentC(view: View?) {
        startActivity(Intent(this, ActivityC::class.java))
    }

    fun intentA(view: View?) {
        startActivity(Intent(this, ActivityA::class.java))
    }
}

**ActivityC***

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityC : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_c)
    }

    fun intentA(view: View?) {
        startActivity(Intent(this, ActivityA::class.java))
    }

    fun intentB(view: View?) {
        startActivity(Intent(this, ActivityB::class.java))
    }
}

Esse é todo o código de kotlin que escrevemos.

Passo 5: Layouts

Encontre os códigos de layout no download do código fonte.

Passo 6: Executar

Execute o projeto e você terá o seguinte:

Passo 7: Download

Faça o download do código fonte a partir de aqui.

Exemplos com Bibliotecas

Para tornar sua aplicação mais moderna, você pode incluir animações de transição entre as atividades. Há diferentes maneiras de fazer isso e nesta peça queremos examiná-las.

(a). Use a Biblioteca de Animação Intensiva

Esta biblioteca é tão fácil quanto possível. Você pode facilmente incluir diferentes tipos de animações em suas atividades.

Passo 1: Instalação

Comece por instalar a biblioteca. Ela é hospedada em jitpack:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

`

Em seguida, acrescente a declaração de implementação como uma dependência:

implementation 'com.github.hajiyevelnur92:intentanimation:1.0'

Passo 2: Código

Aqui está o código:

import static maes.tech.intentanim.CustomIntent.customType;
//MainActivity or any activity name
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //.....//

        //here is library
        customType(MainActivity.this,"here is animation name");
}
   //Here are the animations
*left-to-right
*right-to-left
*bottom-to-up
*up-to-bottom
*fadein-to-fadeout
*rotateout-to-rotatein

Links

Faça o download do código completo aqui.

(b). Transições com Bungee

Bungee é uma biblioteca leve de animações de transição de atividades frias para Android.

Esta solução suporta um SDK mínimo de 16 (Android Jellybean 4.1).

Bungee tem 15 animações diferentes de transição de atividades:

• split
• encolher
• cartão
• dentro e fora
• deslizar para a esquerda
• direita
• deslize para cima
• deslize para baixo
• slide à esquerda
• deslize para a direita
• zoom
• fade
• girar
• diagonal
• moinho de vento

Você pode baixar o aplicativo demo aqui para verificá-lo em ação.

Passo 1: Instale-o

Para instalá-lo, comece registrando o jitpack como um maven repositort url na pasta build.gradle de seu projeto:

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

Em seguida, na pasta build.gradle de seu aplicativo, declare a dependência como uma declaração de implementação:

dependencies {
            implementation 'com.github.Binary-Finery:Bungee:3.0'
    }

Passo 2: Escrever Código

Apenas um código de linha é necessário para usar o Bungee. Por exemplo, neste caso, uma animação com zoom é disparada:

startActivity(new Intent(context, TargetActivity.class));
Bungee.zoom(context);  //fire the zoom animation

Ou vamos dizer que você quer disparar a animação quando o botão voltar é pressionado:

@Override
public void onBackPressed(){
  super.onBackPressed();
  Bungee.slideLeft(context); //fire the slide left animation
}

Aqui estão todos os métodos disponíveis:

Bungee.split(context);
Bungee.shrink(content);
Bungee.card(context);
Bungee.inAndOut(context);
Bungee.swipeLeft(context);
Bungee.swiperRight(context);
Bungee.slideLeft(context);
Bungee.slideRight(context);
Bungee.slideDown(context);
Bungee.slideUp(context);
Bungee.fade(context);
Bungee.zoom(context);
Bungee.windmill(context);
Bungee.diagonal(context);
Bungee.spin(context);

Correr

Executar o projeto.

Referência

Aqui estão os links de referência:

---