文章目錄

• Storyboard Animations
• • 1.Buttons.xaml
  • 2.BasePage.cs
  • 3.PageAnimations.cs && StoryboardHelpers.cs
  • 4.總結(jié)
  • 5.視頻鏈接

斷更了好幾個(gè)月，唯一可以安慰自己的借口就是過(guò)年忙，工作忙，其實(shí)還不是自己懶嘛，這次重新拾筆，必定要完結(jié)整個(gè)AngleSix的這個(gè)WPF系列，一個(gè)月內(nèi)，供37集

Storyboard Animations

這一節(jié)主要實(shí)現(xiàn)簡(jiǎn)單的storyboard動(dòng)畫(huà)，入門(mén)級(jí)

1.Buttons.xaml

在原Triggers的基礎(chǔ)上，把鼠標(biāo)進(jìn)入和離開(kāi)的事件改為了EventTrigger，需要實(shí)現(xiàn)這個(gè)動(dòng)畫(huà)的過(guò)程，還真的使用EventTrigger，因?yàn)門(mén)rigger本身不支持Storyboard，樣式不算太復(fù)雜，這里直接上代碼都可以看得懂，設(shè)置了一個(gè)0.3秒的顏色漸變動(dòng)畫(huà)

<EventTrigger RoutedEvent="MouseEnter"><BeginStoryboard><Storyboard><ColorAnimation To="{StaticResource WordBlue}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" /></Storyboard></BeginStoryboard></EventTrigger><EventTrigger RoutedEvent="MouseLeave"><BeginStoryboard><Storyboard><ColorAnimation To="{StaticResource WordOrange}" Duration="0:0:0.3" Storyboard.TargetName="border" Storyboard.TargetProperty="Background.Color" /></Storyboard></BeginStoryboard></EventTrigger>

2.BasePage.cs

BasePage 是在繼承Page的基礎(chǔ)上的一個(gè)基類，主要實(shí)現(xiàn)頁(yè)面加載的時(shí)候，從右到左漸入，頁(yè)面退出時(shí)，也是從右到左漸出，后面的LoginPage則是繼承這個(gè)BasePage的一個(gè)實(shí)例，注意XAML頭那里用的是“l(fā)ocal:BasePage”這個(gè)很重要，代碼行數(shù)多，我就刪掉注釋部分了

public class BasePage : Page{public PageAnimation PageLoadAnimation { get; set; } = PageAnimation.SlideAndFadeInFromRight;public PageAnimation PageUnLoadAnimation { get; set; } = PageAnimation.SlideAndFadeOutToLeft;public float SlideSeconds { get; set; } = 0.8f;public BasePage(){if (this.PageLoadAnimation != PageAnimation.None){this.Visibility = System.Windows.Visibility.Collapsed;}this.Loaded += BasePage_Loaded;}private async void BasePage_Loaded(object sender, System.Windows.RoutedEventArgs e){await AnimateIn();}public async Task AnimateIn(){if (this.PageLoadAnimation == PageAnimation.None){return;}switch (this.PageLoadAnimation){case PageAnimation.SlideAndFadeInFromRight:await this.SlideAndFadeInFromRight(this.SlideSeconds);break;default:break;}}public async Task AnimateOut(){if (this.PageUnLoadAnimation == PageAnimation.None){return;}switch (this.PageUnLoadAnimation){case PageAnimation.SlideAndFadeOutToLeft:await this.SlideAndFadeOutToLeft(this.SlideSeconds );break;default:break;}}

3.PageAnimations.cs && StoryboardHelpers.cs

這兩個(gè)文件是整節(jié)課的關(guān)鍵了，其實(shí)就是怎么實(shí)現(xiàn)一個(gè)storyboard動(dòng)畫(huà)的關(guān)鍵，這個(gè)文件在后面還會(huì)繼續(xù)擴(kuò)展，具體流程是，把頁(yè)面Page作為參數(shù)傳入storyboard，然后設(shè)定動(dòng)畫(huà)時(shí)間，修改頁(yè)面相對(duì)頁(yè)面Page容器（Window）的Margin屬性，以實(shí)現(xiàn)漸入漸出的效果

public static async Task SlideAndFadeInFromRight(this Page page,float seconds){var sb = new Storyboard();sb.AddSlideFormRight(seconds, page.WindowWidth);sb.AddFadeIn(seconds);sb.Begin(page);page.Visibility = Visibility.Visible;await Task.Delay((int)(seconds * 1000));}public static async Task SlideAndFadeOutToLeft(this Page page, float seconds){var sb = new Storyboard();sb.AddSlideToLeft(seconds, page.WindowWidth);sb.AddFadeOut(seconds);sb.Begin(page);page.Visibility = Visibility.Visible;await Task.Delay((int)(seconds * 1000));}///“StoryboardHelpers.cs”這里只展示部分，細(xì)節(jié)可以學(xué)習(xí)視頻，一步一步過(guò)來(lái)，收獲會(huì)更加的深刻public static class StoryboardHelpers{public static void AddSlideFormRight(this Storyboard storyboard,float seconds,double offset,float decelerationRatio = 0.9f){var animation = new ThicknessAnimation{Duration = new System.Windows.Duration(TimeSpan.FromSeconds(seconds)),From = new System.Windows.Thickness(offset, 0, -offset, 0),To = new System.Windows.Thickness(0),DecelerationRatio = decelerationRatio};Storyboard.SetTargetProperty(animation, new System.Windows.PropertyPath("Margin"));storyboard.Children.Add(animation);}}

4.總結(jié)

這個(gè)基礎(chǔ)頁(yè)面漸入漸出動(dòng)畫(huà)的實(shí)現(xiàn)，正是我們現(xiàn)在頁(yè)面UX的常用方式，會(huì)讓操作感受起來(lái)不會(huì)單調(diào)，也更能體現(xiàn)流程性，
想支付寶，微信APP，在同一個(gè)功能頁(yè)內(nèi)，使用的是左右的漸入漸出，在每個(gè)功能頁(yè)的打開(kāi)和關(guān)閉，則是上下的漸入漸出，借鑒學(xué)習(xí)，參考，還是很不錯(cuò)。

5.視頻鏈接

鏈接：https://pan.baidu.com/s/1DWR_vKEANQh7n73Z4HRGhQ
提取碼：702r

last modified：2019年4月26日17:21:59（1）

總結(jié)

以上是生活随笔為你收集整理的Storyboard Animations的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。