Storyboard Animations

斷更了好幾個月，唯一可以安慰自己的藉口就是過年忙，工作忙，其實還不是自己懶嘛，這次重新拾筆，必定要完結整個AngleSix的這個WPF系列，一個月內，供37集

Storyboard Animations

這一節主要實現簡單的storyboard動畫，入門級

1.Buttons.xaml

在原Triggers的基礎上，把鼠標進入和離開的事件改爲了EventTrigger，需要實現這個動畫的過程，還真的使用EventTrigger，因爲Trigger本身不支持Storyboard，樣式不算太複雜，這裏直接上代碼都可以看得懂，設置了一個0.3秒的顏色漸變動畫

 <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的基礎上的一個基類，主要實現頁面加載的時候，從右到左漸入，頁面退出時，也是從右到左漸出，後面的LoginPage則是繼承這個BasePage的一個實例，注意XAML頭那裏用的是“local:BasePage”這個很重要，代碼行數多，我就刪掉註釋部分了

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

這兩個文件是整節課的關鍵了，其實就是怎麼實現一個storyboard動畫的關鍵，這個文件在後面還會繼續擴展，具體流程是，把頁面Page作爲參數傳入storyboard，然後設定動畫時間，修改頁面相對頁面Page容器（Window）的Margin屬性，以實現漸入漸出的效果

 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”這裏只展示部分，細節可以學習視頻，一步一步過來，收穫會更加的深刻
  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.總結

這個基礎頁面漸入漸出動畫的實現，正是我們現在頁面UX的常用方式，會讓操作感受起來不會單調，也更能體現流程性，
想支付寶，微信APP，在同一個功能頁內，使用的是左右的漸入漸出，在每個功能頁的打開和關閉，則是上下的漸入漸出，借鑑學習，參考，還是很不錯。

5.視頻鏈接

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

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