示例: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
最新文章
- 2016 Multi-University Training Contest 3
- 单纯形方法(Simplex Method)
- javascript原型方法
- subList和asList
- SynchronousQueue
- java笔记12之面向对象初始
- 导出DBF,并且提供下载 .
- 【English】20190428
- webpack4.0各个击破(9)—— karma篇
- ELK从5.6.3升级到6.3.0总结
- css、css3总结
- 深度学习框架PyTorch一书的学习-第三章-Tensor和autograd-2-autograd
- 优化以及bug
- 每天CSS学习之transform
- StringBuilder的实现与技巧ZZ
- C# BCC异或校验法
- IntelliJ: Maven projects need to be imported: Import Changes Enable Auto-Import
- (剑指Offer)面试题59:对称的二叉树
- undefined和“undefined”
- 将int转int数组并将int数组元素处理后转int,实现加密
热门文章
- MySQL truncate含有外键约束的条目报错
- Spring Boot 2 整合 Dubbo 框架 ,实现 RPC 服务远程调用
- (原+修改)Pip使用国内源安装opencv
- springboot+thymeleaf 实现图片文件上传及回显
- python处理excel函数xlrd、xlwt
- Python3+HTMLTestRunner+SMTP生成测试报告后发送邮件
- axios之Vue请求初始化数据放在Created还是Mounted?
- wp_list_categories()函数使用方法|wordpress函数
- WeUI教程/第三方扩展及其他UI框架对比
- 重新学习Spring注解——AOP