Стандартные анимации и переходы в WinRT

WinRT --- Стандартные анимации и переходы

Ранее я говорил, что пространство имен Windows.UI.Xaml.Media.Animation содержит 71 класс, но если вы вели счет, то, скорее всего, еще не дошли до этой величины.

Кроме классов, упоминавшихся ранее, пространство имен также содержит 14 предопределенных анимаций, производных от Timeline и заканчивающихся суффиксом ThemeAnimation. У этих анимаций уже заданы все свойства и назначены целевые свойства, а нужен только целевой объект, задаваемый свойством TargetName. Для экспериментов с этими предопределенными анимациями я создал программу, в которой 12 таких анимаций (исключая SplitOpenThemeAnimation и SplitCloseThemeAnimation, которые не вписываются в схему этой программы) связываются с объектами Storyboard, а свойству TargetName задается элемент с именем «button»:

<Page ...>

    <Page.Resources>
        <Style TargetType="Button">
            <Setter Property="Margin" Value="0 6" />
        </Style>

        <Storyboard x:Key="fadeIn">
            <FadeInThemeAnimation TargetName="button" />
        </Storyboard>

        <Storyboard x:Key="fadeOut">
            <FadeOutThemeAnimation TargetName="button" />
        </Storyboard>

        <Storyboard x:Key="popIn">
            <PopInThemeAnimation TargetName="button" />
        </Storyboard>

        <Storyboard x:Key="popOut">
            <PopOutThemeAnimation TargetName="button" />
        </Storyboard>

        <Storyboard x:Key="reposition">
            <RepositionThemeAnimation TargetName="button" />
        </Storyboard>

        <Storyboard x:Key="pointerUp">
            <PointerUpThemeAnimation TargetName="button" />
        </Storyboard>

        <Storyboard x:Key="pointerDown">
            <PointerDownThemeAnimation TargetName="button" />
        </Storyboard>

        <Storyboard x:Key="swipeBack">
            <SwipeBackThemeAnimation TargetName="button" />
        </Storyboard>

        <Storyboard x:Key="swipeHint">
            <SwipeHintThemeAnimation TargetName="button" />
        </Storyboard>

        <Storyboard x:Key="dragItem">
            <DragItemThemeAnimation TargetName="button" />
        </Storyboard>

        <Storyboard x:Key="dropTargetItem">
            <DropTargetItemThemeAnimation TargetName="button" />
        </Storyboard>

        <Storyboard x:Key="dragOver">
            <DragOverThemeAnimation TargetName="button" />
        </Storyboard>
    </Page.Resources>

    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="Auto" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>

        <StackPanel Name="animationTriggersStackPanel"
                    Grid.Column="0"
                    VerticalAlignment="Center">

            <Button Content="Fade In"
                    Tag="fadeIn" 
                    Click="Button_Click" />

            <Button Content="Fade Out"
                    Tag="fadeOut" 
                    Click="Button_Click" />

            <Button Content="Pop In"
                    Tag="popIn" 
                    Click="Button_Click" />

            <Button Content="Pop Out"
                    Tag="popOut" 
                    Click="Button_Click" />

            <Button Content="Reposition"
                    Tag="reposition" 
                    Click="Button_Click" />

            <Button Content="Pointer Up"
                    Tag="pointerUp" 
                    Click="Button_Click" />

            <Button Content="Pointer Down"
                    Tag="pointerDown" 
                    Click="Button_Click" />

            <Button Content="Swipe Back"
                    Tag="swipeBack" 
                    Click="Button_Click" />

            <Button Content="Swipe Hint"
                    Tag="swipeHint" 
                    Click="Button_Click" />

            <Button Content="Drag Item"
                    Tag="dragItem" 
                    Click="Button_Click" />

            <Button Content="Drop Target Item"
                    Tag="dropTargetItem" 
                    Click="Button_Click" />

            <Button Content="Drag Over"
                    Tag="dragOver" 
                    Click="Button_Click" />
        </StackPanel>

        <!-- Цель анимации -->
        <Button Name="button"
                Grid.Column="1"
                Content="Большая кнопка"
                FontSize="48"
                HorizontalAlignment="Center"
                VerticalAlignment="Center" />
    </Grid>

</Page>

Под элементом управления Button с именем «button» файл XAML также определяет элемент управления Button для каждой из предопределенной анимации. Файл фонового кода использует свойство Tag для инициирования соответствующего объекта Storyboard:

using Windows.UI.Xaml;
using Windows.UI.Xaml.Controls;
using Windows.UI.Xaml.Media.Animation;

namespace WinRTTestApp
{
    public sealed partial class MainPage : Page
    {
        public MainPage()
        {
            this.InitializeComponent();
        }

        private void Button_Click(object sender, RoutedEventArgs e)
        {
            Button button = sender as Button;
            string key = button.Tag as string;
            Storyboard storyboard = this.Resources[key] as Storyboard;
            storyboard.Begin();
        }
    }
}

Будьте внимательны! От одних анимаций целевой объект Button будет исчезать, другие почти незаметны, но вы получите представление о том, какие эффекты можно реализовать в ваших приложениях при помощи анимаций.

Еще одна группа предопределенных анимаций состоит из восьми классов, производных от Transition. Это относительно сложные наборы анимаций, которые можно задать одному из следующих свойств типа TransitionCollection:

Свойство Transitions, определяемое классом UIElement.
Свойство ContentTransitions, определяемое классом ContentControl.
Свойство ChildrenTransitions, определяемое классом Panel.
Свойство ItemContainerTransitions, определяемое классом ItemsControl.

Например, попробуйте заменить тег StackPanel в программе следующим фрагментом:

<StackPanel Name="animationTriggersStackPanel"
            Grid.Column="0"
            VerticalAlignment="Center">
            
    <StackPanel.ChildrenTransitions>
        <TransitionCollection>
            <EntranceThemeTransition />
        </TransitionCollection>
    </StackPanel.ChildrenTransitions>

     ...
     
</StackPanel>

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