Какие абстракции хороши для сложных анимаций?

Как вы подходите к разработке и реализации сложных анимаций взаимодействия с пользовательским интерфейсом?

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

Рассмотрим обманчиво «простую» задачу, такую ​​как проектирование и программирование домашнего экрана iOS.

iOS home screen

Однако масштабы скрытой сложности поразительны.
Вот несколько вещей, которые я заметил в интерфейсе:

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

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

Непрерывная анимация против дискретных действий

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

В большинстве случаев можно

  • Отменить анимацию;
  • Меняйте анимацию на ходу;
  • Игнорировать действие;
  • Поставить действие в очередь до окончания анимации.

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

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

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

Правильные инструменты для работы

Я обнаружил, что не могу удержать в голове даже половину возможных сценариев.По мере увеличения выразительности пользовательского интерфейса число возможных состояний начинает сильно нарушать правило 7 ± 2.

Таким образом, мой вопрос заключается в следующем:

Как вы укрощаете сложность проектирования и реализации анимации?

Я заинтересован как в поиске эффективных способов осмысления проблемы, так и в способах ее решения.

Например, события и наблюдатели оказались очень эффективной абстракцией для большинства UI.
Но можете ли вы спроектировать и реализовать экран перетаскивания в стиле iOS, опирающийся на события как на основную абстракцию?

Насколько запутанным должен быть код, чтобы точно отображать все возможные состояния пользовательского интерфейса? Будет ли это обработчик событий, добавляющий другой обработчик событий, когда некоторая логическая переменная имеет значение true для функции, которая устанавливает ее в false, если только перед ней не был запущен еще один обработчик событий?

«Вы никогда не слышали о классах?» Вы можете задаться вопросом. У меня есть, но слишком много состояния, которым эти классы захотят поделиться.

Подводя итог, я ищу не зависящие от языка(хотя, вероятно, вдохновленные языком или фреймворком) методы управления сложными взаимозависимыми, отменяемыми анимациями, происходящими последовательно или сразу, и описание того, как они реагируют на действия пользователя.

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

Структуры данных, шаблоны проектирования, DSL — все это хорошо, если помогает решить проблему.

27
задан Dan Abramov 1 June 2012 в 16:31
поделиться