XamlFlair
1.0.0
เป้าหมายของไลบรารี Xamlflair คือการลดการใช้งานภาพเคลื่อนไหวทั่วไปและอนุญาตให้นักพัฒนาเพิ่มชุดภาพเคลื่อนไหวเดี่ยวหรือรวมกันได้ อย่างง่ายดาย ด้วย XAML เพียงไม่กี่บรรทัด
| เกมปริศนา Sekuence |
|---|
 |
หากคุณต้องการสนับสนุนงานของฉันด้วยกาแฟสองสามตัวคุณสามารถทำได้ที่นี่: ซื้อกาแฟให้ฉัน ความช่วยเหลือของคุณช่วยให้ฉันสามารถใช้เวลาในโครงการนี้ต่อไปและดำเนินการต่อไปเพื่อรักษาและอัปเดตด้วยคุณสมบัติใหม่เมื่อเป็นไปได้ ขอบคุณล่วงหน้า!
ติดตั้งจาก Nuget
ภาพรวมคุณสมบัติ
แนวคิดพื้นฐาน
การใช้งาน
ประเภทแอนิเมชั่นพื้นฐาน
ภาพเคลื่อนไหวสี ( WPF และ UNO เท่านั้น )
แทนที่ค่าเริ่มต้นทั่วโลก
การใช้ ResourceDictionary สำหรับการตั้งค่าฐาน
ภาพเคลื่อนไหวเริ่มต้น ( WPF เท่านั้น )
Property TransformOn ( WPF เท่านั้น )
การหมุนมุมมอง ( UWP เท่านั้น )
การรวมภาพเคลื่อนไหว
ค่าเอาชนะ
การแปลสัมพัทธ์เกี่ยวกับแกน x และ y
แอนิเมชั่นผสม
อนิเมชั่นซ้ำ
เหตุการณ์
การผูกมัด
คำสั่งความสำเร็จหลักและรอง
การใช้คุณสมบัติ StartWith
การใช้คุณสมบัติ AllowOpacityReset ( WPF เท่านั้น )
การใช้คุณสมบัติ ClipToBounds ( UWP และ UNO เท่านั้น )
การดีบักแอนิเมชั่น
การบันทึกภาพเคลื่อนไหว
ListViewBase ( UWP และ UNO ) และ ListBox -based -based ( WPF ) ภาพเคลื่อนไหว
| แพลตฟอร์ม | บรรจุุภัณฑ์ | นูเกต |
|---|---|---|
| UWP | xamlflair.uwp | |
| WPF | xamlflair.wpf | |
| uno | xamlflair.uno |
ในการติดตั้ง XAMLFLAIR ให้เรียกใช้คำสั่งต่อไปนี้ใน คอนโซลแพ็คเกจ Manager :
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) | Android (UNO) | การทดลอง WASM (UNO) |
|---|---|---|---|---|---|---|
| ระบบภาพเคลื่อนไหว | องค์ประกอบ | กระดานเรื่องราว | กระดานเรื่องราว | กระดานเรื่องราว | กระดานเรื่องราว | กระดานเรื่องราว |
| แปลงประเภท | N/A | กลุ่มการแปลง | Compositetransform | Compositetransform | Compositetransform | Compositetransform |
| defaultanimations.xaml | - | - | - | - | - | |
TransformOn | - | - | - | - | - | |
| แอนิเมชั่นผสม | ||||||
| การแปลสัมพัทธ์ | ||||||
| อนิเมชั่นซ้ำ | ||||||
| กิจกรรมและการผูกมัด | ||||||
| คำสั่งเสร็จสิ้นหลัก/รอง | ||||||
StartWith | ||||||
AllowOpacityReset | - | - | - | - | - | |
ClipToBounds | N/A | |||||
| รายการเคลื่อนไหว | ||||||
| เอฟเฟกต์เบลอ | - | - | - | - | ||
| เอฟเฟกต์ความอิ่มตัว | - | - | - | - | - | |
| เอฟเฟกต์สี | - | - | - | - | - | |
| ภาพเคลื่อนไหวสี | - | |||||
| การหมุนมุมมอง (หมุน) | - | - | - | - | - | |
| การดีบักแอนิเมชั่น | - |
แนวคิดพื้นฐานของ Xamlflair ขึ้นอยู่กับภาพเคลื่อนไหวที่จัดหมวดหมู่เป็น จาก และ ไป องค์ประกอบ UI ใด ๆ ที่ประกอบด้วยแอนิเมชั่น จาก แอนิเมชั่นจะ เริ่มต้นด้วยค่าตามอำเภอใจอย่างน้อยหนึ่งค่าและเสร็จสิ้นโดยใช้ค่าเริ่มต้นของคุณสมบัติที่เกี่ยวข้อง องค์ประกอบ UI ใด ๆ ที่ประกอบด้วย แอ นิเมชั่นจะ เริ่มต้นในสถานะปัจจุบันและทำให้มีค่าตามอำเภอใจอย่างน้อยหนึ่งค่า
ตัวอย่างของ A จาก ภาพเคลื่อนไหว (องค์ประกอบ UI ที่แปลเป็นค่าเริ่มต้นของการแปล (0)):
ตัวอย่างของ A to Animation (องค์ประกอบ UI ที่เลื่อนออกไปจากสถานะปัจจุบัน):
หมายเหตุ : เป็นสิ่งสำคัญที่จะต้องทราบว่ามีข้อยกเว้นสำหรับกฎนี้สำหรับภาพเคลื่อนไหวสีซึ่งอธิบายไว้ในส่วนประเภทแอนิเมชั่นพื้นฐาน
ในการเริ่มต้นคุณต้องมีการอ้างอิง XAML namespace ต่อไปนี้:
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เนื่องจากองค์ประกอบยังคงอยู่ในทรีภาพหากVisibleVisibilityอาจมีกรณีที่คุณจะต้องจัดการIsHitTestVisibleด้วยตนเองเพื่อให้ผู้ใช้สามารถแตะ ผ่าน องค์ประกอบ
หมายเหตุ : เป็นสิ่งสำคัญที่จะต้องทราบเมื่อมีการเคลื่อนไหวสีโดยใช้ A จาก แอนิเมชั่นสีจะเคลื่อนไหวจากค่าที่ระบุไปยัง สถานะปัจจุบัน แทนที่จะเป็นค่าเริ่มต้น
หมายเหตุ : อ่านการหมุนมุมมองของส่วน ( UWP เท่านั้น ) สำหรับรายละเอียดเพิ่มเติม
รายการต่อไปนี้แสดง ค่าเริ่มต้นที่ น่าสังเกตเมื่อทำงานกับ xamlflair:
ภาพเคลื่อนไหวสีต้องการความสนใจเนื่องจากแตกต่างจากภาพเคลื่อนไหวประเภทฐานอื่น ๆ เล็กน้อย เมื่อใช้ ColorTo และ ColorFrom สิ่งต่อไปนี้ต้องทำ:
Control.Background , Control.Foreground Shape.Fill Control.BorderBrush , Border.Background , Border.BorderBrush , TextBlock.Foreground , Shape.StrokeColorOn ตัวอย่างต่อไปนี้จะทำให้ 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 ) ;ดังนั้นด้วยโค้ดตัวอย่างด้านบนภาพเคลื่อนไหวทุกตัวจะทำงานเป็นเวลา 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.xamlApp.xaml ของคุณเพิ่มสิ่งต่อไปนี้: < Application .Resources>
< ResourceDictionary >
< ResourceDictionary .MergedDictionaries>
< ResourceDictionary Source = " Animations.xaml " />
</ ResourceDictionary .MergedDictionaries>
</ ResourceDictionary >
</ Application .Resources>Animations.xaml , คัดลอกและวางเนื้อหาจากลิงก์ที่เกี่ยวข้องด้านล่าง:การตั้งค่าภาพเคลื่อนไหวสำหรับ UWP
การตั้งค่าภาพเคลื่อนไหวสำหรับ WPF
การตั้งค่าแอนิเมชั่นสำหรับ uno
แอพของคุณตอนนี้มีชุดภาพเคลื่อนไหว ทั่วไป ทั่วโลกพร้อมใช้งาน
อีกทางเลือกหนึ่งในการสร้าง ResourceDictionary ของคุณเองที่มี AnimationSettings ที่กำหนดเองของคุณ 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>ตอนนี้แอปพลิเคชันของคุณมีชุดภาพเคลื่อนไหว เริ่มต้น ทั่วโลกพร้อมใช้งาน
หาก 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ใด ๆ ดังนั้นการแปลภาพเคลื่อนไหวจะไม่ทำงาน คุณสามารถอ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ในส่วนคำพูดที่นี่
เป็นสิ่งสำคัญที่จะต้องทราบว่าการใช้การหมุนมุมมอง (เรียกอีกอย่างว่า 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 ทั่วโลก (เช่น 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 สามารถ จำกัด ได้ (เช่นในกรณีที่ต้องจัดการกับ Windows ที่ปรับขนาดได้) ทั้ง OffsetX และค่าใช้ OffsetY ที่อยู่ในระดับสูง:
< 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 เมื่อใช้เหตุการณ์ DataContextChanged มันจะยิงเมื่อค่า DataContext เปลี่ยนไปยกเว้นกรณีที่มีการตั้งค่าค่า null null จะถูกกรองออกและจะไม่กระตุ้นภาพเคลื่อนไหว
อีกกรณีพิเศษคือ Visibility แม้ว่าจะไม่มี VisibilityChanged เหตุการณ์ที่มีอยู่ใน FrameworkElement แต่คุณสมบัติ 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 หาก 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 จะมีกรณีที่คุณต้องการองค์ประกอบ 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} " />ตารางต่อไปนี้อธิบายค่าการแจงนับ:
| ค่า 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 -based -based ( WPF ) ภาพเคลื่อนไหว 
ในการใช้งานแอนิเมชั่นรายการอย่างถูกต้องในรายการรายการนั้นไม่เพียงพอที่จะสร้างคุณสมบัติที่แนบมากับการควบคุม ListViewBase (UWP) และ ListBox (WPF) แต่มีการสร้างตัวควบคุมที่สืบทอดมา: AnimatedListView และ AnimatedGridView สำหรับ UWP และ AnimatedListView และ AnimatedListBox สำหรับ WPF ซึ่งทั้งหมดมีให้บริการจาก XamlFlair.Controls Namespace:
UWP และ UNO Namespace:
xmlns:xfc="using:XamlFlair.Controls"Namespace WPF:
xmlns:xfc="clr-namespace:XamlFlair.Controls;assembly=XamlFlair.WPF" รายการภาพเคลื่อนไหวในรายการแตกต่างจากการเคลื่อนไหวเล็กน้อยองค์ประกอบ UI ทั่วไป เหตุผลหลักสำหรับความแตกต่างนี้คือค่า 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 เท่านั้น ) : โปรดทราบว่าหากคุณมี
ItemContainerTransitionsที่ตั้งค่าไว้บนAnimatedListViewหรือภาพเคลื่อนไหวAnimatedGridViewพวกเขาจะถูกล้างออก สิ่งนี้ทำเพื่อหลีกเลี่ยงภาพเคลื่อนไหวรายการที่ขัดแย้งกัน
หมายเหตุ ( UNO เท่านั้น ) : เพื่อหลีกเลี่ยงการกะพริบใด ๆ ในภาพเคลื่อนไหวของไอเท็มปัจจุบันมีข้อ จำกัด ในสถานที่:
Itemsภาพเคลื่อนไหว จะต้อง มีFadeFrom
