XamlFlair

Xamlflair

Цель библиотеки Xamlflair состоит в том, чтобы облегчить реализацию общих анимаций и позволить разработчику легко добавить один или комбинированный набор анимаций с несколькими линиями XAML.

Витрина

Sekuence Puzzle Game

Поддерживаю меня

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

Содержимое

• Установите из Nuget

• Обзор функций

• Основные понятия

• Использование

• Базовые типы анимации

• Цветная анимация ( только WPF и Uno )

• Переопределение глобальных значений по умолчанию

• Использование ResourceDictionary для базовых настроек

• Анимация по умолчанию ( только WPF )

• Свойство TransformOn ( только WPF )

• Перспективные ротации ( только UWP )

• Объединение анимаций

• Переходящие значения

• Относительные переводы на оси x и y

• Сложные анимации

• Повторяя анимацию

• События

• Привязки

• Первичные и вторичные команды завершения

• Использование свойства StartWith

• Использование свойства AllowOpacityReset ( только WPF )

• Использование свойства ClipToBounds ( только UWP и UNO )

• Отладка анимации

• Регистрация анимации

• ListViewBase ( UWP и Uno ) и анимация на основе ListBox ( WPF )

Установите из Nuget

Платформа	Упаковка	Nuget
UWP	Xamlflair.uwp
WPF	Xamlflair.wpf
Ун	Xamlflair.uno

Чтобы установить Xamlflair , запустите следующую команду в консоли диспетчера пакетов :

UWP:

 Install-Package XamlFlair.UWP

Ваше приложение должно быть нацелено на минимум Windows 10 версии 1809 (Build 17763)

WPF:

 Install-Package XamlFlair.WPF

Uno:

 Install-Package XamlFlair.Uno

Ваше приложение UWP должно быть нацелено на минимум Windows 10 версии 1809 (сборка 18362)

Обзор функций

Особенность	UWP	WPF	UWP (Uno)	iOS (Uno)	Android (Uno)	WASM (UNO) экспериментальный
Анимационная система	Композиция	Раскадровки	Раскадровки	Раскадровки	Раскадровки	Раскадровки
Тип преобразования	N/a	Transformgroup	Compositetransform	Compositetransform	Compositetransform	Compositetransform
DefaultAnimations.xaml	-	✔	-	-	-	-
TransformOn	-	✔	-	-	-	-
Сложные анимации	✔	✔	✔	✔	✔	✔
Относительные переводы	✔	✔	✔	✔	✔	✔
Повторяя анимацию	✔	✔	✔	✔	✔	✔
События и привязки	✔	✔	✔	✔	✔	✔
Первичные/вторичные команды завершения	✔	✔	✔	✔	✔	✔
StartWith	✔	✔	✔	✔	✔	✔
AllowOpacityReset	-	✔	-	-	-	-
ClipToBounds	✔	N/a	✔	✔	✔	✔
Анимированные списки	✔	✔	✔	✔	✔	✔
Эффект размытия	✔	✔	-	-	-	-
Эффект насыщения	✔	-	-	-	-	-
Эффект оттенка	✔	-	-	-	-	-
Цвет анимации	-	✔	✔	✔	✔	✔
Перспективные ротации (поворотные)	✔	-	-	-	-	-
Отладка анимации	✔	✔	✔	✔	✔	-

Основные понятия

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

Пример от анимации (элемент пользовательского интерфейса, переведенный в значение по умолчанию перевода (0)):

Пример анимации (элемент пользовательского интерфейса, отключенного от его текущего состояния):

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

Использование

Для начала вам необходимо иметь следующую ссылку на пространство имен XAML:

UWP и Uno:

xmlns:xf="using:XamlFlair"

WPF:

xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"

С этого момента это простой вопрос установки прикрепленного свойства для любого FrameworkElement , который нуждается в анимации:

< Border xf:Animations.Primary= " {StaticResource FadeIn} " />

ПРИМЕЧАНИЕ . Если ваш FrameworkElement определяет CompositeTransform в вашем XAML, он будет изменен в процессе анимации.

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

Базовые типы анимации

Тускнеть

Предупреждение : Будьте осторожны при анимации FadeTo , так как элемент остается в визуальном дереве, если Visibility Visible . Могут быть случаи, когда вам нужно будет вручную управлять IsHitTestVisible , чтобы позволить пользователю пройти через элемент.

Переводить

Шкала

Повернуть

Размытие ( только UWP и WPF )

Насыщенность ( только UWP )

Оттенок ( только UWP )

Цвет ( только WPF и Uno )

ПРИМЕЧАНИЕ . Важно отметить, что при анимировании цвета с использованием анимации цвет будет оживлять от указанного значения до его текущего состояния вместо значения по умолчанию.

Поворот ( только UWP )

ПРИМЕЧАНИЕ . Прочитайте разделение перспективы ротации ( только UWP ) для получения дополнительной информации.

В следующем перечислены некоторые заметные значения по умолчанию при работе с Xamlflair:

• ВИДЕ : FADETO
• Продолжительность ( миллисекунд ): 500
• Ослабление : кубический
• Режим смягчения : easyout
• TransformCenterPoint : (0,5, 0,5)
• Событие : загружено
• InterirementDelay ( миллисекунды ): 25 ( только в списке управления )
• Transformon : рендеринг ( только WPF )
• Насыщение : 0,5 ( только UWP )
• Оттенок : прозрачный ( только UWP )

Цветная анимация ( только WPF и Uno )

Цветная анимация требует некоторого внимания, поскольку они немного отличаются от других анимаций базового типа. При использовании ColorTo и ColorFrom , необходимо сделать следующее:

• Вы Shape.Stroke оживить только Control.BorderBrush Border.Background Border.BorderBrush Control.Background TextBlock.Foreground Control.Foreground Shape.Fill
• Обязательно установите кисть на соответствующее свойство, которое вы намереваетесь анимировать
• Вы также должны указать целевое свойство с помощью ColorOn

Следующий пример будет оживить Fill прямоугольника от Royalblue до Darkgreen:

< xf : AnimationSettings x : Key = " SampleColorAnimation "
                      Kind = " ColorTo "
                      Color = " DarkGreen "
                      ColorOn = " Fill " />

< Rectangle Fill = " RoyalBlue "
           xf:Animations.Primary= " {StaticResource SampleColorAnimation} " />

Переопределение глобальных значений по умолчанию

Если вам необходимо глобально изменить одно из значений анимации по умолчанию (например, с Duration по умолчанию 750 вместо 500), вы можете вызвать функцию OverrideDefaultSettings в коде инициализации вашего приложения. Следующий пример изменяет значения по умолчанию для Duration и Easing :

 XamlFlair . Animations . OverrideDefaultSettings (
    duration : 750 ,
    easing : EasingType . Quadratic ) ;

Поэтому, с примером кода выше, каждая анимация будет работать на 750 мс с квадратичным смягчением.

Использование ResourceDictionary для базовых настроек

Все общие анимации должны быть помещены в глобальный ResourceDictionary (Ex: Animations.xaml ) и использовать там, где это необходимо во время приложения. Цель состоит в том, чтобы объединить все анимации в один файл с значимыми именами, чтобы любой разработчик мог точно понять, какая анимация применяется к FrameworkElement . Вот небольшой пример того, как это выглядит:

< ResourceDictionary xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
                    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
                    xmlns : xf = " using:XamlFlair " >

    < x : Double x : Key = " PositiveOffset " >50</ x : Double >
    < x : Double x : Key = " NegativeOffset " >-50</ x : Double >
    < x : Double x : Key = " SmallScaleFactor " >0.75</ x : Double >
    < x : Double x : Key = " LargeScaleFactor " >1.25</ x : Double >

    < xf : AnimationSettings x : Key = " FadeIn "
                          Kind = " FadeFrom "
                          Opacity = " 0 " />

    < xf : AnimationSettings x : Key = " FadeOut "
                          Kind = " FadeTo "
                          Opacity = " 0 " />

    <!-- Scale to a larger value -->
    < xf : AnimationSettings x : Key = " Expand "
                          Kind = " ScaleXTo,ScaleYTo "
                          ScaleX = " {StaticResource LargeScaleFactor} "
                          ScaleY = " {StaticResource LargeScaleFactor} " />

    <!-- Scale from a larger value -->
    < xf : AnimationSettings x : Key = " Contract "
                          Kind = " ScaleXFrom,ScaleYFrom "
                          ScaleX = " {StaticResource LargeScaleFactor} "
                          ScaleY = " {StaticResource LargeScaleFactor} " />
    .
    .
    .
    </ ResourceDictionary >

Для настройки этого набора предварительно сконфигурированных AnimationSettings , уже доступных в вашем приложении, выполните следующие шаги:

1. Щелкните правой кнопкой мыши на своем проекте, затем нажмите «Добавить»> «Новый» ...
2. Выберите Словарь ресурсов и назвать его Animations.xaml
3. В вашем App.xaml добавьте следующее:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < ResourceDictionary Source = " Animations.xaml " />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

4. В Animations.xaml скопируйте и вставьте содержимое по соответствующим ссылкам ниже:

• Настройки анимации для UWP

• Настройки анимации для WPF

• Настройки анимации для Uno

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

Анимация по умолчанию ( только WPF )

В качестве альтернативы, чтобы создать свой собственный ResourceDictionary содержащий ваши пользовательские AnimationSettings , Xamlflair предоставляет некоторые анимации по умолчанию .

Чтобы ссылаться на эти анимации по умолчанию в вашем приложении, выполните следующие шаги в вашем App.xaml :

1. Определите пространство имен XamlFlair.WPF вверху:

    xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF"

2. Обновите ресурсы вашего приложения:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < xf : XamlFlairResources />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

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

Если Visual Studio Intellisense не работает при использовании <xf:XamlFlairResources /> , вы можете вместо этого попробовать следующее:

    < Application .Resources>
        < ResourceDictionary >
            < ResourceDictionary .MergedDictionaries>
                < ResourceDictionary Source = " pack://application:,,,/XamlFlair.WPF;component/DefaultAnimations.xaml " />
            </ ResourceDictionary .MergedDictionaries>
        </ ResourceDictionary >
    </ Application .Resources>

Свойство TransformOn ( только WPF )

Используя свойство TransformOn , вы можете ориентироваться на какой тип RenderTransform , чтобы применить к вашей анимации. Доступные варианты - Render и Layout . Когда ничего не указано, Vale по умолчанию Render . Вот пример двух:

Примечание . Очень важно отметить, что LayoutTransform WPF не поддерживает никаких TranslateTransform , поэтому переводящие анимации никогда не будут работать. Вы можете прочитать больше об этом в разделе замечаний здесь.

Перспективные ротации ( только UWP )

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

< xf : AnimationSettings x : Key = " PerspectiveVerticalRotation "
                      Kind = " SwivelYFrom "
                      SwivelY = " -45 " />

Вместо того, чтобы анимировать элемент как таковой:

< Rectangle Fill = " RoyalBlue "
           Width = " 200 "
           Height = " 200 "
           HorizontalAlignment = " Center "
           VerticalAlignment = " Center "
           xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />

Элемент должен быть помещен в контейнер для правильной работы анимации:

< Border Width = " 200 "
        Height = " 200 "
        HorizontalAlignment = " Center "
        VerticalAlignment = " Center " >
    < Rectangle Fill = " RoyalBlue "
           xf:Animations.Primary= " {StaticResource PerspectiveVerticalRotation} " />
</ Border >

Объединение анимаций

Анимации могут быть объединены, и, как упоминалось ранее, любая из этих комбинированных анимаций, которые обычно используются, должны быть помещены в глобальный ResourceDictionary (Ex: Animations.xaml ):

< ResourceDictionary xmlns = " http://schemas.microsoft.com/winfx/2006/xaml/presentation "
                    xmlns : x = " http://schemas.microsoft.com/winfx/2006/xaml "
                    xmlns : xf = " using:XamlFlair " >
    .
    .
    .
    < xf : AnimationSettings x : Key = " FadeInAndSlideFromLeft "
                          Kind = " FadeFrom,TranslateXFrom "
                          Opacity = " 0 "
                          OffsetX = " {StaticResource NegativeOffset} " />

    < xf : AnimationSettings x : Key = " FadeInAndSlideFromTop "
                          Kind = " FadeFrom,TranslateYFrom "
                          Opacity = " 0 "
                          OffsetY = " {StaticResource NegativeOffset} " />

    < xf : AnimationSettings x : Key = " FadeInAndGrow "
                          Kind = " FadeFrom,ScaleXFrom,ScaleXFrom "
                          Opacity = " 0 "
                          ScaleX = " {StaticResource SmallScaleFactor} "
                          ScaleY = " {StaticResource SmallScaleFactor} " />

    < xf : AnimationSettings x : Key = " FadeInAndGrowHorizontally "
                          Kind = " FadeFrom,ScaleXFrom "
                          Opacity = " 0 "
                          ScaleX = " {StaticResource SmallScaleFactor} " />
    .
    .
    .
    </ ResourceDictionary >

Это демонстрирует комбинированную анимацию FadeFrom и TranslateFrom :

Это демонстрирует комбинированную анимацию FadeFrom , TranslateFrom и ScaleFrom :

Переходящие значения

Анимации могут переопределять свои настройки непосредственно на FrameworkElement . Это обычно делается для изменения значений для задержки и продолжительности, чтобы мы не завышали файл Animations.xaml с повторными ресурсами. Чтобы достичь переоценки, используйте расширение Animate Markup, в сочетании с свойством BasedOn :

< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} " />

Относительные переводы на оси x и y

Поскольку жесткие значения для OffsetX и OffsetY могут ограничиваться (например, в случаях, когда они имели дело с изменяемыми видами), как OffsetX , так и OffsetY Support Star Values:

< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource SlideFromLeft}, OffsetX=1.5*} " />

Звездное значение будет рассчитать смещение на основе текущей ActualWidth и/или ActualHeight значений (и) FrameworkElement , поэтому важно, чтобы элемент выполнил свое Loaded событие. Если ActualWidth и/или ActualHeight , еще не рассчитана, значение смещения будет пытаться основываться на Width и/или Height .

Сложные анимации

Составная анимация-это просто многоэтапная анимация с использованием класса CompoundSettings . Каждая внутренняя анимация выполняется после завершения предыдущего, следовательно, они последовательные анимации:

< xf : CompoundSettings x : Key = " Compound " >
    < xf : CompoundSettings .Sequence>
        < xf : AnimationSettings Kind = " ScaleXTo "
                              ScaleX = " 1.25 "
                              Duration = " 1250 " />
        < xf : AnimationSettings Kind = " ScaleXTo "
                              ScaleX = " 1 "
                              Duration = " 1250 " />
        < xf : AnimationSettings Kind = " RotateTo "
                              Rotation = " 360 "
                              Duration = " 1250 " />
    </ xf : CompoundSettings .Sequence>
</ xf : CompoundSettings >

Примечание . CompoundSettings поддерживают свойство Event , которое обсуждается в более позднем разделе.

Повторяя анимацию

Анимация может быть повторена с использованием IterationBehavior и IterationCount свойств (значения Count по умолчанию и 1 соответственно).

Следующее демонстрирует, как запустить анимацию только 5 раз:

< Border xf:Animations.Primary= " {StaticResource FadeIn} "
        xf:Animations.IterationCount= " 5 " />

Следующее демонстрирует, как запустить анимацию на неопределенный срок:

< Border xf:Animations.Primary= " {StaticResource FadeIn} "
        xf:Animations.IterationBehavior= " Forever " />

Также обратите внимание, что также можно повторить составную анимацию. Например, используя составную анимацию (с именем прогресса ) из предыдущего раздела:

< Border xf:Animations.Primary= " {StaticResource Progress} "
        xf:Animations.IterationCount= " 5 " />

ПРЕДУПРЕЖДЕНИЕ : При использовании повторяющихся анимаций вы не можете установить Secondary анимацию на элемент.

Важно отметить, что все анимации Xamlflair являются анимациями «начало» , другими словами, они начинаются и останавливаются только после завершения (или когда связанный элемент разгружается), за исключением повторяющихся анимаций. Повторяющая анимация может быть остановлена ​​при поставке false значения для свойства PrimaryBinding (привязки рассматриваются в следующем разделе):

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " />

Когда на привязке устанавливается false , текущая итерация анимации будет работать до тех пор, пока она не закончится, а затем повторяющаяся анимация остановится.

События

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

< Button xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=Click} " />

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

• Загружен ( значение по умолчанию )
• Видимость ( триггеры только при видимости == видимо )
• DataContextChanged ( триггеры, когда значение не является нулевым )
• Поэтап
• PointerExit
• Gotfocus
• LOSTFOCUS

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

Другой особый случай - это Visibility . Несмотря на то, что в FrameworkElement не существует VisibilityChanged событий, свойство Visibility рассматривалось как событие, когда значение меняется, поскольку оно может быть полезно для анимирования элемента, когда он становится видимым в пользовательском интерфейсе. Если анимация запускается с помощью Event=Visibility , она будет запускаться только в случае установки значения Visibile .

Привязки

Одним из наиболее важных значений для Event является None , который является значением, используемым для отмены любого триггера анимации на основе событий. При указании None , вам нужно будет вручную запустить свои анимации, используя PrimaryBinding или SecondaryBinding свойства. Эти свойства имеют тип bool и ожидают значения True , чтобы выполнить соответствующую анимацию. Ниже приведен пример запуска анимации, основанной на IsChecked управления флажком:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} " />

Приведенная выше анимация будет выполняться только тогда, когда IsChecked True . Если None не был указан для Event , анимация будет затем выполнять на Loaded и при привязке.

При работе с PrimaryBinding и SecondaryBinding (на основе одного и того же логического значения), он может быть более чистым и проще в использовании CombinedBinding . CombinedBinding просто действует как PrimaryBinding , так и SecondaryBinding вместе. Вместо следующего:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.PrimaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} "
           xf:Animations.SecondaryBinding= " {Binding IsChecked, ElementName=SampleCheckBox, Converter={StaticResource InverseBoolConverter}} "
           xf:Animations.Secondary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=None} "
           xf:Animations.StartWith= " {StaticResource FadeOut} " />

Вы бы использовали его как таковой:

< CheckBox x : Name = " SampleCheckBox "
          IsChecked = " False " />

< Rectangle xf:Animations.CombinedBinding= " {Binding IsChecked, ElementName=SampleCheckBox} "
           xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=None} "
           xf:Animations.Secondary= " {xf:Animate BasedOn={StaticResource FadeOut}, Event=None} "
           xf:Animations.StartWith= " {StaticResource FadeOut} " />

Используя CombinedBinding таким образом, он сохраняет необходимость использования преобразователя для обратного логического значения, которое обрабатывается внутри.

Первичные и вторичные команды завершения

Могут быть сценарии, когда вы можете захотеть выполнить ICommand , когда анимация завершается. В таком случае существуют два свойства: PrimaryCompletionCommand и SecondaryCompletionCommand .

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

< TextBlock Text = " Example of a completion command "
           xf:Animations.Primary= " {StaticResource FadeInAndSlideFromBottom} "
           xf:Animations.PrimaryCompletionCommand= " {x:Bind MyCustomCommand} " />

Использование свойства StartWith

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

< Rectangle xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} "
           xf:Animations.StartWith= " {StaticResource ScaleFromBottom} " />

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

Использование свойства AllowOpacityReset ( только WPF )

В документации .NET указывается следующее:

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

Могут быть случаи, когда вы оживляете непрозрачность, в которой анимация непрозрачности внезапно сбрасывает свою ценность вместо того, чтобы анимировать, или не ведут себя, как вы намерены. В случаях вам может потребоваться установить AllowOpacityReset = False ( значение по умолчанию AllowOpacityReset является True ) для достижения предполагаемого поведения:

< Image xf:Animations.Primary= " {StaticResource FadeInThenFadeOut} "
       xf:Animations.AllowOpacityReset= " False "
       Source = " /Assets/... " />

Использование свойства ClipToBounds ( только UWP и UNO )

Полезное свойство, которое существует в WPF, ClipToBounds - это полезное свойство, которое существует в WPF, но, к сожалению, не в UWP. Следовательно, он был добавлен в Xamlflair из -за простоты его использования и удобства. Чтобы обрезать дочерний содержание до границ содержащегося элемента, просто установите ClipToBounds на True на содержащий элемент:

< Border xf:Layout.ClipToBounds= " True " >
.
.
.
< Border >

Отладка анимации

Чтобы отлаживать анимацию и вступить в код, используйте свойство EnableDebugging . Отладка возможна из -за включения библиотеки Syrcelink. Пожалуйста, обязательно сделайте следующее:

< Rectangle xf:Animations.EnableDebugging= " InitializeElement "
           xf:Animations.Primary= " {StaticResource SlideFromLeft} " />

Следующие таблицы объясняют значения перечисления:

Enum значение	Описание
None	Значение по умолчанию. Никакой отладки не произойдет.
InitializeElement	Разбивает отладчик в функции InitializeElement добавления Xamlflair.
RunAnimation	Разбивает отладчик в функции RunAnimation в Xamlflair.

Регистрация анимации

Библиотека XAMLFLAIR абстрагирует свой журнал с использованием Microsoft.Extensions.Logging.Abstractions . Ниже приведен пример ведения журнала с использованием Serilog в приложении UWP:

 public App ( )
{
    this . InitializeComponent ( ) ;
    .
    .
    .
    // Setup the Serilog logger
    Log . Logger = new LoggerConfiguration ( )
        . MinimumLevel . Debug ( )
        . WriteTo . Debug ( )
        . CreateLogger ( ) ;

    // Initalie the XamlFlair loggers using the LoggerFactory (with Serilog support)
	XamlFlair . Animations . InitializeLoggers ( new LoggerFactory ( ) . AddSerilog ( ) ) ;
}

Для вывода значений одной или нескольких анимаций просто установите Debug в свойство EnableLogging в целевой FrameworkElement :

< Rectangle xf:Animations.EnableLogging= " Debug "
           xf:Animations.Primary= " {StaticResource SlideFromLeft} " />

Это предоставит вам следующий аналогичный выход консоли (немного отличается от WPF):

 Element = Windows.UI.Xaml.Controls.Button
Kind = FadeFrom, TranslateFrom
TargetProperty = Translation
Duration = 500
Delay = 0
Opacity = 0
OffsetX = 0
OffsetY = 50
OffsetZ = 0
ScaleX = 1
ScaleY = 1
ScaleZ = 1
Rotation = 0
Blur = 0
TransformCenterPoint = 0.5,0.5
Easing = Cubic
EasingMode = EaseOut

Когда каждая раскадровка выполняется, она хранится во внутреннем списке, пока не завершится (или не будет остановлен). Чтобы вывести этот внутренний список, временно добавьте следующее в код запуска приложения:

 Animations . EnableActiveTimelinesLogging = LogLevel . Debug ;

Это предоставит вам следующий аналогичный вывод консоли:

 ---------- ALL ACTIVE TIMELINES --------
Active timeline removed at 12:42:26:43222

Element = Button,  Key = d69f826a-1978-4a4e-b516-4a6b0469238b,  ElementGuid = 195d8c13-1dd7-4fef-a7f3-fc78bdab1cd7
    State = Running,  IsSequence = False,  IsIterating = False,  IterationBehavior = Count,  IterationCount = 0
------------------------------------

---------- ACTIVE TIMELINE --------
Guid d69f826a-1978-4a4e-b516-4a6b0469238b - Updated state to: Completed at 12:42:26:88616
------------------------------------

---------- ALL ACTIVE TIMELINES --------
Active timeline removed at 12:42:26:89614

NO ACTIVE TIMELINES!
------------------------------------

В настоящее время все регистрации в Xamlflair, упомянутое выше, регистрируется на LogLevel.Debug

ListViewBase ( UWP и Uno ) и анимация на основе ListBox ( WPF )

Чтобы правильно реализовать анимацию элементов по элементам списка, было недостаточно просто создать прикрепленные свойства против элементов управления ListViewBase (UWP) и ListBox (WPF). Вместо этого были созданы унаследованные элементы управления: AnimatedListView и AnimatedGridView для UWP, а также AnimatedListView и AnimatedListBox для WPF, все это доступно в пространстве имен XamlFlair.Controls :

UWP и UNO -пространство имен:

xmlns:xfc="using:XamlFlair.Controls"

Пространство имен WPF:

xmlns:xfc="clr-namespace:XamlFlair.Controls;assembly=XamlFlair.WPF"

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

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}, Event=Visibility} " />

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

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnLoad= " False "
                      ... />

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnItemsSourceChange= " False "
                      ... />

По умолчанию анимации элементов имеют задержку в 25 миллисекунд между каждым элементом. Это значение можно изменить с помощью свойства InterElementDelay :

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.InterElementDelay= " 50 "
                      ... />

Так же, как PrimaryBinding и SecondaryBinding , анимация элементов может быть вызвана привязкой с использованием свойства, ItemsBinding :

< xfc : AnimatedListView ItemsSource = " Binding SampleDataList "
                      xf:Animations.AnimateOnLoad= " False "
                      xf:Animations.ItemsBinding= " {Binding MyViewModelProperty} "
                      xf:Animations:Items= " {xf:Animate BasedOn={StaticResource FadeIn}} " />

ПРЕДУПРЕЖДЕНИЕ ( только UWP ) : Имейте в виду AnimatedListView что если у вас AnimatedGridView какие -либо ItemContainerTransitions . Это сделано, чтобы избежать противоречивых анимаций предметов.

ПРИМЕЧАНИЕ ( только UNO ) : Чтобы избежать любых мерцающих на анимации предметов, в настоящее время существует ограничение: анимация Items должна содержать FadeFrom .