Android-анимация с использованием Android Studio

Опубликовано: 4 Сентября, 2022

В сегодняшнем мире, полном воображения и визуализаций, есть области, охватываемые словом «анимация». Когда это слово приходит кому-то на ум, они всегда создают картину мультфильмов и некоторых шоу мира Диснея. Как мы уже знаем, среди детей очень популярны анимационные фильмы, такие как Мир Диснея, Дораэмон и т. д. Все мультфильмы и анимационные картинки представляют собой типы анимации, состоящие из тысяч отдельных изображений, сложенных вместе и воспроизводимых в соответствии с шагами. Такую же анимацию мы попытались добавить в наше приложение для Android с помощью Kotlin.

Что мы собираемся построить в этой статье?

Мы будем создавать простое приложение для Android в студии Android с использованием Kotlin , в котором у нас будет кнопка запуска и изображение, к тому времени, когда мы нажмем кнопку запуска, она запустит соответствующую анимацию. В частности, мы использовали человека с анимацией ходьбы. Повторное нажатие на ту же кнопку остановит анимацию. Образец GIF приведен ниже, чтобы получить представление о том, что мы собираемся делать в этой статье.

Пошаговая реализация

Шаг 1: Создайте новый проект

Чтобы создать новый проект в Android Studio, обратитесь к разделу «Как создать/запустить новый проект в Android Studio». Обратите внимание, что выберите Kotlin в качестве языка программирования.

Шаг 2: Загрузите изображения для анимации

Скопируйте изображения из вашей системы, перейдите в app > res > drawable и нажмите Ctrl + V, они будут включены в папку drawable.

Вы можете получить все изображения по этой ссылке.

Шаг 3: Создайте XML-файл для списка анимации

Чтобы создать список анимаций для приложения, перейдите к app > res > drawable , щелкните правой кнопкой мыши drawable, выберите: new > Drawable файл ресурсов и назовите файл animation_item.xml и обратитесь к приведенному ниже коду.

XML




<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
      
    <!-- creation of animation list-->
    <item
        android:drawable="@drawable/man1"
        android:duration="100" />
    <item
        android:drawable="@drawable/man2"
        android:duration="100" />
    <item
        android:drawable="@drawable/man3"
        android:duration="100" />
    <item
        android:drawable="@drawable/man4"
        android:duration="100" />
    <item
        android:drawable="@drawable/man5"
        android:duration="100" />
    <item
        android:drawable="@drawable/man6"
        android:duration="100" />
    <item
        android:drawable="@drawable/man7"
        android:duration="100" />
    <item
        android:drawable="@drawable/man8"
        android:duration="100" />
  
</animation-list>

Шаг 4: Работа с файлом activity_main.xml
Теперь пришло время разработать макет для приложения. Итак, перейдите к app > res > layout > activity_main.xml и обратитесь к приведенному ниже коду в файле activity_main.xml .
XML



<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical">
          
        <!-- Inserting the image view in Linear Layout  -->
        <ImageView
            android:id="@+id/img"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:src="@drawable/animation_item" />
          
        <!--  Inserting the button in Linear Layout  -->
        <Button
            android:id="@+id/btn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:text="@string/start"
            android:textColor="@color/white"
            android:textSize="16sp"
            android:textStyle="bold" />
  
    </LinearLayout>
      
</LinearLayout>
Шаг 5: Работа с файлом MainActivity.kt
Перейдите к файлу MainActivity.kt и обратитесь к следующему коду. Ниже приведен код файла MainActivity.kt . Комментарии добавляются внутри кода, чтобы понять код более подробно.
Kotlin



import android.graphics.Color
import android.graphics.drawable.AnimationDrawable
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
  
class MainActivity : AppCompatActivity() {
    
    private lateinit var isAnimation: AnimationDrawable
    private lateinit var btn: Button
    private lateinit var img: ImageView
  
    var isStart = false
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
          
        // set find Id for image (img) and button (btn)
        img = findViewById(R.id.img)
        btn = findViewById(R.id.btn)
        img.setImageResource(R.drawable.animation_item)
          
        // set Animation
        isAnimation = img.drawable as AnimationDrawable
        btn.setBackgroundColor(Color.GREEN)
          
        // set animation Start
        btn.setOnClickListener {
            if (!isStart) {
                isAnimation.start()
                btn.text = "stop"
                isStart = true
                btn.setBackgroundColor(Color.RED)
  
            } else {
                isAnimation.stop()
                btn.text = "Start"
                isStart = false
                btn.setBackgroundColor(Color.GREEN)
            }
        }
    }
}
Вот и все, теперь приложение готово к установке на устройство. Вот как выглядит вывод приложения.
Выход:
Ссылка на гитхаб:
Вышеописанный проект также доступен на GitHub, для доступа к нему нажмите на ссылку ниже: Анимация в приложении для Android.

            

                            

                    
                                    

                        

                
РЕКОМЕНДУЕМЫЕ СТАТЬИ