Поделиться через


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

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

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

Переходы

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

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

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

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

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

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

Иллюстрации
иллюстрация мгновенного перехода иллюстрация константного перехода иллюстрация линейного перехода иллюстрация перехода линии от скорости иллюстрация дискретного перехода
иллюстрация параболического перехода от ускорения иллюстрация кубическом переходе иллюстрация перехода плавной остановки
иллюстрация перехода с разворотом иллюстрация синусоидного перехода с скорости иллюстрация синусоидального перехода из диапазона
иллюстрация аккеллерации и замедления переходов

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

Интерполятор определяет математическую функцию, которая определяет, как переменная анимации изменяется с течением времени по мере выполнения от начального значения до окончательного значения. Каждый переход в библиотеке перехода имеет связанный объект интерполятора, предоставляемый системой, и реализует функцию интерполятора. Если приложению требуется эффект, который не может быть указан с помощью библиотеки перехода, он может реализовать один или несколько пользовательских переходов, реализуя объект интерполятора для каждого нового перехода. Объекты Интерполятора нельзя использовать непосредственно приложениями и вместо этого следует упаковать в связанный переход. Фабрика перехода используется для создания переходов из объекта интерполятора. Дополнительные сведения см. в разделе 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 и F раскроются и возвращаются к их первоначальным контурам:

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

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

иллюстрация, показывающая, что f обрезается, чтобы разрешить c и g соответствовать

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

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

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

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

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

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

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

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

иллюстрация, показывающая сжатый, b, d и f

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

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

IUIAnimationManager

IUIAnimationPriorityComparison

IUIAnimationStoryboard

IUIAnimationTransitionLibrary