一、目的：通過對StoryBoard和Animation的封裝來簡化動畫的編寫
二、示例：
說明：漸隱藏是WPF中比較常用的動畫，上圖是通過StoryBoarService封裝後的效果，在代碼中只要執行如下代碼即可：
DoubleStoryboardEngine.Create(1, 0, 1, "Opacity").Start(element);
上面的關閉效果可以定義一個命令如下：
public class CollapsedOfOpacityCommand : ICommand
{
public bool CanExecute(object parameter) => true;
public void Execute(object parameter)
{
if(parameter is UIElement element)
{
var engine = DoubleStoryboardEngine.Create(1, 0, 1, "Opacity");
engine.Start(element);
}
}
public event EventHandler CanExecuteChanged;
}
在Xaml中調用如下命令即可完成關閉漸隱藏的效果
Command="{x:Static base:CommandService.CollapsedOfOpacityCommand}"
CommandParameter="{Binding RelativeSource={RelativeSource AncestorType=GroupBox}}"
傳入的CommandParmeter將會在執行命令時漸隱藏
其中動畫效果的代碼只需一句代碼即可，簡化了動畫在代碼中繁瑣的編碼過程
DoubleStoryboardEngine.Create(1, 0, 1, "Opacity").Start(element);
二、代碼：
目前只實現DoubleAnimation的封裝，後續將會對其他類型進行封裝
1、封閉修改基類
/// <summary> 動畫引擎基類 </summary>
public abstract class StoryboardEngineBase : IDisposable
{
protected Storyboard storyboard = new Storyboard();
public EventHandler CompletedEvent { get; set; }
public EasingFunctionBase Easing { get; set; } = EasingFunctionFactroy.PowerEase;
public PropertyPath PropertyPath { get; set; }
public Duration Duration { get; set; }
public void Dispose()
{
storyboard.Completed -= CompletedEvent;
}
public abstract StoryboardEngineBase Start(UIElement element);
public abstract StoryboardEngineBase Stop();
public StoryboardEngineBase(int second, string property)
{
this.PropertyPath = new PropertyPath(property);
this.Duration = new Duration(TimeSpan.FromSeconds(second));
}
}
/// <summary> 動畫泛型引擎基類 </summary>
public abstract class StoryboardEngineBase<T> : StoryboardEngineBase
{
public StoryboardEngineBase(T from, T to, int second, string property) : base(second, property)
{
this.FromValue = from;
this.ToValue = to;
}
public T FromValue { get; set; }
public T ToValue { get; set; }
//public RepeatBehavior RepeatBehavior { get; set; };
}
2、開放擴展DoubleStoryboardEngine
/// <summary> DoubleAnimation動畫引擎 </summary>
public class DoubleStoryboardEngine : StoryboardEngineBase<double>
{
public static DoubleStoryboardEngine Create(double from, double to, int second, string property)
{
return new DoubleStoryboardEngine(from, to, second, property);
}
public DoubleStoryboardEngine(double from, double to, int second, string property) : base(from, to, second, property)
{
}
public override StoryboardEngineBase Start(UIElement element)
{
// Do：時間線
DoubleAnimation animation = new DoubleAnimation(1, 0, this.Duration);
if (this.Easing != null)
animation.EasingFunction = this.Easing;
//if (this.RepeatBehavior != default(RepeatBehavior))
// animation.RepeatBehavior = (RepeatBehavior);
// Do：屬性動畫
storyboard.Children.Add(animation);
Storyboard.SetTarget(animation, element);
Storyboard.SetTargetProperty(animation, this.PropertyPath);
if (CompletedEvent != null)
storyboard.Completed += CompletedEvent;
storyboard.Begin();
return this;
}
public override StoryboardEngineBase Stop()
{
this.storyboard.Stop();
return this;
}
}
3、過度效果工廠
/// <summary> 說明：https://docs.microsoft.com/zh-cn/dotnet/framework/wpf/graphics-multimedia/easing-functions </summary>
public static class EasingFunctionFactroy
{
/// <summary> PowerEase：創建加速和/或減速使用的公式的動畫f(t) = tp其中 p 等於Power屬性。 </summary>
public static PowerEase PowerEase { get; set; } = new PowerEase();
/// <summary> BackEase：略微收回動畫的動作，然後再開始進行動畫處理指示的路徑中。 </summary>
public static BackEase BackEase { get; set; } = new BackEase();
/// <summary> ElasticEase：創建類似於彈簧來回直到靜止的動畫 </summary>
public static ElasticEase ElasticEase { get; set; } = new ElasticEase();
/// <summary> BounceEase：創建彈跳效果。 </summary>
public static BounceEase BounceEase { get; set; } = new BounceEase();
/// <summary> CircleEase：創建加速和/或減速使用循環函數的動畫。 </summary>
public static CircleEase CircleEase { get; set; } = new CircleEase();
/// <summary> QuadraticEase：創建加速和/或減速使用的公式的動畫f(t) = t2。 </summary>
public static QuadraticEase QuadraticEase { get; set; } = new QuadraticEase();
/// <summary> CubicEase：創建加速和/或減速使用的公式的動畫f(t) = t3。 </summary>
public static CubicEase CubicEase { get; set; } = new CubicEase();
/// <summary> QuarticEase：創建加速和/或減速使用的公式的動畫f(t) = t4。 </summary>
public static QuarticEase QuarticEase { get; set; } = new QuarticEase();
/// <summary> QuinticEase：創建加速和/或減速使用的公式的動畫f(t) = t5。 </summary>
public static QuinticEase QuinticEase { get; set; } = new QuinticEase();
/// <summary> ExponentialEase：創建加速和/或減速使用指數公式的動畫。 </summary>
public static ExponentialEase ExponentialEase { get; set; } = new ExponentialEase();
/// <summary> SineEase：創建加速和/或減速使用正弦公式的動畫。 </summary>
public static SineEase SineEase { get; set; } = new SineEase();
}
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);
}