Анимация в Android

от
Android
В Android есть очень простой механизм анимации, с помощью которого можно оживить даже самый скучный интерфейс.
Допустим, есть некоторый экран с меню
  animdemo_1.png

Давайте заставим анимировать сперва заголовок.
В Android есть класс AnimationUtils, с помощью которого можно загрузить анимацию из ресурса или воспользоваться предустановленной. Для начала воспользуемся готовыми анимациями. В классе AnimationUtils есть метод makeInAnimation (Context c, boolean fromLeft) им и воспользуемся.

  1. // Получаем из разметки объект TextView:
  2. TextView tv1 = (TextView) findViewById(R.id.textView1);
  3. // Инициализируем объект Animation
  4. Animation anim = AnimationUtils.makeInAnimation(this, true);
  5. // Применяем анимацию к TextView
  6. tv1.startAnimation(anim);
   animdemo_2.gif (нажать для просмотра анимации)
Простейшая анимация готова, но при запуске приложения её можно и не увидеть, потому что показываться она может ещё до появления Activity на экране. Поэтому давайте воспроизведём её спустя 1 секунду:
  1. anim.setStartOffset(1000);

Можно изменить длительность анимации, например до 2 секунд:
  1. anim.setDuration(2000);
  animdemo_3.gif
К анимации можно применить интерполяторы. С их помощью можно добиться различных эффектов:
Ударение о поверхность:
  1. anim.setInterpolator(new BounceInterpolator());
animdemo_4.gif
Ускорение:
  1. anim.setInterpolator(new AccelerateInterpolator());
Замедление:
  1. anim.setInterpolator(new DecelerateInterpolator());
Ускорение с замедлением:
  1. anim.setInterpolator(new AccelerateDecelerateInterpolator());
animdemo_5.gif
Перелёт:
  1. anim.setInterpolator(new OvershootInterpolator());
animdemo_6.gif

Также можно комбинировать анимации.
  1. Animation animIn = AnimationUtils.makeInAnimation(this, true);
  2. animIn.setStartOffset(1000); // анимация 1 начнётся спустя секунду
  3. animIn.setDuration(500); // спустя полторы секунды анимация закончится
  4. // Вторая анимация начнётся после 2.5 секунд, это значит,
  5. // что секунду TextView будет стоять на месте не двигаясь
  6. Animation animOut = AnimationUtils.makeOutAnimation(this, true);
  7. animOut.setStartOffset(2500);
  8. animOut.setDuration(500); // спустя 3 секунды TextView покинет экран
  9. AnimationSet set = new AnimationSet(true);
  10. set.addAnimation(animIn);
  11. set.addAnimation(animOut);
  12. tv1.startAnimation(set);
  animdemo_7.gif

Чтобы TextView не появлялся после выхода за экран, нужно его скрыть по завершению второй анимации.
  1. animOut.setAnimationListener(new Animation.AnimationListener() {
  2.  
  3.     @Override
  4.     public void onAnimationStart(Animation animation) {}
  5.  
  6.     @Override
  7.     public void onAnimationRepeat(Animation animation) {}
  8.  
  9.     @Override
  10.     public void onAnimationEnd(Animation animation) {
  11.         tv1.setVisibility(View.GONE);
  12.     }
  13. });

Кроме работы с анимацией из кода, можно определять анимации в xml-ресурсах. В Android есть несколько готовых анимаций:
Появление: android.R.anim.fade_in
Исчезание: android.R.anim.fade_out
Сдвиг влево с проявлением: android.R.anim.slide_in_left
Сдвиг вправо с исчезанием: android.R.anim.slide_out_right

Чтобы подключить xml-анимацию, достаточно загрузить её:
  1. Animation anim = AnimationUtils.loadAnimation(this, android.R.anim.fade_in);
А дальше, как и прежде, работаем с объектом Animation.

Чтобы создать свою xml-анимацию, нужно в папке res создать папку anim и уже в ней создавать xml.

Вот пример alpha.xml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <alpha xmlns:android="http://schemas.android.com/apk/res/android"
  3.    android:duration="1000"
  4.    android:fromAlpha="0.0"
  5.    android:toAlpha="1.0" />
Это анимация постепенного появления.
animdemo_8.gif
alpha - тип анимации, duration - длительность, fromAlpha - начальное значение прозрачности, toAlpha - конечное значение прозрачности.
Очевидно, что для плавного исчезновения, значения в fromAlpha и toAlpha нужно поменять местами.

Тип анимации бывает таков:
alpha - прозрачность,
rotate - поворот,
scale - масштабирование,
translate - перемещение.

Ещё примеры:
  1. <scale xmlns:android="http://schemas.android.com/apk/res/android"
  2.    android:fromXScale="0%" android:toXScale="100%"
  3.    android:fromYScale="0%" android:toYScale="100%"
  4.    android:pivotX="50%" android:pivotY="50%"
  5.    android:duration="1000" />
Здесь увеличение будет происходить от центра, так как точка отсчёта pivotX, pivotY выставлена наполовину. Если её не указывать, масштабирование будет происходить от левого верхнего угла.
  animdemo_9.gif

  1. <set xmlns:android="http://schemas.android.com/apk/res/android">
  2.     <rotate
  3.        android:duration="800"
  4.        android:fromDegrees="0" android:toDegrees="360"
  5.        android:pivotX="50%" android:pivotY="50%"
  6.        android:repeatCount="5" />
  7.     <translate
  8.        android:duration="5000"
  9.        android:fromXDelta="-100%p" android:toXDelta="0%"
  10.        android:fromYDelta="0%" android:toYDelta="0%" />
  11. </set>
Здесь -100%p означает, что начинаться анимация будет не с края анимированного элемента, а с края его родительского элемента.
  animdemo_10.gif

Теперь, когда с анимацией мы разобрались, применим её ко всем элементам экрана.
Открыть спойлер
  animdemo_11_1.gif

Подробную информацию можно найти в доках: классы | ресурсы

Проект AnimationDemo.zip
  • +8
  • views 10692
    • Android
    Категории