Анимации в XAML

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Отцветание и перекрестная перекрестная

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

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

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

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

Переместить

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

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

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

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

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

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

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

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

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

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

Перетаскивание

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

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

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

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

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

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

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

<!-- 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);
    }                         
}

// .h
private:
void RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

//.cpp
void BlankPage::RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    if (rectangleItems->Items->Size > 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();
}

' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As PointerRoutedEventArgs)
    myStoryboard.Begin()
End Sub

//.h
void Rectangle_Tapped(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e);

//.cpp
void BlankPage::Rectangle_Tapped(Object^ sender, PointerRoutedEventArgs^ e)
{
    myStoryboard->Begin();
}

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

Примечание. Для отображения основных методов анимации мы используем код приложения для запуска анимации путем вызова методов Раскадровки. Вы можете управлять тем, как анимации раскадровки выполняются с помощью методов Begin, Stop, Pause и Resume Storyboard. Однако обычно это не так, как вы включаете анимацию библиотеки в приложения. Скорее, анимации библиотеки обычно интегрируются в стили и шаблоны XAML, применяемые к элементам управления или элементам. Узнайте о шаблонах и визуальных состояниях немного больше. Но мы рассмотрим, как использовать анимацию библиотеки в визуальных состояниях в рамках раскадровки анимаций для раздела визуальных состояний .

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

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

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

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

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