示例:WPF中自定义StoryBoarService在代码中封装StoryBoard、Animation用于简化动画编写

原文:示例:WPF中自定义StoryBoarService在代码中封装StoryBoard、Animation用于简化动画编写

一、目的:通过对StoryBoard和Animation的封装来简化动画的编写

二、示例:

示例:WPF中自定义StoryBoarService在代码中封装StoryBoard、Animation用于简化动画编写

说明:渐隐藏是WPF中比较常用的动画,上图是通过StoryBoarService封装后的效果,在代码中只要执行如下代码即可:

 DoubleStoryboardEngine.Create(1, 0, 1, "Opacity").Start(element);

上面的关闭效果可以定义一个命令如下:


  1. public class CollapsedOfOpacityCommand : ICommand
  2. {
  3. public bool CanExecute(object parameter) => true;
  4. public void Execute(object parameter)
  5. {
  6. if(parameter is UIElement element)
  7. {
  8. var engine = DoubleStoryboardEngine.Create(1, 0, 1, "Opacity");
  9. engine.Start(element);
  10. }
  11. }
  12. public event EventHandler CanExecuteChanged;
  13. }

在Xaml中调用如下命令即可完成关闭渐隐藏的效果

Command="{x:Static base:CommandService.CollapsedOfOpacityCommand}"

CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=GroupBox}}"

传入的CommandParmeter将会在执行命令时渐隐藏

其中动画效果的代码只需一句代码即可,简化了动画在代码中繁琐的编码过程

DoubleStoryboardEngine.Create(1, 0, 1, "Opacity").Start(element);

二、代码:

目前只实现DoubleAnimation的封装,后续将会对其他类型进行封装

1、封闭修改基类


  1. /// <summary> 动画引擎基类 </summary>
  2. public abstract class StoryboardEngineBase : IDisposable
  3. {
  4. protected Storyboard storyboard = new Storyboard();
  5. public EventHandler CompletedEvent { get; set; }
  6. public EasingFunctionBase Easing { get; set; } = EasingFunctionFactroy.PowerEase;
  7. public PropertyPath PropertyPath { get; set; }
  8. public Duration Duration { get; set; }
  9. public void Dispose()
  10. {
  11. storyboard.Completed -= CompletedEvent;
  12. }
  13. public abstract StoryboardEngineBase Start(UIElement element);
  14. public abstract StoryboardEngineBase Stop();
  15. public StoryboardEngineBase(int second, string property)
  16. {
  17. this.PropertyPath = new PropertyPath(property);
  18. this.Duration = new Duration(TimeSpan.FromSeconds(second));
  19. }
  20. }
  21. /// <summary> 动画泛型引擎基类 </summary>
  22. public abstract class StoryboardEngineBase<T> : StoryboardEngineBase
  23. {
  24. public StoryboardEngineBase(T from, T to, int second, string property) : base(second, property)
  25. {
  26. this.FromValue = from;
  27. this.ToValue = to;
  28. }
  29. public T FromValue { get; set; }
  30. public T ToValue { get; set; }
  31. //public RepeatBehavior RepeatBehavior { get; set; };
  32. }

2、开放扩展DoubleStoryboardEngine


  1. /// <summary> DoubleAnimation动画引擎 </summary>
  2. public class DoubleStoryboardEngine : StoryboardEngineBase<double>
  3. {
  4. public static DoubleStoryboardEngine Create(double from, double to, int second, string property)
  5. {
  6. return new DoubleStoryboardEngine(from, to, second, property);
  7. }
  8. public DoubleStoryboardEngine(double from, double to, int second, string property) : base(from, to, second, property)
  9. {
  10. }
  11. public override StoryboardEngineBase Start(UIElement element)
  12. {
  13. // Do:时间线
  14. DoubleAnimation animation = new DoubleAnimation(1, 0, this.Duration);
  15. if (this.Easing != null)
  16. animation.EasingFunction = this.Easing;
  17. //if (this.RepeatBehavior != default(RepeatBehavior))
  18. // animation.RepeatBehavior = (RepeatBehavior);
  19. // Do:属性动画
  20. storyboard.Children.Add(animation);
  21. Storyboard.SetTarget(animation, element);
  22. Storyboard.SetTargetProperty(animation, this.PropertyPath);
  23. if (CompletedEvent != null)
  24. storyboard.Completed += CompletedEvent;
  25. storyboard.Begin();
  26. return this;
  27. }
  28. public override StoryboardEngineBase Stop()
  29. {
  30. this.storyboard.Stop();
  31. return this;
  32. }
  33. }

3、过度效果工厂


  1. /// <summary> 说明:https://docs.microsoft.com/zh-cn/dotnet/framework/wpf/graphics-multimedia/easing-functions </summary>
  2. public static class EasingFunctionFactroy
  3. {
  4. /// <summary> PowerEase:创建加速和/或减速使用的公式的动画f(t) = tp其中 p 等于Power属性。 </summary>
  5. public static PowerEase PowerEase { get; set; } = new PowerEase();
  6. /// <summary> BackEase:略微收回动画的动作,然后再开始进行动画处理指示的路径中。 </summary>
  7. public static BackEase BackEase { get; set; } = new BackEase();
  8. /// <summary> ElasticEase:创建类似于弹簧来回直到静止的动画 </summary>
  9. public static ElasticEase ElasticEase { get; set; } = new ElasticEase();
  10. /// <summary> BounceEase:创建弹跳效果。 </summary>
  11. public static BounceEase BounceEase { get; set; } = new BounceEase();
  12. /// <summary> CircleEase:创建加速和/或减速使用循环函数的动画。 </summary>
  13. public static CircleEase CircleEase { get; set; } = new CircleEase();
  14. /// <summary> QuadraticEase:创建加速和/或减速使用的公式的动画f(t) = t2。 </summary>
  15. public static QuadraticEase QuadraticEase { get; set; } = new QuadraticEase();
  16. /// <summary> CubicEase:创建加速和/或减速使用的公式的动画f(t) = t3。 </summary>
  17. public static CubicEase CubicEase { get; set; } = new CubicEase();
  18. /// <summary> QuarticEase:创建加速和/或减速使用的公式的动画f(t) = t4。 </summary>
  19. public static QuarticEase QuarticEase { get; set; } = new QuarticEase();
  20. /// <summary> QuinticEase:创建加速和/或减速使用的公式的动画f(t) = t5。 </summary>
  21. public static QuinticEase QuinticEase { get; set; } = new QuinticEase();
  22. /// <summary> ExponentialEase:创建加速和/或减速使用指数公式的动画。 </summary>
  23. public static ExponentialEase ExponentialEase { get; set; } = new ExponentialEase();
  24. /// <summary> SineEase:创建加速和/或减速使用正弦公式的动画。 </summary>
  25. public static SineEase SineEase { get; set; } = new SineEase();
  26. }

4、使用方法:

/// <summary> 构造方法 </summary>

        /// <param name="from"> 起始值</param>

        /// <param name="to"> 结束值  </param>

        /// <param name="second"> 间隔时间秒 </param>

        /// <param name="property"> 修改属性名称 </param>

        /// 

        public static DoubleStoryboardEngine Create(double from, double to, int second, string property)

        {

            return new DoubleStoryboardEngine(from, to, second, property);

        }

下载地址:https://github.com/HeBianGu/WPF-ControlBase.git

上一篇:爪哇国新游记之二----用于计算三角形面积的Point类和TAngle类


下一篇:Rust 中的类型