Um eine moderne App zu erstellen, möchten Sie vielleicht Übergangsanimationen in Ihrer Activity verwenden. Das Android Framework bietet die Möglichkeit, elegante animierte Übergänge beim Öffnen oder Beenden einer Aktivität zu erzeugen. In diesem Artikel wollen wir uns ansehen, wie man solche Übergänge einbaut.

Beispiel 1: Kotlin Android - Aktivitätsübergänge ohne jede Bibliothek

Schauen wir uns ein Beispiel an, wie man animierte Übergänge ohne die Verwendung einer Bibliothek eines Drittanbieters erstellen kann.

Schritt 1: Abhängigkeiten

Es werden keine Abhängigkeiten von Drittanbietern benötigt.

Schritt 2: Animationen

Der nächste Schritt besteht darin, diese Animationen in XML zu schreiben und sie in ein Ressourcenverzeichnis mit dem Namen anim aufzunehmen. Wenn ein solches Verzeichnis in Ihrer Anwendung nicht existiert, erstellen Sie es.

Nachdem wir das Verzeichnis anim erstellt haben, fügen wir die folgenden Animationsdateien hinzu:

slide_down.xml

Dann fügen wir den folgenden Code ein:

<?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>

einschub_rechts.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>

das_aus_links.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>

Schritt 3: Stile

Im dritten Schritt müssen wir die Animationen tatsächlich auf die Aktivitäten anwenden. Dies geschieht jedoch deklarativ auf der Ebene des Themas und nicht auf der Ebene der Aktivität

Erstellen Sie also in der Datei styles.xml einen Stil wie folgt:

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

Wenden Sie ihn dann wie folgt auf das Thema an:

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

Hier ist die vollständige styles.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>

Schritt 4: Aktivitäten

Wir werden drei Aktivitäten haben:

  1. AktivitätA
  2. TätigkeitB
  3. TätigkeitC

TätigkeitA.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))
    }
}

TätigkeitB

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))
    }
}

TätigkeitC

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))
    }
}

Das ist der gesamte Kotlin-Code, den wir schreiben.

Schritt 5: Layouts

Finden Sie die Layout-Codes im Quellcode-Download.

Schritt 6: Ausführen

Führen Sie das Projekt aus und Sie erhalten das Folgende:

Activity Transitions Example

Schritt 7: Herunterladen

Laden Sie den Quellcode von hier herunter.

Beispiele mit Bibliotheken

Um Ihre Anwendung moderner zu gestalten, können Sie Übergangsanimationen zwischen den Aktivitäten einfügen. Es gibt verschiedene Möglichkeiten, dies zu tun, und in diesem Beitrag wollen wir sie untersuchen.

(a). Intent Animation Bibliothek verwenden

Diese Bibliothek ist so einfach wie nur möglich. Sie können ganz einfach verschiedene Arten von Animationen in Ihre Aktivitäten einbauen.

Schritt 1: Installation

Beginnen Sie mit der Installation der Bibliothek. Sie wird in jitpack gehostet:

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

`

Dann fügen Sie die Implementierungsanweisung als Abhängigkeit hinzu:

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

Schritt 2: Code

Hier ist der Code:

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

Laden Sie den vollständigen Code hier herunter.

(b). Übergänge mit Bungee

Bungee ist eine leichtgewichtige Android-Bibliothek für coole Animationen von Aktivitätsübergängen.

Diese Lösung unterstützt ein SDK von mindestens 16 (Android Jellybean 4.1).

Bungee bietet 15 verschiedene Animationen für Aktivitätsübergänge:

  • Teilen
  • schrumpfen
  • Karte
  • rein und raus
  • nach links streichen
  • nach rechts streichen
  • nach oben schieben
  • nach unten schieben
  • nach links gleiten
  • nach rechts streichen
  • zoomen
  • Überblenden
  • drehen
  • diagonal
  • Windmühle

Sie können die Demo-App hier herunterladen, um sie in Aktion zu sehen.

Schritt 1: Installieren

Um es zu installieren, registrieren Sie zunächst jitpack als maven repositort url in der build.gradle Ihres Projektordners:

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

Dann deklarieren Sie in der build.gradle Ihres App-Ordners die Abhängigkeit als eine Implementierungsanweisung:

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

Schritt 2: Code schreiben

Für die Verwendung von Bungee wird nur eine Zeile Code benötigt. In diesem Fall wird zum Beispiel eine Zoom-Animation ausgelöst:

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

Oder nehmen wir an, Sie wollen die Animation auslösen, wenn der Zurück-Button gedrückt wird:

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

Hier sind alle verfügbaren Methoden:

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);

Run

Führen Sie das Projekt aus.

Referenz

Hier sind die Referenzlinks:

1. Lesen mehr
2. Folgen Code-Autor

Categorized in: