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）