Android: анимированные пользовательские представления

18

EDIT 2: новое официальное учебное пособие

Сайт разработчиков выпустил учебное пособие для связанных с UI материалов, это индекс:

  • Обзор анимаций
  • Обзор анимации свойств
  • Анимация графики с графикой
  • Показать или скрыть представление с помощью анимации
  • Переместить вид с анимацией
  • Перемещение представлений с помощью анимации fling
  • Увеличьте представление с помощью анимации масштабирования.
  • Анимационное движение с использованием весенней физики
  • Обновления автоматической анимации макета
  • Анимация изменений макета с помощью перехода
  • Создание настраиваемой анимации перехода
  • Запустите действие с помощью анимации

Если вы заинтересованы в любом из них, это ссылка: Ссылка

РЕДАКТИРОВАТЬ: сумма ответов

Я нашел 5 способов анимации в Android:

  1. Анимируйте свойства View с Property Animation для плавного изменения rotation , alpha , scale и т. Д.

  2. Рамочные анимации ( AnimationDrawable ) : быстро меняйте фотографии, чтобы они выглядели анимированными.

  3. Создайте изображения с помощью векторов ( VectorDrawable ) и оживить их, отредактировав их со временем с помощью AnimatedVectorDrawable .

  4. переопределить onDraw() на View и выполнить Пользовательский чертеж , нарисовав на холсте.

  5. Используйте Lottie , что воспроизводит анимацию After Effects. Многие анимации доступны в LottieFiles .

Тем не менее, Android предоставляет некоторые встроенные инструменты , например Scenes (чтобы вы могли анимировать переход между несколькими макетами, которые разделяют Views ), Shared elements (это позволяет вам обойтись против View от одного Activity к другому) и т. д.

Многие (если не все) из этих функций были добавлены в API 21 , нажмите здесь здесь для получения дополнительной информации.

Вот несколько интересных статей / блогов по анимации:

Наконец, несколько интересных инструментов:

  • Инструмент Mac для записи экрана Android на GitHub .

  • Видео в конвертер GIF онлайн .

Примечание

Я знаю, что Android предлагает такие преобразования, как scale , alpha , rotate , translation и т. д.

Примеры

Есть два примера, которые я хотел бы посмотреть и сравнить.

1 - анимация пользовательского просмотра

Например, заполнение стакана воды или , нарисовав путь .

2 - анимация комплексного просмотра

Например, приложение StackExchange для Android, анимация экрана входа в систему (не удалось найти видео на нем, также не проверял, ведет ли он себя в iOS).

Вопрос

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

Я не думаю, что это так, поэтому я хотел бы спросить: (1) вы знаете, как это делается?

Что касается второго примера, мне пришла в голову только одна идея, и она устанавливает Path и перемещает View соответственно, передавая ее как-то после animate() . (2) Возможно ли это?

Помимо упомянутого выше, (3) знаете ли вы другие методы воспроизведения анимаций? (Например, Scene transitions - , упомянутые в ответе -)

Пожалуйста, поделитесь! Спасибо.

    
задан JonZarate 13.03.2017 в 13:25
источник
  • Вы считали анимированные векторные чертежи? –  azizbekian 15.03.2017 в 19:41
  • @azizbekian Не знал об этом, но выглядит очень утомительно для работы. Посмотрите на пример на веб-странице «Руководства по векторным чертежам». Я думаю, что это предназначено для более простых изображений. Как вы думаете, вы можете добиться того же эффекта, что и изображения, которые я представил? –  JonZarate 15.03.2017 в 20:20
  • Теоретически вы можете. Но векторные чертежи в основном предназначены для значков. Если путь в svg довольно прост, для его рендеринга не потребуется слишком много времени. Здесь вы можете увидеть более подробную информацию о том, как это можно реализовать. –  azizbekian 15.03.2017 в 20:36
  • @azizbekian Если вы представляете пример, подобный водному стеклу, и ответьте на вопрос о том, как получить анимацию, такую ​​как вход в приложение SO, я бы назвал ее лучшим ответом. –  JonZarate 15.03.2017 в 20:39
  • Не могу понять, какая анимация находится в SO App login. На моем телефоне это последняя версия, и это только заставка с индикатором выполнения. –  azizbekian 15.03.2017 в 20:42

4 ответа

10

«Заполнение стакана воды» анимация - это прямое представление о реализации через анимацию кадра, то есть изменение изображений один за другим. здесь вы можете увидеть хорошее сообщение в блоге, описывающее, как реализовать такую ​​анимацию, которая в основном это то же самое, что «заполнить стакан воды», о котором вы упомянули:

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

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

// assuming at this step all the views are at the initial position at x0, y0
TransitionManager.beginDelayedTransition(rootLayout);
// here set view coordinates to x1, y1 - the final position

Структура переходов сделает для вас все остальное. Он найдет дельту и сделает анимацию для вас. Здесь вы найдете хорошую статью Лукас Роша .

    
ответ дан azizbekian 15.03.2017 в 21:12
  • +1 в этом ответе, я написал более сложный «сложный просмотр анимации», и это пучок запущенных (полувариантных) представлений ViewPropertyAnimators и заканчивающихся переводомX (0f) и translationY (0f) –  Kasra Rahjerdi♦ 16.03.2017 в 00:00
  • Фантастический ответ. Я знал что-то вроде AnimationDrawable, но я не думал, что это такая распространенная и широко используемая техника. Сцена переход был также большой вклад, я видел некоторые видео из него, но почему-то я не думал об этом. Я думаю, что вы только пропустили какую-то информацию об AnimatedVectorDrawables, что было покрыто ответом Дэвида Меденяка. Много методов, отличная информация. –  JonZarate 18.03.2017 в 15:44
  • Прежде чем принять в качестве лучшего ответа, я хотел бы подождать еще пару дней, если кто-то захочет внести свой вклад с чем-то отсутствующим. Однако, не беспокойтесь, ваш андер покрывает мой вопрос. Кроме того, вы могли бы поделиться программным обеспечением, используемым для записи экрана, и сделать из него GIF? –  JonZarate 18.03.2017 в 15:45
  • Азизбекян, не могли бы вы ответить на мой предыдущий вопрос? –  JonZarate 20.03.2017 в 16:10
  • @JonZarate, эй! Не заметил этого вопроса. Конечно. Есть хороший инструмент для легкого захвата экрана. Он захватывает видео, а затем я конвертировал его и преобразовывал его в gif в Интернете. –  azizbekian 20.03.2017 в 16:11
6
  

Знаете ли вы о других методах воспроизведения анимаций?

В Android у вас есть 3 способа реализации анимации:

  • Анимируйте вид (масштаб, альфа, поворот и т. д.), просто используя view.startAnimation(...)
  • Анимация Drawable (в зависимости от Drawable это может быть что угодно: от анимированных векторных ссылок до кадра анимации )
  • Выполнение пользовательского рисования и анимации

Очевидно, что просто анимация представления с помощью методов framework проще, чем создание какой-либо привлекательной анимации, а создание некоторого drawable (xml) проще, чем выполнение пользовательского чертежа.

Вы упомянули lottie, который только что вышел несколько дней назад. Мы посмотрим, как это хорошо, но выглядит очень многообещающим. Под капотом лотти проанализирует json и выполнит какой-то пользовательский рисунок, используя Canvas и Path (3-я маркерная точка выше)
Если вы можете получить After Effects, это, вероятно, «самое простое» решение для сложных анимаций (и кросс-платформу!)

Люди также начали делиться анимацией, вы можете найти их здесь:
Ссылка

  

Вы знаете, как это делается?

Видео (1) выглядит так, как будто они делают какой-то пользовательский рисунок.

  • Нарисуйте и заполните Path для воды, оживите верх с некоторыми волнами в то время как он оживляет и посыпает некоторыми белыми пятнами.
  • Нарисуйте вокруг себя форму стекла

Это будет связано с созданием пользовательского представления и / или вытягивания и переопределения onDraw(Canvas) Path.lineTo , а также некоторые дуги, кубики или квадраты сделают трюк ... Я не дизайнер и не специалист по вектору: )

Я не думаю, что этого можно было легко достичь, используя анимированные векторные чертежи , но вы можете сделать это, применив анимацию морфинга пути. (Анимированные векторные чертежи поддерживаются только на 21+, если я не ошибаюсь)

Видео (2) просто анимирует Path и виляет флаг. Этого можно достичь с помощью AnimatedVectorDrawables (например, этого блога ) и обрезание начала / конца пути или снова путем выполнения пользовательского чертежа (и, следовательно, также поддерживающего pre lolipop устройств) путем анимации Пути, например используя PathMeasure.getSegment() для непрерывной анимации пути.

Анимация (3), как уже указывалось ответом азизбекистов , является первым упомянутым видом, просто оживляющим (движущимся и масштабирование).

  

Что касается второго примера, мне пришла в голову только одна идея, и это устанавливает путь и перемещает вид соответственно, передавая его каким-то образом после animate (). (2) Возможно ли это?

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

    
ответ дан David Medenjak 16.03.2017 в 00:49
  • Отличная информация, спасибо. Что касается минимального API AnimatedVectorDrawable, я думаю, что он может использоваться в API 14 (4.0) с некоторыми ограничениями поддержки android. Проверьте ссылку для получения дополнительной информации. Уже вчера. –  JonZarate 18.03.2017 в 15:38
1

Я хотел бы предложить библиотеку, которую я написал некоторое время назад (недавно опубликованную), которая позволяет создавать пользовательские представления и добавлять к ним анимации.

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

Он работает с Android TimeInterpolator и любым из его дочерних элементов (как, например, ).

Анимации полностью рисуются с использованием Canvas, разница в том, что вы можете получить анимированное значение, которое изменяется в соответствии с TimeInterpolator как функция времени.

Вы можете добавить столько анимаций, сколько хотите, в свой просмотр, контролируете их независимо друг от друга. И вдобавок ко всему, вы не ограничиваетесь рисованием не-анимационных вещей. Для этого есть выделенный метод (onDrawStatics).

    
ответ дан user3705007 31.03.2017 в 15:14
  • В настоящее время разрабатывается новая версия, основанная на той же идее, однако реализована намного лучше. –  user3705007 20.08.2017 в 12:03
-2

Для вашего пользовательского представления я предлагаю вам идентифицировать свойства, которые вы хотите оживить.

Скажем, ClockView, You После установки краски, штриха и т. д. в OnDraw()

Возможно, вы захотите использовать AsyncMethods / Runnables, который постоянно обновляет свойства в фоновом режиме, что приводит к анимации Frame by Frame, но это не Fraame Animation на самом деле, потому что вы анимируете только свойства представления (повернуть налево), а не он рамка для тентонов

Здесь есть десятки примеров, с небольшим количеством поисковых запросов вы можете сделать DIY

    
ответ дан Nandhu 15.03.2017 в 19:34
  • Я не думаю, что это элегантно вообще –  JonZarate 15.03.2017 в 20:04
  • Вот как анимация сделана приятелем, каждая вещь - просто обновление. –  Nandhu 15.03.2017 в 21:07
  • Возможно, это так, как это делает Android, но не в том, как разрабатываются профессиональные приложения. Не говоря уже о том, что ваш AsyncMethods / Runnables aproach является излишним, когда у нас уже есть анимации, предоставляемые Android. Итак, в двух словах, вы просто предложили переопределить onDraw, и что тогда? Нарисуйте пиксель анимации стеклянного стекла по пикселям через 50 мс? У вас есть идея о том, какую работу он требует? Если вы уверены в этом, продолжайте и покажите пример ... –  JonZarate 15.03.2017 в 21:13