Анимации в XAML

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

Анимации из библиотеки анимаций среды выполнения Windows предоставляют следующие преимущества:

• Движения, которые соответствуют рекомендациям по анимации
• Быстрые, гибкие переходы между состояниями пользовательского интерфейса, которые сообщают, но не отвлекают пользователя
• Визуальное поведение, показывающее переходы в приложении пользователю

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

Windows 10 версии 1607 представляет новый API ConnectedAnimationService для реализации анимаций, в которых элемент, как представляется, анимирует между представлениями во время навигации. Этот API имеет другой шаблон использования, отличный от другого API библиотеки анимации. Использование ConnectedAnimationService рассматривается на справочной странице.

Библиотека анимаций не предоставляет анимации для каждого возможного сценария. В некоторых случаях может потребоваться создать настраиваемую анимацию в XAML. Для получения дополнительной информации см. анимации с раскадровками.

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

Типы анимаций

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

• Тематические переходы применяются автоматически при изменении определенных условий в пользовательском интерфейсе, включая элементы управления или элементы из предопределенных типов пользовательского интерфейса XAML Windows Runtime. Они называются тематическими переходами, так как анимации поддерживают внешний вид и интерфейс Windows, а также определяют, что все приложения делают для определенных сценариев пользовательского интерфейса при переходе с одного режима взаимодействия на другой. Переходы темы являются частью библиотеки анимации.
• Анимации темы — это анимации, применяемые к одному или нескольким свойствам предопределенных типов пользовательского интерфейса XAML среда выполнения Windows. Анимация тем отличается от переходов тем, так как анимации темы предназначены для одного конкретного элемента и существуют в определенных визуальных состояниях элемента управления, тогда как переходы темы назначаются свойствам элемента управления, существующего вне визуальных состояний, и влияют на переходы между этими состояниями. Многие элементы управления XAML в среде выполнения Windows включают анимации тем в сюжеты, которые являются частью шаблона элемента управления, с анимациями, активируемыми визуальными состояниями. Пока вы не изменяете шаблоны, у вас будут встроенные анимации тем для элементов управления в пользовательском интерфейсе. Однако, если вы замените шаблоны, вы также удалите встроенные анимации темы управления элементами. Чтобы вернуть их обратно, необходимо определить сториборд, включающий анимацию темы в набор визуальных состояний управления. Вы также можете запускать анимации тем из сценариев, которые не связаны с визуальными состояниями, и запускать их с помощью метода Begin, однако это менее распространено. Анимации тем являются частью анимационной библиотеки.
• Визуальные переходы применяются при переходе элемента управления из одного из определенных визуальных состояний в другое состояние. Это пользовательские анимации, которые вы пишете, и обычно связаны с пользовательским шаблоном, который вы пишете для элемента управления и определений визуального состояния в этом шаблоне. Анимация выполняется только во время перехода между состояниями, и это обычно занимает очень короткое время, максимум несколько секунд. Дополнительные сведения см. в разделе "VisualTransition" раскадровки анимаций для визуальных состояний.
• Анимации с применением Storyboard анимируют значение свойства зависимости среды выполнения Windows на протяжении времени. Раскадровки можно определить как часть визуального перехода или активировать приложением во время выполнения. Для получения дополнительной информации см. анимации с раскадровками. Дополнительные сведения о свойствах зависимостей и их наличии см. в обзоре свойств зависимостей.
• Подключенные анимации , предоставляемые новым API ConnectedAnimationService , позволяют разработчикам легко создавать эффект, в котором элемент отображается для анимации между представлениями во время навигации. Этот API доступен начиная с Windows 10 версии 1607. Дополнительные сведения см. в разделе ConnectedAnimationService.

Анимации, доступные в библиотеке

Следующие анимации предоставляются в библиотеке анимации. Щелкните имя анимации, чтобы узнать больше о своих основных сценариях использования, о том, как их определить, и просмотреть пример анимации.

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

Переход на страницу

Используйте переходы страниц для анимации навигации в приложении. Так как практически все приложения используют некоторые элементы навигации, анимации перехода страниц являются наиболее распространенным типом анимации темы, используемой приложениями. Дополнительные сведения об API перехода страниц см. в разделе NavigationThemeTransition.

Переход содержимого и переход на вход

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

EntranceThemeTransition представляет движение, применяемое к содержимому при первой загрузке страницы или большого раздела интерфейса пользователя. Таким образом, первое появление содержимого может вызывать другую реакцию, чем его изменение. EntranceThemeTransition эквивалентен NavigationThemeTransition с параметрами по умолчанию, но может использоваться за пределами Frame.

Появление/исчезновение и перекрёстное затухание

Используйте анимацию появления и исчезновения для отображения или скрытия временного UI или контролов. В XAML они представлены как FadeInThemeAnimation и FadeOutThemeAnimation. Одним из примеров является панель приложений, в которой новые элементы управления могут отображаться из-за взаимодействия с пользователем. Другим примером является временный индикатор прокрутки или индикатор сдвига, который исчезает после того, как входные данные пользователя не были обнаружены в течение некоторого времени. Приложения также должны использовать анимацию появления при переходе от элемента-заполнителя к конечному элементу по мере динамической загрузки содержимого.

Используйте перекрестную анимацию, чтобы сгладить переход при изменении состояния элемента; Например, когда приложение обновляет текущее содержимое представления. Библиотека анимации XAML не предоставляет особую анимацию перехода, но вы можете добиться того же результата с помощью FadeInThemeAnimation и FadeOutThemeAnimation с перекрывающимися временными интервалами.

Указатель вверх/вниз

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

Переместить

Используйте анимации перепозиции (RepositionThemeAnimation или RepositionThemeTransition), чтобы переместить элемент в новое положение. Например, перемещение заголовков в элементе управления "Элементы" использует анимацию изменения положения.

Отображение и скрытие всплывающего окна

Используйте PopInThemeAnimation и PopOutThemeAnimation при показе и скрытии всплывающего окна или аналогичного контекстного пользовательского интерфейса в верхней части текущего представления. PopupThemeTransition — это переход темы, полезный приём, если вы хотите легко закрыть всплывающее окно.

Показать и скрыть пользовательский интерфейс edge

Используйте анимацию EdgeUIThemeTransition для плавного перемещения небольшого интерфейса, ориентированного на край, в поле зрения и из него. Например, используйте эти анимации при показе пользовательской панели приложения в верхней или нижней части экрана или области пользовательского интерфейса для ошибок и предупреждений в верхней части экрана.

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

Изменения элемента списка

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

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

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

Перетащить/бросить

Используйте анимацию перетаскивания (DragItemThemeAnimation, DragOverThemeAnimation) и анимацию опускания (DropTargetItemThemeAnimation), чтобы обеспечить визуальную обратную связь, когда пользователь перетаскивает или опускает элемент.

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

Использование анимаций с пользовательскими элементами управления

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

Примеры анимации перехода

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

<Button Content="Transitioning Button">
     <Button.Transitions>
         <TransitionCollection> 
             <EntranceThemeTransition/>
         </TransitionCollection>
     </Button.Transitions>
 </Button>

В этом коде мы добавим объект EntranceThemeTransition в коллекцию перехода кнопки. Теперь, когда кнопка впервые появляется, она быстро выскальзывает на экран, а не просто отображается. Вы можете задать несколько свойств для объекта анимации, чтобы настроить, насколько далеко он скользит и из какого направления, но это действительно предназначено для использования в простых сценариях через интерфейс API, то есть, чтобы обеспечить эффектное появление.

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

<UserControl.Resources>
     <Style x:Key="DefaultButtonStyle" TargetType="Button">
         <Setter Property="Transitions">
             <Setter.Value>
                 <TransitionCollection>
                     <EntranceThemeTransition/>
                 </TransitionCollection>
             </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
      
<StackPanel x:Name="LayoutRoot">
    <Button Style="{StaticResource DefaultButtonStyle}" Content="Transitioning Button"/>
</StackPanel>

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

<!-- If you set an EntranceThemeTransition animation on a panel, the
     children of the panel will automatically offset when they animate
     into view to create a visually appealing entrance. -->        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- The sequence children appear depends on their order in 
         the panel's children, not necessarily on where they render
         on the screen. Be sure to arrange your child elements in
         the order you want them to transition into view. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

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

Ниже приведена демонстрация этой анимации:

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

<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
                    
            <!-- Without this, there would be no animation when items 
                 are removed. -->
            <RepositionThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- All these rectangles are just to demonstrate how the items
         in the grid re-flow into position when one of the child items
         are removed. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    if (rectangleItems.Items.Count > 0)
    {    
        rectangleItems.Items.RemoveAt(0);
    }                         
}

Можно применить несколько анимаций перехода к одному объекту или контейнеру объектов. Например, если вы хотите, чтобы список прямоугольников анимировался при появлении и также анимировался при изменении его положения, можно применить RepositionThemeTransition и EntranceThemeTransition следующим образом:

...
<ItemsControl.ItemContainerTransitions>
    <TransitionCollection>
        <EntranceThemeTransition/>                    
        <RepositionThemeTransition/>
    </TransitionCollection>
</ItemsControl.ItemContainerTransitions>
...      

Существует несколько эффектов перехода для создания анимаций в элементах пользовательского интерфейса при их добавлении, удалении, переупорядочении и т. д. Имена этих API содержат "ThemeTransition":

Примеры анимации темы

Анимации перехода просты в применении. Но вам может потребоваться немного больше контроля над временем и порядком эффектов анимации. Вы можете использовать темы анимации, чтобы обеспечить больший контроль, при сохранении согласованной темы поведения анимации. Анимации тем также требуют меньше разметки, чем пользовательские анимации. Здесь мы используем FadeOutThemeAnimation, чтобы прямоугольник исчез из вида.

<StackPanel>    
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <FadeOutThemeAnimation TargetName="myRectangle" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle PointerPressed="Rectangle_Tapped" x:Name="myRectangle"  
              Fill="Blue" Width="200" Height="300"/>
</StackPanel>

// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

В отличие от анимаций перехода, анимация темы не имеет встроенного триггера (переход), который запускает его автоматически. При определении анимации темы в XAML необходимо использовать Storyboard. Вы также можете изменить поведение анимации по умолчанию. Например, можно замедлить исчезание, увеличив значение времени Duration в FadeOutThemeAnimation.

Для создания анимационных эффектов можно применить к элементам пользовательского интерфейса несколько различных анимаций. Имена этих API содержат "ThemeAnimation":

Создание собственных анимаций

Если анимации темы недостаточно для ваших потребностей, вы можете создать собственные анимации. Вы создаете анимацию объектов, изменяя одно или несколько значений их свойств. Например, можно анимировать ширину прямоугольника, угол RotateTransform или значение цвета кнопки. Мы называем этот тип пользовательской анимации раскадровочной анимацией, чтобы отличить ее от анимаций библиотеки, которые среда выполнения Windows уже предоставляет как предварительно настроенный тип анимации. Для анимаций с раскадровкой используется анимация, которая может изменять значения определенного типа (например, DoubleAnimation для анимации Double) и она помещается в Storyboard для управления.

Чтобы быть анимированным, свойство, которое вы анимируете, должно быть свойством зависимости. Дополнительные сведения о свойствах зависимостей см. в обзоре свойств зависимостей. Дополнительные сведения о создании пользовательских раскадровок анимаций, в том числе о том, как нацеливать и управлять ими, см. в разделе «Раскадровки анимаций».

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