Как создать анимацию в Android приложениии?

Продолжая серию уроков по Android, я решил показать вам как можно добавить анимацию для простой картинки.

В данном уроке мы научимся создавать несколько анимация на картинку. Для того чтобы выполнить этот урок вам потребуется создать Android проект c:

Minimum required SDK = 3.0

Target SDK = 4.2

 

Шаг 1. Создаем внешний вид

Создаем layout main_layout.xml (src\main\res\layout\main_layout.xmlcо следующим содержимым:

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

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/btn_name_one"
            android:id="@+id/button"
            android:layout_row="0"
            android:layout_column="0"
            android:textSize="16dp"
            android:padding="15dp"
            android:onClick="onAnimationImageOne" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/btn_name_two"
            android:id="@+id/button2"
            android:layout_row="0"
            android:layout_column="1"
            android:textSize="16dp"
            android:padding="15dp"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@+id/button"
            android:onClick="onAnimationImageTwo" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/btn_name_three"
            android:id="@+id/button3"
            android:layout_row="0"
            android:layout_column="2"
            android:textSize="16dp"
            android:padding="15dp"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:onClick="onAnimationImageThree" />

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView"
            android:layout_row="2"
            android:layout_column="1"
            android:src="@drawable/android_img"
            android:layout_centerVertical="true"
            android:layout_centerHorizontal="true" />
</RelativeLayout>

И в string.xml добавим следующие строки:

<resources>
    <string name="app_name">Example Animation Image</string>
    <string name="btn_name_one">Анимация 1</string>
    <string name="btn_name_two">Анимация 2</string>
    <string name="btn_name_three">Анимация 2</string>
</resources>

И теперь в src\main\res\drawable добавляем картинку android_img.png:

В итоге наше приложение будет выглядеть так:

 

Шаг 2. Создаем Activity

Теперь давайте добавим Activity для нашего layout, для этого в \src\main\java\com\devcolibri\animationimage создаем новое Activity MainActivity.java со следующим содержимым:

package com.devcolibri.animationimage;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity {

    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);

        imageView = (ImageView) findViewById(R.id.imageView);
    }

}

После этого ваш layout можно будет увидеть после запуска приложения, но незабывайте настроить activity в AndroidManifest.xml.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.devcolibri.animationimage"
    android:versionCode="1"
    android:versionName="1.0">

    <uses-sdk android:minSdkVersion="11" android:targetSdkVersion="17" />

    <application android:allowBackup="true"
        android:label="@string/app_name"
        android:icon="@drawable/ic_launcher"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity" android:icon="@drawable/ic_launcher">
            <intent-filter>
                <category android:name="android.intent.category.LAUNCHER" />
                <action android:name="android.intent.action.MAIN" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Теперь все будет работать

 

Шаг 3. Создаем анимации

В Android анимации представлены в виде анимационных ресурс файлов, а точней в виде XML файлов, в которох описанно поведение элемента на который будет применена данная анимация.

 

Анимация №1

Для начало создадим самую простую анимацию для первой кнопки.

Она будет смещать наже изображение влево, потом возвращать на исходное положение. Для того, чтобы создать анимацию в папке res создайте новую ресурсную папку anim:

После этого в папке anim создаем Animation resource file с именем animation_one.xml и содержимым:

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

<set xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/decelerate_interpolator">

        <translate android:fromXDelta="0"
            android:toXDelta="-20%p"
            android:duration="200"/>

</set>

Как видите все начинается с тега set, он является стандартным тегом для всех анимационных русурс файлов, а вот тег translate — это уже наша анимация, где:

android:toXDelta — это смежение по оси X в лево;

android:duration — это продожытельность перемещения, чем больше duration, тем медленей будет двигаться изображение.

 

Анимация №2

Теперь создадим в тойже папке anim новый ресурс файл с именем anumation_two.xml и содержимым:

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

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">

    <rotate android:pivotX="50%"
        android:pivotY="50%"
        android:fromDegrees="0"
        android:toDegrees="360"
        android:duration="1000"/>

</set>

Как видите в этой анимации мы используем тег rotate — он позволит нам заставить наше изображение сделать поворот, в нашем случае на 360 градусов.

Давайте рассмотрим детальней атрибуты свойства rotate:

android:pivotX — это говорит о том, что точка повората будет в центре изображения, поэтому оно просто сделает круговой поворот;

android:fromDegrees- тут мы указываем начальное угловое положение, в градусах;

android:toDegrees — а тут конечное угловое положение, в градусах;

android:duration = это продолжительность анимации чем больше оно будет тем медленей будет анимация.

 

Анимация №3

Теперь расмотрим немного сложней анимацию. Для этого создаем 3-ю анимацию и называем её animation_three.xml:

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

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >

    <scale
        android:duration="1250"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="2.0"
        android:toYScale="2.0" />

    <rotate
        android:duration="2500"
        android:fromDegrees="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="360" />

    <scale
        android:duration="1250"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:startOffset="1250"
        android:toXScale="0.5"
        android:toYScale="0.5" />

</set>

Тут мы уже видим несколько анимационных свойств объеденены в одну анимацию. Вы уже наверное заметели, что мы сново используем анимацию rotate, но помимо её тут есть и новая анимация scale.

scale — позволяет сделать динамическое изменение размера компонента, в нашем случае картинки.

В данном сценарии мы сначало выполняем увеличение изображения, и в этот же момент поворачиваем его на 360 градусов и на половине поворота изображение перестает увеличиваться, и начинает уменьшаться.

Атрибуты scale:

android:duration — продолжительность анимации;

android:fromXScale — начальная позиция смещения анимации по оси X;

android:fromYScale — начальная позиция смещения  анимации по оси Y;

android:pivotX — определяет начальную точку изменения размера по оси X;

android:pivotY — определяет начальную точку изменения размера по оси Y;

android:startOffset — количество миллисекунд задержки анимации после запуска;

android:toXScale — размер смещения по оси X;

android:toYScale — размер смещения по оси Y.

 

Шаг 4. Подключение анимаций

Теперь давайте подключим анимации на картинку, но они будут срабатывать после клика по кнопки, где каждая кнопка будет отвечать за определёную анимацию.

Вот полный код MainActivity:

package com.devcolibri.animationimage;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;

public class MainActivity extends Activity {

    // Создаем экземпляры для наших анимаций
    private Animation animOne, animTwo, animThree;
    private ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_layout);

        imageView = (ImageView) findViewById(R.id.imageView);

        // Подгружаем все анимации
        animOne = AnimationUtils.loadAnimation(this, R.anim.animation_one);
        animTwo = AnimationUtils.loadAnimation(this, R.anim.anumation_two);
        animThree = AnimationUtils.loadAnimation(this, R.anim.animation_three);
    }

    // Анимация №1
    public void onAnimationImageOne(View v){
        imageView.startAnimation(animOne);
    }

    // Анимация №2
    public void onAnimationImageTwo(View v){
        imageView.startAnimation(animTwo);
    }

    // Анимация №3
    public void onAnimationImageThree(View v){
        imageView.startAnimation(animThree);
    }

}

Методы onAnimationImageOne, onAnimationImageTwo, onAnimationImageThree вызываются в main_layout на каждой кнопке в свойстве android:onClick.

Вот структура проекта:

p.s. Если возникнут вопросы, то с радостью отвечу на них в комментариях.

Урок создан: 14 ноября 2013 | Просмотров: 31307 | Автор: Александр Барчук | Правила перепечатки


Добавить комментарий

Добавить комментарий

Ваш e-mail не будет опубликован.

Комментарии:

  • 14 ноября 2013 в 10:03

    Vasily

    android studio?

  • 16 ноября 2013 в 16:27

    Akramjon

    Классно все обьяснил Алекс спасибо

  • 06 декабря 2013 в 17:34

    Евгений

    Скажите, почему у меня не видит папку amin? Т.е. в строчке animThree = AnimationUtils.loadAnimation(this, R.anim.animation_three); anim — подчёркнуто крассным. И да, я создавал её как обычную папку. в своей версии я не нашёл как создавать именно папку под анимационные ресурсы.
    Спасибо большое!!!

  • 31 января 2014 в 17:53

    АЛЕКСАНДР

    как реализовать анимацию без файла XML?

    • 10 января 2015 в 12:57

      Дима

      Никак. А ты думал, всё так просто?

    • 15 февраля 2015 в 01:09

      Иван

      Можно реализовать анимацию еще программно, загугли

  • 24 февраля 2015 в 10:40

    Сергей

    Присоединяюсь к вопросу Александра «как реализовать анимацию без файла XML». Вот это было бы интересно. Например слайд шоу из трех картинок или переключение поочередное нескольких картинок.

  • 23 июня 2015 в 15:58

    Rigel

    а как остановить запущенную анимацию?

  • 21 июля 2015 в 22:25

    Alex

    Добрый день, скажите пожалуйста, мне кажется или анимация в андроиде немного ущербна? или это ущербен я ?) потому как я смотрю и не понимаю… А если нам необходимо привязываться к рандомным параметрам (точки перемещения, углы повората и тд.
    или к параметрам которые мы берем из базы….
    Правильно ли я понимаю что если мне необходимо сделать поворот от любого угла у любому другому Scale то мне прийдеться создать анимации на все случаи жизни потом создать класс… запихнуть туда свич и вызывать их передавая значения градусов *?
    Извините за подобные вопросы ) может просто еще не разобрался в чем но перечитал уже на 3-х разных ресурсах и вот ничего понять не могу…
    Примеры которые дают вопросов не вызывают… но с реализацией случайных значений для анимаций совсем ничего не понимаю

  • 21 августа 2015 в 09:43

    Alex

    Здравствуйте! Подскажите, почему ссылка на изображение: android:src=»@drawable/android_img» в файле main_layout.xml, подчеркнута красной волнистой линией и как это исправить?

  • 13 февраля 2016 в 18:57

    Никита

    Как сделать XML-файл в Drawable ?

  • 13 февраля 2016 в 18:59

    Никита

    Как добавить файл xml в drawable?

  • 26 июля 2016 в 09:59

    CryThis

    Как делать плавающие окна? Примером как месенджер Open chat head

  • 04 августа 2016 в 23:23

    Mansur

    Спасибо все понятно,возникло проблема в manifest файле но потом исправил.Я бы хотел 3 анимация в каждом кнопке где можно скачать анимацию другие можете дать ссылку вот мой mail: snake.sharipow@gmail.com и спасибо за ранее

    • 05 августа 2016 в 15:56

      Mansur

      Можете удалить потом удалить комментарию верхнию

  • 05 октября 2016 в 12:40

    Аполлинария

    Ееееее, спасибо огромнейшее!