文章目录

• Storyboard Animations
• • 1.Buttons.xaml
  • 2.BasePage.cs
  • 3.PageAnimations.cs && StoryboardHelpers.cs
  • 4.总结
  • 5.视频链接

断更了好几个月，唯一可以安慰自己的借口就是过年忙，工作忙，其实还不是自己懒嘛，这次重新拾笔，必定要完结整个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）

总结

以上是生活随笔为你收集整理的Storyboard Animations的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。