Раскадровки анимаций

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

Различия с Silverlight и WPF

Если вы знакомы с Microsoft Silverlight или Windows Presentation Foundation (WPF), ознакомьтесь с этим разделом; в противном случае можно пропустить его.

Как правило, создание анимаций с помощью раскадровки в приложении на платформе Windows Runtime похоже на создание анимаций в среде Silverlight или WPF. Но есть ряд важных различий:

• Анимации с раскадровкой — это не единственный способ визуальной анимации пользовательского интерфейса, и не обязательно они являются самым простым способом для разработчиков приложений. Вместо использования раскадровки анимаций часто лучше использовать анимации тем и анимации переходов. Они могут быстро создавать рекомендуемые анимации пользовательского интерфейса, не разбираясь в сложностях настройки свойств анимации. Дополнительные сведения см. в разделе "Анимация".
• В среде выполнения Windows многие элементы управления XAML включают тематические анимации и анимации переходов как часть их встроенного поведения. В большинстве случаев элементы управления WPF и Silverlight не имеют поведения анимации по умолчанию.
• Не все пользовательские анимации, создаваемые по умолчанию, могут выполняться в приложении среды выполнения Windows, если система анимации определяет, что анимация может привести к плохой производительности в пользовательском интерфейсе. Анимации, в которых система определяет, может быть влияние на производительность, называются зависимыми анимациями. Это зависит от того, что синхронизация вашей анимации работает непосредственно против потока пользовательского интерфейса, где также происходит активный ввод пользователя и другие обновления пытаются применить изменения во время выполнения к пользовательскому интерфейсу. Отдельная анимация, которая потребляет значительные системные ресурсы на потоке пользовательского интерфейса, может сделать приложение неотзывчивым в определённых ситуациях. Если ваша анимация приводит к изменению макета или может повлиять на производительность интерфейса пользователя, часто необходимо явно включить анимацию, чтобы наблюдать её выполнение. Вот для чего предназначено свойство EnableDependentAnimation для определенных классов анимации. Подробнее см. в зависимых и независимых анимациях.
• Пользовательские функции упрощения в настоящее время не поддерживаются в среде выполнения Windows.

Определение раскадрованных анимаций

Анимированная раскадровка — это способ изменить значение свойства зависимости как функцию времени. Свойство, которое вы анимируете, не всегда является свойством, которое непосредственно влияет на пользовательский интерфейс приложения. Но так как XAML предназначен для определения пользовательского интерфейса для приложения, обычно это свойство, связанное с пользовательским интерфейсом, которое вы анимируете. Например, можно анимировать угол RotateTransform или цвет фона кнопки.

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

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

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

Большую часть времени вы определяете раскадровку анимации, написав XAML. Если вы используете такой инструмент, как Microsoft Visual Studio, он создаст xaml для вас. Можно также определить раскадровку анимации с помощью кода, но это менее распространено.

Рассмотрим простой пример. В этом примере XAML свойство Opacity анимируется для определенного объекта Rectangle .

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>

  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

Определение объекта для анимации

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

Чтобы подключить анимацию к целевому объекту, вы ссылаетесь на целевой объект, определяя его имя программирования. Атрибут x:Name всегда следует применять в определении пользовательского интерфейса XAML для имени объекта, который требуется анимировать. Затем вы нацелитесь на анимируемый объект, установив Storyboard.TargetName в определении анимации. Для значения Storyboard.TargetName используется строка имени целевого объекта, которая устанавливается ранее и в другом месте с атрибутом x:Name.

Назначение свойства зависимостей для анимации

В анимации вы задали значение для Storyboard.TargetProperty. Это определяет, какое конкретное свойство целевого объекта анимировано.

Иногда необходимо обратиться к свойству, которое не является непосредственным свойством целевого объекта, а вложено более глубоко в иерархию свойств объектов. Это часто необходимо сделать, чтобы детализировать набор значений объектов и свойств, пока вы не сможете ссылаться на тип свойства, который может быть анимирован (Double, Point, Color). Эта концепция называется косвенным целевым назначением, а синтаксис для назначения свойства таким образом называется путем свойства.

Вот пример. Одним из распространенных сценариев раскадровки анимации является изменение цвета части пользовательского интерфейса приложения или элемента управления для представления того, что элемент управления находится в определенном состоянии. Предположим, что вы хотите анимировать Foreground в TextBlock, чтобы он изменяется из красного в зеленый. Вы бы ожидали, что используется ColorAnimation , и это правильно. Однако ни один из свойств элементов пользовательского интерфейса, влияющих на цвет объекта, фактически не имеет типа Color. Вместо этого они имеют тип Brush. Поэтому для анимации необходимо использовать свойство Color класса SolidColorBrush, которое является типом, производным от Brush, используемым для этих свойств пользовательского интерфейса, связанных с цветом. И вот как это выглядит с точки зрения формирования пути свойства для целевого свойства анимации:

<Storyboard x:Name="myStoryboard">
  <ColorAnimation
    Storyboard.TargetName="tb1"
    Storyboard.TargetProperty="(TextBlock.Foreground).(SolidColorBrush.Color)"
    From="Red" To="Green"/>
</Storyboard>

Вот как подумать об этом синтаксисе с точки зрения его частей:

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

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

• Анимация X значения в TranslateTransform, применённого к RenderTransform: (UIElement.RenderTransform).(TranslateTransform.X)
• Анимация цвета в GradientStop в LinearGradientBrush, как применено к заливке: (Shape.Fill).(GradientBrush.GradientStops)[0].(GradientStop.Color)
• Анимация значения XTranslateTransform, которое является одним из четырех преобразований в TransformGroup, применяемое к RenderTransform:(UIElement.RenderTransform).(TransformGroup.Children)[3].(TranslateTransform.X)

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

Кроме того, можно анимировать присоединенные свойства XAML. Всегда заключайте полное имя присоединенного свойства в скобки, например (Canvas.Left). Дополнительные сведения см. в разделе "Анимация присоединенных свойств XAML".

Дополнительные сведения о том, как использовать путь к свойству для косвенного указания на свойство, предназначенное для анимации, см. в разделе "Синтаксис пути свойства" или присоединенное свойство Storyboard.TargetProperty.

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

Система анимации Windows Runtime имеет три конкретных типа, к которым могут применяться анимации с раскадровкой.

• Double, можно анимировать с помощью любой DoubleAnimation
• Point, можно анимировать с помощью любой PointAnimation
• Цвет, можно анимировать с помощью любой colorAnimation

Существует также обобщенный тип анимации объекта для ссылочных значений объектов, которые мы обсудим позже.

Указание анимированных значений

До сих пор мы показали, как выбрать объект и свойство для анимации, но еще не описали, что происходит со значением свойства в ходе анимации.

Описанные типы анимации иногда называются From/To/By анимациями. Это означает, что анимация изменяет значение свойства со временем, используя один или несколько этих входных данных, поступающих из определения анимации:

• Значение начинается со значения From . Если вы не указываете значение From , начальное значение является любым значением анимированного свойства в то время перед запуском анимации. Это может быть значение по умолчанию, значение из стиля или шаблона или значения, конкретно применяемого определением пользовательского интерфейса XAML или кодом приложения.
• В конце анимации значение — значение To .
• Или, чтобы указать конечное значение относительно начального значения, задайте свойство By . Вы бы установили это вместо свойства To.
• Если значение to или by не задано, конечное значение является любым значением анимированного свойства в то время перед запуском анимации. В этом случае лучше иметь значение From , так как в противном случае анимация не изменит значение вообще; его начальные и конечные значения одинаковы.
• Анимация обычно имеет по крайней мере один из от, by или To , но никогда не все три.

Давайте вернемся к предыдущему примеру XAML и снова рассмотрим значения from и To , а также длительность. В примере выполняется анимация свойства Opacity , а тип свойства Opacity — Double. Поэтому анимация, используемая здесь, — DoubleAnimation.

From="1.0" To="0.0" указывает, что при выполнении анимации свойство Opacity начинается со значения 1 и анимирует значение 0. Другими словами, с точки зрения того, что эти Double значения означают для свойства Opacity, эта анимация приведет к тому, что объект станет сначала непрозрачным, а затем исчезнет.

...
<Storyboard x:Name="myStoryboard">
  <DoubleAnimation
    Storyboard.TargetName="MyAnimatedRectangle"
    Storyboard.TargetProperty="Opacity"
    From="1.0" To="0.0" Duration="0:0:1"/>
</Storyboard>
...

Duration="0:0:1" указывает, сколько времени длится анимация, т. е. насколько быстро прямоугольник исчезает. Свойство Duration указывается в виде часов:минут:секунд. Длительность времени в этом примере составляет одну секунду.

Дополнительные сведения о значениях длительности и синтаксисе XAML см. в разделе "Длительность".

From/To/By могут иметь значение NULL

Ранее упоминалось, что можно опустить From, To или By и таким образом использовать текущие неанимированные значения вместо отсутствующего значения. Свойства анимации "From", "To" или "By" не относятся к тем типам, которые вы могли бы ожидать. Например, тип свойства DoubleAnimation.To не является двойным. Вместо этого используется Nullable для типа Double. Значение по умолчанию равно null, а не 0. Это значение null используется системой анимации, чтобы определить, что вы не задали конкретное значение для свойства From, To или By. Расширения компонентов Visual C++ (C++/CX) не имеют типа NULL , поэтому вместо этого используется IReference .

Другие свойства анимации

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

AutoReverse

Если в анимации не указан параметр AutoReverse или RepeatBehavior , анимация будет выполняться один раз и выполняться в течение указанного времени в качестве длительности.

Свойство AutoReverse указывает, воспроизводится ли временная шкала в обратном направлении после окончания ее длительности. Если задано значение true, анимация изменится после окончания объявленной длительности, изменив значение с конечного значения (To) обратно на начальное значение (From). Это означает, что анимация эффективно выполняется в два раза дольше ее длительности.

RepeatBehavior

Свойство RepeatBehavior указывает, сколько раз воспроизводится временная шкала, или длительность, в течение которой временная шкала должна повторяться. По умолчанию временная шкала имеет количество итераций "1x", что означает, что она воспроизводится один раз в течение своей длительности и не повторяется.

Вы можете настроить анимацию на выполнение нескольких итераций. Например, значение "3x" приводит к тому, что анимация выполняется три раза. Кроме того, можно указать другую длительность для RepeatBehavior. Эта длительность должна быть длиннее, чем длительность самой анимации, чтобы быть эффективной. Например, если указать RepeatBehavior "0:0:10", для анимации с длительностью "0:0:2", анимация повторяется пять раз. Если они не делятся поровну, анимация будет прервана в тот момент, когда будет достигнуто время RepeatBehavior, что может произойти на середине. Наконец, можно указать специальное значение "Forever", которое приводит к бесконечному выполнению анимации, пока она не будет намеренно остановлена.

Дополнительные сведения о значениях RepeatBehavior и синтаксисе XAML см. в разделе RepeatBehavior.

FillBehavior="Stop"

По умолчанию, когда анимация заканчивается, она оставляет значение свойства, как окончательное измененное значение To или By, даже после того, как превышена ее длительность. Однако если для свойства FillBehavior задано значение FillBehavior.Stop, значение анимированного значения возвращается к значению, заданному до применения анимации, или точнее к текущему эффективному значению, определенному системой свойств зависимостей (дополнительные сведения об этом различии см. в обзоре свойств зависимостей).

ВремяНачала

По умолчанию значение BeginTime анимации — "0:0:0", поэтому она начинается одновременно с запуском Storyboard. Вы можете изменить это, если Storyboard содержит несколько анимаций, и вы хотите разнести по времени начало остальных анимаций относительно начальной анимации, или чтобы создать намеренную небольшую задержку.

SpeedRatio

Если у вас в Storyboard несколько анимаций, вы можете изменить скорость времени одной или нескольких анимаций относительно Storyboard. Это родительский Storyboard, который в конечном счете контролирует, как проходит продолжительность во время выполнения анимаций. Это свойство не используется очень часто. Дополнительные сведения см. в разделе SpeedRatio.

Определение нескольких анимаций в Storyboard

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

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

При запуске родительского Storyboard все анимации в нём будут выполняться также.

Класс Storyboard на самом деле обладает множеством таких же свойств анимации, что и типы анимации, поскольку оба используют базовый класс Timeline. Таким образом, Storyboard может иметь RepeatBehavior или BeginTime. Обычно их не устанавливают на Storyboard, если не требуется, чтобы это поведение имели все анимации в ней. Как правило, любое свойство Временной шкалы, заданное в Storyboard, применяется ко всем его дочерним анимациям. Если оставить без изменений, раскадровка имеет неявную длительность, которая вычисляется на основе самого длинного значения длительности содержащихся анимаций. Явно заданная длительность в сценарии, которая короче одной из его дочерних анимаций, приведет к тому, что анимация будет обрезана, что обычно нежелательно.

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

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

Определение раскадровки как ресурса

Раскадровка — это контейнер, в который вы помещаете объекты анимации. Обычно Storyboard определяется как ресурс, доступный для объекта, который вы хотите анимировать, в ресурсах уровня страницы или Application.Resources.

В следующем примере показано, как предыдущий пример Storyboard будет содержаться в определении Resources на уровне страницы, где Storyboard является ключевым ресурсом корневой Page. Обратите внимание на атрибут x:Name. Этот атрибут позволяет задать имя переменной для Storyboard, чтобы другие элементы в XAML, а также код, могли ссылаться на Storyboard позже.

<Page ...>
  <Page.Resources>
    <!-- Storyboard resource: Animates a rectangle's opacity. -->
    <Storyboard x:Name="myStoryboard">
      <DoubleAnimation
        Storyboard.TargetName="MyAnimatedRectangle"
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:1"/>
    </Storyboard>
  </Page.Resources>
  <!--Page root element, UI definition-->
  <Grid>
    <Rectangle x:Name="MyAnimatedRectangle"
      Width="300" Height="200" Fill="Blue"/>
  </Grid>
</Page>

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

Раскадровки для визуальных состояний

Вы также помещаете анимации в блок Storyboard, когда объявляете анимации визуального состояния для визуального облика элемента управления. В этом случае элементы Storyboard, которые вы определяете, переходят в контейнер VisualState, вложенный более глубоко в Style (это Style, который является ключом ресурса). В этом случае вам не нужен ключ или имя для вашего Storyboard, так как это VisualState с целевым именем, который может вызвать VisualStateManager. Стили для элементов управления часто разделяются на отдельные файлы ResourceDictionary XAML, а не помещаются в коллекцию Ресурсов страницы или приложения. Для получения дополнительной информации см. в разделе анимированные раскадровки для визуальных состояний.

Зависимые и независимые анимации

На этом этапе мы должны ввести некоторые важные моменты о том, как работает система анимации. В частности, анимация непосредственно взаимодействует с тем, как приложение среды выполнения Windows выводится на экран, и как эта отрисовка использует потоки обработки. Приложение среды выполнения Windows всегда имеет основной поток пользовательского интерфейса, и этот поток отвечает за обновление экрана с текущей информацией. Кроме того, приложение среды выполнения Windows имеет поток композиции, который используется для предварительного вычисления макетов непосредственно перед отображением. При анимации пользовательского интерфейса поток пользовательского интерфейса может быть перегружен работой. Система должна перераскрыть большие области экрана, используя довольно короткие интервалы времени между каждым обновлением. Это необходимо для записи последнего значения свойства анимированного свойства. Если вы не осторожны, есть риск того, что анимация может сделать пользовательский интерфейс менее адаптивным или повлиять на производительность других функций приложения, которые также находятся в одном потоке пользовательского интерфейса.

Тип анимации, который может представлять некоторый риск замедления потока пользовательского интерфейса, называется зависимой анимацией. Анимация, не подверженная этому риску, является независимой анимацией. Различие между зависимыми и независимыми анимациями не только определяется типами анимации (DoubleAnimation и т. д.), как описано ранее. Вместо этого это определяется тем, какие конкретные свойства вы анимируете, и другими факторами, такими как наследование и композиция элементов управления. Существуют ситуации, когда даже если анимация изменяет пользовательский интерфейс, анимация может оказать минимальное влияние на поток пользовательского интерфейса и вместо этого может обрабатываться потоком композиции как независимая анимация.

Анимация является независимой, если она имеет какие-либо из следующих характеристик:

• Длительность анимации составляет 0 секунд (см. предупреждение)
• Анимация предназначена для UIElement.Opacity
• Анимация нацелена на значение подсвойства этих UIElement свойств: Transform3D, RenderTransform, Projection, Clip
• Анимация предназначена для Canvas.Left или Canvas.Top
• Анимация применяется к значению Кисти и использует SolidColorBrush, анимируя её цвет
• Анимация — ObjectAnimationUsingKeyFrames

<Storyboard>
  <DoubleAnimationUsingKeyFrames
    Duration="0"
    Storyboard.TargetName="Button2"
    Storyboard.TargetProperty="Width">
    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="200"/>
  </DoubleAnimationUsingKeyFrames>
</Storyboard>

Если анимация не соответствует этим критериям, это, вероятно, зависимая анимация. По умолчанию система анимации не будет запускать зависимые анимации. Таким образом, в процессе разработки и тестирования вы можете даже не увидеть, как работает анимация. Вы по-прежнему можете использовать эту анимацию, но необходимо по отдельности включить каждую зависимую анимацию. Чтобы включить анимацию, задайте для свойства EnableDependentAnimation объекта анимации значение true. (Каждый подкласс временной шкалы , представляющий анимацию, имеет другую реализацию свойства, но все они называются EnableDependentAnimation.)

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

Разработчик приложений также может применять параметр на уровне приложения, который всегда отключает зависимые анимации, даже те, где EnableDependentAnimationимеет значение true. Смотрите Timeline.AllowDependentAnimations.

Запуск и управление анимацией

Все, что мы показали вам до настоящего момента, на самом деле не приводит к запуску анимации или её применению! До тех пор, пока анимация не будет запущена и работать, изменения значений, которые анимация объявляет в XAML, остаются латентными и еще не вступают в силу. Необходимо явно запустить анимацию каким-то образом, связанную с временем существования приложения или взаимодействием с пользователем. На самом простом уровне анимация запускается путем вызова метода Begin на раскадровке , который является родительским для этой анимации. Вы не можете вызывать методы из XAML напрямую, поэтому все, что вы делаете, чтобы включить анимацию, вы будете делать это из кода. Это будет либо код позади страниц или компонентов приложения, либо логика элемента управления, если вы определяете пользовательский класс элемента управления.

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

При вызове Begin на раскадровке, содержащей анимацию, которая повторяется бесконечно (RepeatBehavior="Forever"), эта анимация выполняется до тех пор, пока страница, содержащая ее, не выгружается или вызывается специально приостанавливать или остановить.

Запуск анимации из кода приложения

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

В этом примере событие PointerPressed присоединено к прямоугольнику, чтобы, когда пользователь щелкнул прямоугольник, начинается анимация.

<Rectangle PointerPressed="Rectangle_Tapped"
  x:Name="MyAnimatedRectangle"
  Width="300" Height="200" Fill="Blue"/>

Обработчик событий запускает Storyboard (анимацию) с помощью метода BeginStoryboard.

myStoryboard.Begin();

myStoryboard().Begin();

myStoryboard->Begin();

myStoryBoard.Begin()

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

Анимация для визуальных состояний

Поведение выполнения для Storyboard, используемого для определения визуального состояния элемента управления, отличается от того, как приложение может запускать Storyboard напрямую. Как в XAML применяется определение визуального состояния, Storyboard является элементом содержащего VisualState, при этом состояние в целом управляется с помощью API VisualStateManager. Все анимации в пределах будут выполняться в соответствии со своими значениями анимации и свойствами временной шкалы при использовании элемента управления, содержащего VisualState . Для дополнительной информации см. в разделе Сценарные блоки для визуальных состояний. Для визуальных состояний видимый FillBehavior отличается. Если визуальное состояние изменяется на другое состояние, все изменения свойств, примененные предыдущим визуальным состоянием и его анимацией, отменяются, даже если новое визуальное состояние не применяет новую анимацию к свойству.

Storyboard и EventTrigger

Существует один из способов запуска анимации, которая может быть объявлена полностью в XAML. Однако этот метод больше не используется. Это устаревший синтаксис из WPF и ранних версий Silverlight до поддержки VisualStateManager . Этот синтаксис EventTrigger по-прежнему работает в XAML среды выполнения Windows для причин импорта и совместимости, но работает только для поведения триггера на основе события FrameworkElement.Loaded ; При попытке активировать другие события будут возникать исключения или не компилироваться. Дополнительные сведения см. в разделе EventTrigger или BeginStoryboard.

Анимация присоединенных свойств XAML

Это не распространенный сценарий, но вы можете применить анимированное значение к присоединенному свойству XAML. Дополнительные сведения о присоединенных свойствах и их работе см. в обзоре присоединенных свойств. Для использования присоединенного свойства требуется синтаксис пути к свойству, который заключает имя свойства в круглые скобки. Встроенные свойства, такие как Canvas.ZIndex , можно анимировать с помощью объекта ObjectAnimationUsingKeyFrames , который применяет дискретные целые значения. Однако существующее ограничение реализации XAML среды выполнения Windows заключается в том, что нельзя анимировать пользовательское привязанное свойство.

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

До сих пор мы показывали пользовательские анимации, которые изменяются между двумя значениями, линейно интерполируя эти значения по мере необходимости во время выполнения анимации. Они называются анимациями From/To/By. Но есть другой тип анимации, позволяющий задавать промежуточные значения, которые находятся между началом и концом. Это называется анимацией с ключевым кадром. Существует также способ изменить логику интерполяции как в анимации From/To/By, так и в анимации с помощью ключевых кадров. Это включает применение функции упрощения. Дополнительные сведения об этих понятиях см. в разделе "Ключевые кадры" и анимации функций с упрощенной функцией.

Связанные темы

• Синтаксис пути к свойству
• Общие сведения о свойствах зависимостей
• Анимации ключевых кадров и анимаций с упрощенной функцией
• Анимации по раскадровке для визуальных состояний
• Шаблоны элементов управления
• Раскадровка
• Storyboard.TargetProperty