Анимация, если все сделано правильно, всегда приятно видеть. Особенно когда речь идет о мобильных приложениях - добавление тонкой анимации здесь и там может помочь выделить ваше приложение из толпы и придать ему более изысканный вид.
Google также поставил анимацию в центр внимания, когда представил свой новейший язык дизайна - Material Design - еще в 2014 году!
В этом сообщении блога я расскажу, как я реализовал несколько простых, но эффективных анимаций в AfterShoot.
Обратите внимание, что этот пост в блоге отличается от предыдущего, которое я написал о Лотти:
Хотя Lottie позволяет вам показывать предварительную анимацию в ваших приложениях, в этом сообщении блога будет описано, как вместо этого анимировать действие пользователя.
Вот как выглядит приложение в текущем состоянии:
Если вы утверждаете, что переход между Activity анимированный, просто дождитесь конца сообщения, и вы поймете, что я имею в виду.
Об анимации перехода в Android
В этом посте будут описаны 3 основных типа анимации:
- Действие Введите анимацию (когда пользователь входит в действие)
- Анимация выхода из действия (когда пользователь покидает действие)
- Анимация перехода общего элемента (когда пользователь нажимает на элемент и открывает новое действие, содержащее тот же элемент)
Хотя с анимацией, безусловно, есть больше возможностей, мы пока ограничимся этими тремя.
Примечание. Анимация, описанная в этом блоге, предполагает, что minSdk вашего приложения составляет 21 или выше. Если вы создаете приложение, поддерживающее более ранние версии устройств, вы можете поискать альтернативу для устройств младше 21 года. Одним из хороших источников может быть этот вопрос на StackOverflow.
Реализация анимации перехода Activity
Для целей этого сообщения в блоге enterAnimation относится к анимации, которая будет отображаться, когда пользователь входит в нашу Activity, а exitAnimation сигнализирует, что анимация будет отображаться, когда пользователь покидает нашу Activity.
Шаг 1. Определите тип отображаемой анимации
Android SKD поддерживает следующие переходы между активностями из коробки:
- Расчленить - перемещает виды внутрь или наружу из центра сцены.
- Слайд - перемещает виды внутрь или за пределы одного из краев сцены.
- Fade - Добавляет или удаляет вид из сцены, изменяя его непрозрачность.
При желании вы можете добавить собственную анимацию, создав свой собственный класс Kotlin, расширяющий класс Visibility.
Вы можете поиграть со всеми тремя анимациями, прежде чем решить, какая из них вам действительно нужна. Для AfterShoot я выбрал Explode в качестве анимации входа и выхода.
Шаг 2. Назначьте анимацию окну действия
Чтобы назначить анимацию окну вашего действия, в методе действия onCreate() перед вызовом setContentView() нам необходимо добавить следующие строки кода:
Сделайте это во всех действиях, которые вы хотите оживить.
Шаг 3. Начните упражнение с анимацией.
После того, как анимация будет определена, запуск приложения сразу же не покажет вам никакой анимации. Вместо этого мы должны запустить Activity с соответствующим флагом.
startActivity(intent,ActivityOptions.makeSceneTransitionAnimation(this).toBundle())
В приведенном выше фрагменте кода this - это экземпляр Activity, с которого вы запускаете анимацию (здесь это MainActivity.
Шаг 4. Укажите продолжительность анимации.
Если вы хотите поиграть с продолжительностью, в течение которой отображается анимация, вы можете настроить это значение следующим образом:
По умолчанию длительность отсутствует, поскольку каждая анимация имеет собственное предварительно заданное значение. Указание фиксированной продолжительности переопределит значение по умолчанию, присвоенное анимации.
Вот и все! Давайте теперь посмотрим, как реализовать переход общих элементов в приложении.
Реализация переходов общих элементов
Как следует из названия, переход общего элемента - это анимация, показываемая, когда общий элемент (например, изображение или текст) используется совместно двумя действиями. Чтобы обрисовать, что я имею в виду, взгляните на эту гифку:
Как видите, обложка совместно используется на первом и втором экранах и анимируется с помощью перехода общих элементов.
Реализовать их в приложении снова очень просто - давайте посмотрим, как это сделать.
Шаг 1. Добавьте общий тег к элементу, который используется во всех действиях.
Первым шагом в реализации перехода общего элемента является определение представлений, которые являются общими для двух разных действий / фрагментов.
Например, в AfterShoot изображение в RecyclerView и изображение в действии, которое появляется после нажатия RecyclerView, являются общими:
Итак, что я сделаю, так это добавлю тег к обоим этим ImageView в их соответствующих xml-файлах. Вот как это делается:
Обратите внимание на атрибут android:transitionName, который является общим для ImageView в первой сущности и BigImageView во второй сущности.
Шаг 2. Начните действие с перехода к общему элементу
После того, как вы определили атрибут transitionName для своих представлений, следующим шагом будет сообщить системе, что мы планируем реализовать общий переход при запуске приложения. Это можно сделать следующим образом:
Первый параметр, переданный в makeSceneTransitionAnimation, является экземпляром текущего действия; второй - это общее представление в текущем действии, а третий параметр - это transitionName, который используется совместно с View во втором действии.
После запуска приложения конечный результат выглядит следующим образом:
Как видите, наши изображения имеют четко определенный путь, по которому они следуют всякий раз, когда действие начинается и заканчивается.
Шаг 3. Переход с несколькими представлениями
В случае, если несколько представлений используются совместно с действиями, мы можем указать представления и имена, которые будут использоваться совместно, при создании объекта параметров как такового.
val options = ActivityOptions.makeSceneTransitionAnimation(this,
UtilPair.create(imageView, "image"),
UtilPair.create(textView, "text"))
где imageView и textView - общие виджеты в первом действии, а «изображение» и «текст» - их transitionName соответственно.
Вот и все! С помощью нескольких простых шагов мы смогли реализовать тонкую, но эффективную анимацию в приложении!
Если вы хотите посмотреть исходный код содержания, описанного в этом сообщении в блоге, вы можете найти его здесь:
Спасибо за внимание! Если вам понравилась эта история, пожалуйста, нажмите 👏 кнопку и поделитесь ею, чтобы помочь другим найти ее! Не стесняйтесь оставлять комментарии 💬 ниже.
Есть отзывы? Подключим в Twitter.
Примечание редактора. Heartbeat - это онлайн-публикация и сообщество, созданное авторами и посвященное предоставлению первоклассных образовательных ресурсов для специалистов по науке о данных, машинному обучению и глубокому обучению. Мы стремимся поддерживать и вдохновлять разработчиков и инженеров из всех слоев общества.
Независимая редакция, Heartbeat спонсируется и публикуется Comet, платформой MLOps, которая позволяет специалистам по обработке данных и группам машинного обучения отслеживать, сравнивать, объяснять и оптимизировать свои эксперименты. Мы платим участникам и не продаем рекламу.
Если вы хотите внести свой вклад, отправляйтесь на наш призыв к участникам. Вы также можете подписаться на наши еженедельные информационные бюллетени (Deep Learning Weekly и Comet Newsletter), присоединиться к нам в » «Slack и подписаться на Comet в Twitter и LinkedIn для получения ресурсов, событий и гораздо больше, что поможет вам быстрее и лучше строить лучшие модели машинного обучения.
