其他分享
首页 > 其他分享> > 示例：WPF中自定义StoryBoarService在代码中封装StoryBoard、Animation用于简化动画编写

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

作者：互联网

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

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

 

二、示例：

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

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

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

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

在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.  
  6.         public EventHandler CompletedEvent { get; set; }
  7.  
  8.         public EasingFunctionBase Easing { get; set; } = EasingFunctionFactroy.PowerEase;
  9.  
  10.         public PropertyPath PropertyPath { get; set; }
  11.  
  12.         public Duration Duration { get; set; }
  13.  
  14.         public void Dispose()
  15.         {
  16.             storyboard.Completed -= CompletedEvent;
  17.         }
  18.  
  19.         public abstract StoryboardEngineBase Start(UIElement element);
  20.  
  21.         public abstract StoryboardEngineBase Stop();
  22.  
  23.         public StoryboardEngineBase(int second, string property)
  24.         {
  25.             this.PropertyPath = new PropertyPath(property);
  26.             this.Duration = new Duration(TimeSpan.FromSeconds(second));
  27.         }
  28.  
  29.     }
  30.  
  31.     /// <summary> 动画泛型引擎基类 </summary>
  32.     public abstract class StoryboardEngineBase<T> : StoryboardEngineBase
  33.     {
  34.         public StoryboardEngineBase(T from, T to, int second, string property) : base(second, property)
  35.         {
  36.             this.FromValue = from;
  37.             this.ToValue = to;
  38.         }
  39.  
  40.         public T FromValue { get; set; }
  41.  
  42.         public T ToValue { get; set; }
  43.  
  44.         //public RepeatBehavior RepeatBehavior { get; set; };
  45.  
  46.     }

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.  
  9.         public DoubleStoryboardEngine(double from, double to, int second, string property) : base(from, to, second, property)
  10.         {
  11.  
  12.         }
  13.  
  14.         public override StoryboardEngineBase Start(UIElement element)
  15.         {
  16.             //  Do：时间线
  17.             DoubleAnimation animation = new DoubleAnimation(1, 0, this.Duration);
  18.  
  19.             if (this.Easing != null)
  20.                 animation.EasingFunction = this.Easing;
  21.  
  22.             //if (this.RepeatBehavior != default(RepeatBehavior))
  23.             //    animation.RepeatBehavior = (RepeatBehavior);
  24.  
  25.             //  Do：属性动画
  26.             storyboard.Children.Add(animation);
  27.             Storyboard.SetTarget(animation, element);
  28.             Storyboard.SetTargetProperty(animation, this.PropertyPath);
  29.  
  30.             if (CompletedEvent != null)
  31.                 storyboard.Completed += CompletedEvent;
  32.             storyboard.Begin();
  33.  
  34.             return this;
  35.         }
  36.  
  37.         public override StoryboardEngineBase Stop()
  38.         {
  39.             this.storyboard.Stop();
  40.  
  41.             return this;
  42.         }
  43.     }

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.  
  15.         /// <summary> QuadraticEase：创建加速和/或减速使用的公式的动画f(t) = t2。 </summary>
  16.         public static QuadraticEase QuadraticEase { get; set; } = new QuadraticEase();
  17.  
  18.         /// <summary> CubicEase：创建加速和/或减速使用的公式的动画f(t) = t3。 </summary>
  19.         public static CubicEase CubicEase { get; set; } = new CubicEase();
  20.         /// <summary> QuarticEase：创建加速和/或减速使用的公式的动画f(t) = t4。 </summary>
  21.         public static QuarticEase QuarticEase { get; set; } = new QuarticEase();
  22.         /// <summary> QuinticEase：创建加速和/或减速使用的公式的动画f(t) = t5。 </summary>
  23.         public static QuinticEase QuinticEase { get; set; } = new QuinticEase();
  24.  
  25.         /// <summary> ExponentialEase：创建加速和/或减速使用指数公式的动画。 </summary>
  26.         public static ExponentialEase ExponentialEase { get; set; } = new ExponentialEase();
  27.  
  28.         /// <summary> SineEase：创建加速和/或减速使用正弦公式的动画。 </summary>
  29.         public static SineEase SineEase { get; set; } = new SineEase();
  30.  
  31.     }

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

标签：动画,StoryBoard,自定义,get,示例,set,static,new,public
来源： https://www.cnblogs.com/lonelyxmas/p/12073562.html