Эффект увеличения (zooming)

В уроке показано как создать эффект увеличения объекта при клике по нему. Например увеличение миниатюры изображения в приложении галерея.

Вот пример такой анимации:

Zoom анимация Щелкните по экрану, чтобы проиграть видео еще раз.

Если вы хотите сразу посмотреть работающий пример, скачайте демо-проект, запустите и выберите Zoom. Смотрите следующие файлы:

  • src/TouchHighlightImageButton.java (вспомогательный класс, который подсвечивает касание)
  • src/ZoomActivity.java
  • layout/activity_zoom.xml

Создаем контейнеры

Создайте файл разметки, содержащий большую и маленькую версию содержимого, которое вы хотите увеличивать. В нашем примере мы создадим элемент ImageButton для миниатюры и элемент ImageView, который будет содержать полноразмерную версию изображения:

Создаем анимацию

Теперь создадим события, которые будут запускать анимацию. Добавим к кнопке ImageButton обработчик нажатия View.OnClickListener, чтобы запустить анимацию при щелчке по этой кнопке:

Увеличиваем ImageView

Теперь нам нужно растянуть компонент от маленького размера к большому. При этом начать анимацию нужно от границ миниатюры, а закончить границами большого. Следующие шаги показывают как реализовать анимацию увеличения:

  1. Вставьте изображение с высоким разрешением в скрытый компонент ImageView. В следующем примере для простоты мы будем загружать изображение в потоке интерфейса. В реальных приложениях вы должны всегда загружать и обрабатывать изображения в отдельном потоке! В идеале, размер изображения не должен быть больше размера экрана.
  2. Рассчитываем начальные и конечные границы ImageView
  3. Одновременно анимируем каждое из четырех свойств размеров и позиций X, Y (SCALE_X и SCALE_Y), от начальных границ до конечных. Эти четыре аниматора добавлены в AnimatorSet и могут быть запущены в любое время.
  4. Будем уменьшать изображение, выполнив аналогичную анимацию, когда пользователь коснется полноразмерного изображения. Вы можете добавить обработчик View.OnClickListener для объекта ImageView. При клике по ImageView уменьшите этот элемент до размера миниатюры, а затем присвойте его свойству visibility значение GONE, чтобы его скрыть.

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