XamlFlair
1.0.0
XAMLFLAIR 라이브러리의 목표는 공통 애니메이션의 구현을 용이하게하고 개발자가 XAML의 몇 줄로 단일 또는 결합 된 애니메이션 세트를 쉽게 추가 할 수 있도록하는 것입니다.
| Sekuence 퍼즐 게임 |
|---|
 |
몇 가지 커피로 내 작업을 지원하려면 여기에서 할 수 있습니다. 커피를 구입하십시오. 귀하의 도움 으로이 프로젝트에 계속 시간을 보내고 가능한 경우 새로운 기능으로 계속 유지하고 업데이트 할 수 있습니다. 미리 감사드립니다!
Nuget에서 설치하십시오
개요 기능
기본 개념
용법
기본 애니메이션 유형
컬러 애니메이션 ( WPF 및 UNO 만 해당 )
글로벌 기본값을 우선합니다
기본 설정에 ResourceDictionary 사용
기본 애니메이션 ( WPF 만 해당 )
TransformOn 속성 ( WPF 만 해당 )
원근 회전 ( UWP 만 해당 )
애니메이션 결합
우선 값
X 및 Y 축의 상대적 번역
복합 애니메이션
반복 애니메이션
이벤트
바인딩
기본 및 보조 완료 명령
StartWith 속성을 사용합니다
AllowOpacityReset 속성 사용 ( WPF 만 해당 )
ClipToBounds 속성 사용 ( UWP 및 UNO 만 해당 )
디버깅 애니메이션
로깅 애니메이션
ListViewBase ( UWP 및 UNO ) 및 ListBox 기반 ( WPF ) 애니메이션
| 플랫폼 | 패키지 | 너겟 |
|---|---|---|
| UWP | xamlflair.uwp | |
| WPF | xamlflair.wpf | |
| 우노 | xamlflair.uno |
XamlFlair를 설치하려면 패키지 관리자 콘솔 에서 다음 명령을 실행하십시오.
UWP :
Install-Package XamlFlair.UWP
앱은 최소의 Windows 10 버전 1809 (빌드 17763)를 대상으로해야합니다.
WPF :
Install-Package XamlFlair.WPF
UNO :
Install-Package XamlFlair.Uno
UWP 앱은 최소의 Windows 10 버전 1809 (빌드 18362)를 대상으로해야합니다.
| 특징 | UWP | WPF | UWP (UNO) | iOS (UNO) | 안드로이드 (UNO) | WASM (UNO) 실험 |
|---|---|---|---|---|---|---|
| 애니메이션 시스템 | 구성 | 스토리 보드 | 스토리 보드 | 스토리 보드 | 스토리 보드 | 스토리 보드 |
| 변환 유형 | N/A | 변환 그룹 | compositetransform | compositetransform | compositetransform | compositetransform |
| defaultanimations.xaml | - | ✔ | - | - | - | - |
TransformOn | - | ✔ | - | - | - | - |
| 복합 애니메이션 | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| 상대 번역 | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| 반복 애니메이션 | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| 이벤트 및 바인딩 | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| 1 차/보조 완료 명령 | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
StartWith | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
AllowOpacityReset | - | ✔ | - | - | - | - |
ClipToBounds | ✔ | N/A | ✔ | ✔ | ✔ | ✔ |
| 애니메이션 목록 | ✔ | ✔ | ✔ | ✔ | ✔ | ✔ |
| 흐림 효과 | ✔ | ✔ | - | - | - | - |
| 포화 효과 | ✔ | - | - | - | - | - |
| 색조 효과 | ✔ | - | - | - | - | - |
| 컬러 애니메이션 | - | ✔ | ✔ | ✔ | ✔ | ✔ |
| 원근 회전 (스위블) | ✔ | - | - | - | - | - |
| 디버깅 애니메이션 | ✔ | ✔ | ✔ | ✔ | ✔ | - |
Xamlflair의 기본 개념 은에서 나오는 것으로 분류되는 애니메이션을 기반으로합니다. From Animation으로 구성된 모든 UI 요소는 하나 이상의 임의의 값으로 시작하여 해당 속성의 기본값을 사용하여 완료합니다 . A to Animation으로 구성된 모든 UI 요소는 현재 상태에서 시작하여 하나 이상의 임의의 값으로 애니메이션됩니다 .
A Animation 의 예 (0)의 기본값으로 변환되는 UI 요소) :
A to Animation의 예 (현재 상태에서 멀리 떨어진 UI 요소) :
참고 : 기본 애니메이션 유형 섹션에 설명 된 컬러 애니메이션에 대한이 규칙에 대한 예외가 있다는 점에 유의해야합니다.
처음에는 다음 XAML 네임 스페이스 참조가 필요합니다.
UWP 및 UNO :
xmlns:xf="using:XamlFlair"WPF :
xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF" 여기서부터 애니메이션이 필요한 FrameworkElement 에 첨부 된 속성을 설정하는 간단한 문제입니다.
< Border xf:Animations.Primary= " {StaticResource FadeIn} " />참고 :
FrameworkElement가 XAML에서CompositeTransform정의하면 애니메이션 프로세스 중에 변경됩니다.
참고 :
StaticResource의 사용은 다음 섹션에서 논의되는 글로벌 공통 애니메이션을 참조하는 것입니다.
경고 :
VisibilityVisible경우 요소가 시각적 트리에 남아 있으므로FadeTo애니메이션 할 때주의하십시오. 사용자가 요소 를 탭할 수 있도록IsHitTestVisible수동으로 관리 해야하는 경우가있을 수 있습니다.
참고 : 애니메이션 에서 A를 사용하여 색상을 애니메이션 할 때는 기본값 대신 지정된 값에서 현재 상태 로의 색상을 사용하는 것이 중요합니다.
참고 : 자세한 내용은 섹션 원근 회전 ( UWP 만 해당 )을 읽으십시오.
다음은 xamlflair로 작업 할 때 주목할만한 기본값을 나열합니다.
컬러 애니메이션은 다른 기본 유형 애니메이션과 약간 다르므로주의가 필요합니다. ColorTo 와 ColorFrom 사용하는 경우 다음을 수행해야합니다.
Control.Background , Control.Foreground , Control.BorderBrush , Border.Background . Border.BorderBrush , TextBlock.Foreground , Shape.Fill , Shape.StrokeColorOn 사용하여 대상 속성을 지정해야합니다 다음 예는 RoyalBlue에서 Darkgreen까지 직사각형의 Fill 애니메이션합니다.
< xf : AnimationSettings x : Key = " SampleColorAnimation "
Kind = " ColorTo "
Color = " DarkGreen "
ColorOn = " Fill " />
< Rectangle Fill = " RoyalBlue "
xf:Animations.Primary= " {StaticResource SampleColorAnimation} " /> 기본 애니메이션 값 중 하나 (예 : 500 대신 기본 Duration 이 750 인 경우)를 전역적으로 변경 해야하는 경우 앱의 초기화 코드에서 OverrideDefaultSettings 함수를 호출 할 수 있습니다. 다음 예제는 Duration 및 Easing 의 기본값을 변경합니다.
XamlFlair . Animations . OverrideDefaultSettings (
duration : 750 ,
easing : EasingType . Quadratic ) ;따라서 위의 샘플 코드를 사용하면 모든 애니메이션이 2 차 완화로 750ms로 실행됩니다.
ResourceDictionary 사용 모든 일반적인 애니메이션은 글로벌 ResourceDictionary (예 : 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 세트 세트를 설정하려면 다음 단계를 수행하십시오.
Animations.xaml 선택하십시오App.xaml 에서 다음을 추가하십시오. < Application .Resources>
< ResourceDictionary >
< ResourceDictionary .MergedDictionaries>
< ResourceDictionary Source = " Animations.xaml " />
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
</ Application .Resources>Animations.xaml 에서 아래 해당 링크에서 내용을 복사하여 붙여 넣습니다.UWP의 애니메이션 설정
WPF에 대한 애니메이션 설정
UNO의 애니메이션 설정
앱에는 이제 사용할 수있는 일반적인 공통 애니메이션 세트가 있습니다.
또는 사용자 정의 AnimationSettings 포함 된 자체 ResourceDictionary 만들기 위해 Xamlflair는 기본 애니메이션을 제공합니다.
응용 프로그램에서 이러한 기본 애니메이션을 참조하려면 App.xaml 에서 다음 단계를 수행하십시오.
XamlFlair.WPF 네임 스페이스 정의 : xmlns:xf="clr-namespace:XamlFlair;assembly=XamlFlair.WPF" < Application .Resources>
< ResourceDictionary >
< ResourceDictionary .MergedDictionaries>
< xf : XamlFlairResources />
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
</ Application .Resources>응용 프로그램에는 이제 사용할 수있는 기본 애니메이션 세트가 있습니다.
<xf:XamlFlairResources /> 사용할 때 Visual Studio Intellisense가 작동하지 않으면 다음을 시도 할 수 있습니다.
< 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 입니다. 아무것도 지정되지 않으면 기본 베일이 Render 됩니다. 다음은 두 가지의 예입니다.
참고 : WPF의
LayoutTransformTranslateTransform지원하지 않으므로 번역 애니메이션이 작동하지 않습니다. 설명 섹션에서 자세한 내용을 읽을 수 있습니다.
대상 요소에 원근 회전 ( 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 > 애니메이션을 결합 할 수 있으며 앞에서 언급했듯이 일반적으로 사용되는 이러한 결합 된 애니메이션 중 하나는 Global ResourceDictionary (예 : 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 파일을 과도하게 인구하지 않도록 수행됩니다. 재정의를 달성하려면 BasedOn 속성과 쌍을 이루는 Animate 마크 업 확장을 사용하십시오.
< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource ScaleFromBottom}, Delay=500} " /> OffsetX 및 OffsetY 에 대한 하드 코딩 된 값 (예 : Resized 가능한 Windows를 처리 할 경우)이 제한 될 수 있으므로 OffsetX 및 OffsetY 지원 스타 기반 값 :
< Border xf:Animations.Primary= " {xf:Animate BasedOn={StaticResource SlideFromLeft}, OffsetX=1.5*} " />스타 기반 값은
FrameworkElement의 현재ActualWidth및/또는ActualHeight값에 따라 오프셋을 계산하므로 요소가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 >참고 :
CompoundSettingsEvent속성을 지원하며 이벤트 속성을 지원합니다.
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 " />또한 복합 애니메이션을 반복 할 수도 있습니다. 예를 들어, 이전 섹션의 복합 애니메이션 ( Progress )을 사용합니다.
< Border xf:Animations.Primary= " {StaticResource Progress} "
xf:Animations.IterationCount= " 5 " />경고 : 반복 애니메이션을 사용할 때는 요소에
Secondary애니메이션을 설정할 수 없습니다.
모든 XamlFlair 애니메이션은 "킥오프" 애니메이션, 즉 애니메이션 반복을 제외하고 는 완료되거나 관련 요소가 언로드 될 때만 중지하고 중지합니다. PrimaryBinding 속성에 false 값을 공급할 때 반복되는 애니메이션을 중지 할 수 있습니다 (바인딩은 다음 섹션에서 바인딩이 포함됩니다).
< 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 이벤트입니다. DataContextChanged 이벤트를 사용하면 null 값이 설정된 경우를 제외하고 null 이 필터링되어 애니메이션을 트리거하지 않는 경우를 제외하고 DataContext 값이 변경되면 발사됩니다.
또 다른 특별한 사례는 Visibility 입니다. FrameworkElement 에는 이벤트 VisibilityChanged 존재하지 않지만 Visibility 속성은 UI에서 볼 수있을 때 요소를 애니메이션하는 데 유용 할 수 있기 때문에 값이 변경 될 때 이벤트처럼 취급되었습니다. 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 때만 실행됩니다. Event 위해 지정되지 None 경우 애니메이션은 Loaded 및 바인딩에서 실행됩니다.
1 PrimaryBinding 및 SecondaryBinding CombinedBinding 동일한 부울 값에 따라)과 함께 작업 할 때는 더 깨끗하고 더 간단 할 수 있습니다. CombinedBinding 단순히 PrimaryBinding 과 2 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 속성을 사용합니다 예를 들어 애니메이션이 실행되기 전에 특정 상태에서 UI 요소가 특정 상태에서 시작 해야하는 경우가 있습니다. 이것은 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 속성을 사용하십시오. SourcelInk 라이브러리가 포함되어 디버깅이 가능합니다. 다음을 수행하십시오.
< Rectangle xf:Animations.EnableDebugging= " InitializeElement "
xf:Animations.Primary= " {StaticResource SlideFromLeft} " />다음 테이블은 열거 값을 설명합니다.
| 열거적인 가치 | 설명 |
|---|---|
None | 기본값. 디버깅이 발생하지 않습니다. |
InitializeElement | XAMLFLAIR의 InitializeElement 기능에서 디버거를 분해합니다. |
RunAnimation | Xamlflair의 RunAnimation 함수에서 디버거를 깨뜨립니다. |
XAMLFLAIR 라이브러리는 Microsoft.Extensions.Logging.Abstractions 사용하여 로깅을 추상화합니다. 아래는 UWP 앱에서 Serilog를 사용하는 로깅 예제입니다.
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 ( ) ) ;
} 하나 이상의 애니메이션의 값을 출력하려면 대상 FrameworkElement 있는 EnableLogging 속성으로 Debug 설정하십시오.
< 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) 컨트롤에 대한 첨부 된 속성을 단순히 작성하는 것으로 충분하지 않았습니다. 대신, 상속 된 컨트롤이 만들어졌습니다 : UWP 용 AnimatedListView 및 AnimatedGridView , WPF 용 AnimatedListView 및 AnimatedListBox 는 모두 XamlFlair.Controls 네임 스페이스에서 사용할 수 있습니다.
UWP 및 UNO 네임 스페이스 :
xmlns:xfc="using:XamlFlair.Controls"WPF 네임 스페이스 :
xmlns:xfc="clr-namespace:XamlFlair.Controls;assembly=XamlFlair.WPF" 목록에서 항목을 애니메이션하는 것은 일반적인 UI 요소를 애니메이션하는 것과 약간 다릅니다. 이 차이의 주된 이유는 해당 AnimationSettings 의 Event 값을 기본값에서 변경할 수 없기 때문입니다. 따라서 다음은 유효하지 않습니다 .
< 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포함되어 있어야합니다 .
