正文
示例:WPF中自定义StoryBoarService在代码中封装StoryBoard、Animation用于简化动画编写
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
原文:示例:WPF中自定义StoryBoarService在代码中封装StoryBoard、Animation用于简化动画编写
一、目的:通过对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);
}
下载地址:https://github.com/HeBianGu/WPF-ControlBase.git