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

EDIT 2: новое официальное руководство по обучению

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

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

если вы заинтересованы в любой из них, это ссылка: https://developer.android.com/training/animation/


EDIT: сумма ответов вверх!--20-->

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

  1. анимация свойства of a View с Анимации плавно изменить rotation, alpha, scale etc.

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

  3. дизайн изображения с векторы (VectorDrawable) и анимация их, редактируя их во времени с AnimatedVectorDrawable.

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

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

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

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

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

последнее, пара интересных инструменты:

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

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


Примечание

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

примеры

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

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

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

2 - сложный вид анимации

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

вопрос

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

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

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

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

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

4 ответов


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

enter image description here

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

enter image description here

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

// 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

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


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

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

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

очевидно, просто анимации тем в рамках методов легче, чем создавать некоторые выигрышного анимация, и создания некоторых рисунков (XML) - это легче, чем делать отрисовки.

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

люди также начали делиться анимациями, вы можете найти их здесь:
http://www.lottiefiles.com/


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

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

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

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

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

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

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


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

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


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

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

Он работает с Android в TimeInterpolator и любой из его детей (а также приложения).

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

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


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

скажем, ClockView, вы после установки краски, Штриха и так далее в OnDraw()

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

есть десятки примеров там, с небольшим гуглить вы можете DIY