Обзор раскадровки

В этом обзоре основное внимание уделяется использованию переходов и раскадровки в анимации Windows. Чтобы получить общие сведения о компонентах анимации Windows, см. Обзор анимации Windows.

Этот раздел состоит из следующих подразделов.

• Переходы
  • Библиотека перехода
  • Пользовательские переходы
• Раскадровка
  • Создание простой раскадровки
  • Использование длительности, чувствительной к контексту
  • Создание более сложного сториборда
  • Использование ключевых кадров
  • Хранение переменных
  • Планирование раскадровки
• Связанные статьи

Переходы

Переход определяет, как одна переменная анимации изменяется в течение определенного интервала времени. Анимация Windows включает библиотеку распространенных переходов, которые разработчики могут применять к одной или нескольким переменным анимации. Различные виды переходов имеют разные наборы параметров, которые могут включать значение переменной при завершении перехода, длительность перехода или величины, уникальные для базовой математической функции, например ускорение или диапазон колебаний.

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

• Библиотека перехода
• Пользовательские переходы

Библиотека перехода

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

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

В следующей таблице приведены иллюстрации для каждого из этих переходов.

Иллюстрации

Пользовательские переходы

Интерполятор определяет математическую функцию, которая определяет, как переменная анимации изменяется со временем в процессе изменения от начального значения до окончательного значения. Каждый переход в библиотеке перехода имеет связанный объект интерполятора, предоставляемый системой, и реализует функцию интерполятора. Если приложению требуется эффект, который не может быть указан с помощью библиотеки перехода, он может реализовать один или несколько пользовательских переходов, реализуя объект интерполятора для каждого нового перехода. Объекты интерполятора нельзя использовать непосредственно в приложениях, и вместо этого они должны быть обернуты в связанный переход. Фабрика переходов используется для генерации переходов из объекта интерполяции. Дополнительные сведения см. в разделе IUIAnimationInterpolator и IUIAnimationTransitionFactory.

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

раскадровки

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

Общая продолжительность раскадровки зависит от длительности переходов в раскадровке. Длительность перехода не должна быть фиксированной; его можно определить по значению и скорости анимированных переменных при начале перехода. Таким образом, продолжительность сториборда также может зависеть от состояния переменных, которые он анимирует.

В следующих примерах предполагается, что был создан диспетчер анимации, библиотека перехода и таймер. Дополнительные сведения см. в разделе "Создание основных объектов анимации". В примерах также предполагается, что приложение создало три переменные анимации (X, Y и Z) с помощью метода IUIAnimationManager::CreateAnimationVariable и пять переходов (T1, T2, T3, T4 и T5) с помощью одного из методов интерфейса IUIAnimationTransitionLibrary.

• Создание простой раскадровки
• Использование чувствительной к контексту длительности
• Создание более сложной сюжетной раскадровки
• Использование ключевых кадров
• Хранение переменных
• Планирование раскадровки

Создание простой раскадровки

Чтобы создать простую раскадровку, используйте метод IUIAnimationManager::CreateStoryboard для создания новой раскадровки, метод IUIAnimationTransitionLibrary::CreateLinearTransition для создания линейного перехода T1 и метод IUIAnimationStoryboard::AddTransition для применения перехода T1 к переменной X и добавления этого перехода в раскадровку.

Этот процесс создает простую раскадровку, как показано на следующем рисунке. Раскадровка содержит один переход, T1, так что значение переменной X изменяется линейно в течение фиксированного периода времени.

Обратите внимание, что для такого простого сценария альтернативным вариантом является использование метода IUIAnimationManager::ScheduleTransition.

Использование длительности, чувствительной к контексту

Хотя некоторые переходы имеют фиксированную длительность, длительность других зависит от начального значения или скорости анимированной переменной при запуске перехода. Например, метод IUIAnimationTransitionLibrary::CreateLinearTransitionFromSpeed создает переход с длительностью, пропорциональной разнице между начальным значением переменной анимации и указанным конечным значением. На этом рисунке и остальных иллюстрациях такие переходы с произвольной длительностью отображаются знаком вопроса (?), а их фактическая продолжительность определяется при воспроизведении раскадровки.

Создание более сложной раскадровки

После создания раскадровки и добавления одного перехода T1 можно добавить второй переход для переменной X, вызвав метод IUIAnimationStoryboard::AddTransition еще раз, но с T2 вместо T1.

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

Вызов AddTransition снова с переменной Y и переходом T3 добавляет третий переход в начале раскадровки. В зависимости от значений X и Y, когда раскадровка играет, T3 может завершиться после T1 или даже после T2.

Использование ключевых кадров

Чтобы добавить переход с отступом от начала раскадровки, необходимо сначала добавить ключевой кадр. Ключевые кадры представляют собой моменты времени и сами по себе не влияют на поведение раскадровки. У каждой раскадровки есть неявный ключевой кадр, представляющий начало раскадровки, UI_ANIMATION_KEYFRAME_STORYBOARD_START; можно добавлять новые ключевые кадры на заданные смещения от начала, вызывая метод IUIAnimationStoryboard::AddKeyframeAtOffset с UI_ANIMATION_KEYFRAME_STORYBOARD_START.

Смещение, при котором вы добавляете ключевой кадр, всегда относительно другого ключевого кадра. На следующей схеме показан результат добавления ключевого кадра1 и перехода T4, который применяется к переменной Z, выровненной с ключевым кадром1 и созданной с фиксированной длительностью. Конечно, поскольку длительность других переходов еще не известна, T4 может и не быть последним завершившимся переходом.

Ключевые кадры также можно поместить в конце переходов с помощью метода IUIAnimationStoryboard::AddKeyframeAfterTransition. На следующей схеме показан результат добавления ключевого кадра2 после T1 и ключевого кадра3 после T2.

Поскольку длительность T1 и T2 не известна до тех пор, пока раскадровка не воспроизводится, смещения ключевых кадров2 и ключевых кадров3 также не определяются до тех пор. Следовательно, ключевые кадры 2 и даже ключевые кадры 3 могут возникать раньше, чем ключевые кадры 1.

Начало и конец перехода можно выровнять с ключевыми кадрами с помощью метода IUIAnimationStoryboard::AddTransitionBetweenKeyframes. На следующей схеме показан результат добавления пятого перехода T5 в переменной Y между ключевым кадром2 и ключевым кадром3. Это изменяет длительность T5, увеличивая или уменьшая её в зависимости от относительных смещений ключевых кадров 2 и 3.

Хранение переменных

Если T4 заканчивается после T2 и T5, раскадровка останавливает анимацию переменных X и Y, что делает их доступными для других раскадровок для анимации. Однако приложение может вызвать метод IUIAnimationStoryboard::HoldVariable , чтобы запросить, чтобы раскадровка держала некоторые или все переменные, которые он анимирует по их конечным значениям, пока раскадровка не завершится. На следующей диаграмме показан результат удержания X и Z, когда T4 заканчивается последним. Обратите внимание, что раскадровка удерживает значение X на его конечном значении до полного завершения раскадровки. Удержание не влияет на Z, потому что раскадровка заканчивается, когда T4 заканчивается.

Несмотря на то, что Y не удерживается этой раскадровкой, его значение не изменяется после завершения T5, если другая раскадровка не анимирует. Поскольку Y не задействован, любая другая раскадровка независимо от приоритета может начать анимацию Y после завершения T5. В отличие от этого, поскольку X удерживается, сценарий с низким приоритетом не может анимировать X до завершения данного сценария.

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

В этом сценарии T5 начинается до завершения T3, и T3 поэтому сокращается. Поскольку T4 завершается раньше, чем T2 и T5, значение Z удерживается до конца раскадровки. В общем, значения и скорости переменных при запуске раскадровки могут повлиять на порядок ключевых кадров, а также на общую продолжительность и форму раскадровки.

Планирование раскадровки

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

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

Краеугольным камнем платформы анимации Windows является поддержка того, чтобы одна анимация была завершена до начала другого, когда это необходимо. Хотя это устраняет множество логических проблем, она также представляет произвольные задержки в пользовательском интерфейсе. Чтобы устранить эту проблему, приложения могут указать самую длинную допустимую задержку для начала раскадровки, используя метод IUIAnimationStoryboard::SetLongestAcceptableDelay, а диспетчер анимации использует эти сведения для планирования раскадровки до указанного периода задержки. При планировании раскадровки диспетчер анимации определяет, должны ли другие раскадровки сначала быть отменены, обрезаны, завершены и/или сжаты.

Приложение может зарегистрировать обработчик, который будет вызываться при изменении состояния раскадровки. Это позволяет приложению реагировать, когда анимация начинает воспроизведение, доходит до завершения, удаляется полностью из расписания или не может завершиться вследствие прерывания сценарием с более высоким приоритетом. Чтобы определить раскадровки, передаваемые обработчикам событий раскадровок (или сравнения приоритетов), приложение может использовать метод IUIAnimationStoryboard::SetTag для применения тегов к раскадровкам, аналогичных тем, которые можно использовать для идентификации переменных. Как и при повторном использовании раскадровок, разработчики должны проявлять осторожность при использовании тегов для их идентификации и убедиться, что неоднозначности не возникают, когда действия пользователя приводят к тому, что в очередь ставятся многие раскадровки.

В следующих примерах показаны два варианта попытки запланировать раскадровку, встроенную в предыдущие разделы этого раздела.

В этом сценарии шесть раскадровки, A-F, уже запланированы на анимацию переменных W, X, Y и Z, но только A и B начали играть. Новая раскадровка, помеченная буквой G, имеет самую длинную допустимую задержку, продолжительность которой показана на следующем рисунке.

Приложение зарегистрировало сравнения приоритетов, которые включают следующую логику:

• G может отменить только C и E, и только для предотвращения сбоя.
• G может обрезать только A, C, E и F, а также только для предотвращения сбоя.
• Любая раскадровка может сжимать любую другую раскадровку (сжатие всегда выполняется только для предотвращения сбоя).

Примечание.

Квалификатор «только для предотвращения сбоя» означает, что зарегистрированные сравнения приоритетов возвращают S_OK только в том случае, если параметр priorityEffect имеет значение UI_ANIMATION_PRIORITY_EFFECT_FAILURE. Подробности см. в методе IUIAnimationPriorityComparison::HasPriority.

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

• Обрезка F
• Отмена E

При отмене E, D и F раскрываются и возвращаются к их первоначальным контурам:

Диспетчеру анимации не нужно отменять или обрезать C для планирования до истечения самой длинной допустимой задержки, поэтому встреча C и G определяет момент начала G.

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

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

В этом случае выполняются следующие действия:

• Обрезка F
• Отмена E
• Отмена C

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

Чтобы сохранить их относительную синхронизацию, A, B и F также сжимаются.

Однако раскадровки по несвязанным переменным (не показаны) не будут сжиматься.

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

Связанные темы

IUIAnimationManager

IUIAnimationPriorityComparison

IUIAnimationStoryboard

IUIAnimationTransitionLibrary