Общие сведения о раскадровке
В этом обзоре основное внимание уделяется использованию переходов и раскадровок в анимации Windows. Общие сведения о компонентах анимации Windows см. в статье Обзор анимации Windows.
Этот раздел состоит из следующих подразделов.
Transitions
Переход определяет, как изменяется одна переменная анимации в течение определенного интервала времени. Анимация Windows включает библиотеку распространенных переходов, которые разработчики могут применять к одной или нескольким переменным анимации. Различные типы переходов имеют разные наборы параметров, которые могут включать значение переменной по завершении перехода, длительность перехода или уникальные для базовой математической функции величины, такие как ускорение или диапазон колебаний.
Все переходы имеют два неявных параметра: начальное значение и начальную скорость (наклон) математической функции. Они могут быть явно указаны приложением, но обычно диспетчер анимации задает значение и скорость переменной анимации при начале перехода.
Библиотека перехода
Следующие переходы в настоящее время предоставляются библиотекой переходов. Если приложению требуется эффект, который нельзя указать с помощью библиотеки переходов, разработчики могут создавать другие типы переходов, реализовав настраиваемый интерполятор для приложения или используя библиотеку переходов от стороннего производителя.
| Имя перехода | Описание |
|---|---|
| Ускорение и замедление |
Переменная анимации ускоряется, а затем замедляется в течение заданного периода времени. |
| constant |
На протяжении всего перехода переменная анимации остается в исходном значении. |
| кубические |
Переменная анимации изменяется с начального значения на указанное конечное значение с заданной конечной скоростью в течение заданного периода времени. |
| Дискретных |
Переменная анимации остается на начальном значении в течение указанного времени задержки, а затем мгновенно переключается на указанное конечное значение и остается на этом значении в течение заданного времени удержания. |
| Мгновенный |
Переменная анимации мгновенно меняется с текущего значения на указанное конечное значение. |
| linear |
Переменная анимации линейно переходит из исходного значения в указанное конечное значение в течение заданного периода времени. |
| линейный от скорости |
Переменная анимации линейно переходит от исходного значения к заданному конечному значению с заданной скоростью. |
| parabolic from acceleration |
Переменная анимации переходит от исходного значения к указанному конечному значению с заданной конечной скоростью, изменяя скорость с заданным ускорением. |
| Разворота |
Переменная изменяет направление в течение заданного периода. Конечное значение будет таким же, как и начальное значение, а окончательная скорость будет отрицательной от начальной скорости. |
| синусоидальный из диапазона |
Переменная колеблется в заданном диапазоне значений с заданным периодом колебаний в течение заданного периода. |
| синусоидальный от скорости |
Переменная колеблется с заданным периодом колебаний в течение заданного периода. Амплитуда колебаний определяется начальной скоростью переменной. |
| плавное завершение |
Переменная анимации останавливается в заданном окончательном значении в течение максимальной продолжительности времени. |
В следующей таблице приведены иллюстрации для каждого из этих переходов.
| Рисунки |
|---|
     |
   |
   |
 |
Пользовательские переходы
Интерполятор определяет математическую функцию, которая определяет, как переменная анимации изменяется с течением времени при переходе от исходного значения к конечному значению. Каждый переход в библиотеке переходов имеет связанный объект интерполятора, предоставляемый системой и реализующий функцию интерполятора. Если приложению требуется эффект, который нельзя указать с помощью библиотеки переходов, оно может реализовать один или несколько пользовательских переходов, реализовав объект интерполятора для каждого нового перехода. Объекты Интерполятора не могут использоваться приложениями напрямую и должны быть заключены в связанный переход. Фабрика переходов используется для создания переходов из объекта интерполятора. Дополнительные сведения см. в разделах IUIAnimationInterpolator и IUIAnimationTransitionFactory .
Обратите внимание, что большинство приложений будут иметь все необходимые переходы с помощью библиотеки переходов, поэтому им не нужно реализовывать интерполятор.
Элементы Storyboard
Раскадровка — это коллекция переходов, применяемых к одной или нескольким переменным анимации с течением времени. Переходы в раскадровке гарантированно будут синхронизированы друг с другом, а раскадровка запланирована или отменена как единое целое. После создания нужных переходов приложение создает раскадровку с помощью диспетчера анимации, добавляет переходы в раскадровку, настраивает раскадровку соответствующим образом и планирует ее воспроизведение как можно скорее. Диспетчер анимации определяет фактическое время начала раскадровки, так как может возникнуть состязание с другими раскадровками, которые в настоящее время анимирует те же переменные.
Общая длительность раскадровки зависит от длительности переходов в раскадровке. Длительность перехода не должна быть фиксированной; Его можно определить по значению и скорости анимированных переменных при начале перехода. Таким образом, длительность раскадровки также может зависеть от состояния переменных, которые она анимирует.
В следующих примерах предполагается, что был создан диспетчер анимации, библиотека переходов и таймер. Дополнительные сведения см. в разделе Создание основных объектов анимации. В примерах также предполагается, что приложение создало три переменные анимации (X, Y и Z) с помощью метода IUIAnimationManager::CreateAnimationVariable и пять переходов (T1, T2, T3, T4 и T5) с помощью одного из методов интерфейса IUIAnimationTransitionLibrary .
- Создание простой раскадровки
- Использование длительности Context-Sensitive
- Создание более сложной раскадровки
- Использование ключевых кадров
- Удержание переменных
- Планирование раскадровки
Создание простой раскадровки
Чтобы создать простую раскадровку, используйте метод IUIAnimationManager::CreateStoryboard для создания раскадровки, метод IUIAnimationTransitionLibrary::CreateLinearTransition для создания линейного перехода T1 и метод IUIAnimationStoryboard::AddTransition для применения перехода T1 к переменной X и добавления полученного перехода в раскадровку.
Этот процесс дает простую раскадровку, как показано на следующем рисунке. Раскадровка содержит один переход, T1, так что значение переменной X изменяется линейно в течение фиксированного периода времени.
Обратите внимание, что для такого простого сценария альтернативным вариантом является использование метода IUIAnimationManager::ScheduleTransition .
Использование длительности Context-Sensitive
Хотя некоторые переходы имеют фиксированную длительность, длительность других зависит от начального значения или скорости анимированной переменной при начале перехода. Например, метод 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 только в том случае, если параметр priorityEffectUI_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.
Связанные темы
Обратная связь
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделе https://aka.ms/ContentUserFeedback.
Отправить и просмотреть отзыв по