WPF中的动画——(三)时间线(TimeLine)

简介: 原文:WPF中的动画——(三)时间线(TimeLine)时间线(TimeLine)表示时间段。 它提供的属性可以让控制该时间段的长度、开始时间、重复次数、该时间段内时间进度的快慢等等。在WPF中内置了如下几种TimeLine: AnimationTimeline :前面已经介绍过,主要用于属性的过渡,这种是最常见的动画。
原文: WPF中的动画——(三)时间线(TimeLine)

时间线(TimeLine)表示时间段。 它提供的属性可以让控制该时间段的长度、开始时间、重复次数、该时间段内时间进度的快慢等等。在WPF中内置了如下几种TimeLine:

  • AnimationTimeline  :前面已经介绍过,主要用于属性的过渡,这种是最常见的动画。
  • MediaTimeline:用于控制媒体文件播放的时间线。
  • ParallelTimeline:ParallelTimeline 是一种可对其他时间线进行分组的时间线,可用于实现较复杂的动画。
  • Storyboard  :一种特殊的 ParallelTimeline,可为其包含的时间线提供对象和属性目标信息。在XAML中经常使用到它,在后面再专项介绍。
  • TimelineGroup:可包含其他 Timeline 对象的 Timeline 对象的抽象类。

 

常用属性:

  • Duration: 动画播放时间长度
  • RepeatBehavior: 重复行为(重复次数)
  • FillBehavior: 动画结束后的行为(保持动画的结束状态或恢复到初始状态)
  • AutoReverse: 按相反的顺序重复播放动画
  • SpeedRatio: 动画播放速率(用于加速或减速播放)
  • BeginTime: 动画播放的起始时间

 

时间线控制:

到目前为止,我们虽然能创建并执行动画,但仅仅能通过UIElement. BeginAnimation执行开始动画,还无法对动画进行交互控制。在WPF中,还提供了一系列对时间线的控制操作,如:开始、停止、暂停等。它们是通过Clock对象的Controller属性来进行的。下面就是一个简单的示例:

    var widthAnimation = new DoubleAnimation()
    {
        From = 0,
        To = 320,
        Duration = TimeSpan.FromSeconds(5),
    };

    var clock = widthAnimation.CreateClock();
    button.ApplyAnimationClock(WidthProperty, clock);

    await Task.Delay(3000);
    clock.Controller.Pause();

从这个代码中可以看出,控制时间线的一般步骤如下:

  1. 通过CreateClock函数创建时钟对象Clock
  2. 通过UIElement. ApplyAnimationClock函数启用支持时钟控制的动画
  3. 使用Clock. Controller的方法控制动画

更加详尽的例子可以参看MSDN文档:以交互方式控制时钟

除了在Controller中提供了交互方法以为,Clock对象还提供了一系列属性和事件方便我们的获取状态,常见的有:

  • CurrentProgress    当前进度
  • CurrentState    当前状态
  • CurrentTime    当前播放时间
  • IsPaused    是否处于暂停状态
  • NaturalDuration    动画持续时间

也提供了一系列事件来主动通知状态的变更,常用的事件为:

  • Completed:动画结束时的通知
  • CurrentGlobalSpeedInvalidated 播放速率变化时的通知,
  • CurrentStateInvalidated 状态变化时的通知
  • CurrentTimeInvalidated 播放时间变化时的通知
  • RemoveRequested 动画移除时候的通知

这几个事件在TimeLine对象中也是有的,这样,在不使用Clock对象的时候也可以或者这些状态的变化。 如果想更加收入的理解计时系统的工作方式,可以看看动画和计时系统概述一文。

另外,有的特殊的TimeLine对象,如Storyboard本身就封装了动画的控制相关内容,可以直接对动画进行控制。关于Storyboard需要介绍的内容比较多,后面再单独写文章介绍。

 

参考资料:

目录
相关文章
|
C# 前端开发
WPF加载等待动画
原文:WPF加载等待动画 原文地址:https://www.codeproject.com/Articles/57984/WPF-Loading-Wait-Adorner 界面遮罩 等待动画全局颜色 ...
3371 0
|
1月前
|
C#
WPF —— 动画缩放变换
`ScaleTransform`用于二维x-y坐标系中对象的缩放,可沿X或Y轴调整。在故事板中,通过RenderTransform.ScaleX和ScaleY属性控制缩放。示例代码展示了如何设置按钮的RenderTransformOrigin、Background等属性,并通过LayoutTransform应用ScaleTransform。当鼠标进入按钮时,EventTrigger启动DoubleAnimation实现X和Y轴的缩放动画。最后,展示了如何将动画集成到自定义按钮样式中。
43 0
|
9月前
|
C#
WPF技术之动画系列-上下运动
本例子展现动画小球上下循环运动
152 0
|
C#
WPF特效-鱼游动动画2
原文:WPF特效-鱼游动动画2           纯代码撸动画实践2:           原图:(png格式)                                                添加Effect以及Effect动画处理后Gif效果:                                     处理: 眼部放大缩小动画; 嘴缩放动画; 尾部收缩动画;  颜色变化效果动画。
1028 0
|
C# 图形学
WPF特效-鱼游动动画
原文:WPF特效-鱼游动动画   实现思路:           通过VisualBrush Binding方式获取鱼局部图像,在Viewport3D中创建ModelVisual3D块并把获取到的局部图通过VisualBrush Binding方式赋值。
940 0
|
C# C++ 图形学
WPF特效-鱼游动动画3
原文:WPF特效-鱼游动动画3 WPF不支持骨骼,故使用3DMax导出了序列模型文件(.mtl;.obj)。 方法1: 使用Blend 2013打开所有obj文件,拖动排列一下即可在usercontrol中显示,使用RenderTargetBitmap生成png的序列图,使用Timer播放序列图即可。
1078 0
|
C#
WPF特效-粒子动画
原文:WPF特效-粒子动画 WPF实现泡泡龙小游戏效果。     /// -Ball to Ball Collision - Detection and Handling    /// http://stackoverflow.
1434 0
|
C# 前端开发
WPF之基于路径的动画
原文:WPF之基于路径的动画   不是突然想到要做一个路径动画的,是今天谈业务需求的时候偶然谈到的,   一艘船从一个国家到另外一个国家,沿着一条固定的路线前进,就是一个简单的动画效果,以前貌似在书上看到过,所以自己也来做一个。
1064 0
|
C# 索引 容器
WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画
原文:WPF ListView控件设置奇偶行背景色交替变换以及ListViewItem鼠标悬停动画 利用WPF的ListView控件实现类似于Winform中DataGrid行背景色交替变换的效果,同时增加鼠标的悬停效果。
1759 0
|
前端开发 C# 算法
WPF路径动画(动态逆向动画)
原文:WPF路径动画(动态逆向动画) WPF 中的Path.Data 不再多介绍,M开始坐标点 C弧度坐标点 L 直线坐标点   个人写了关于Path.Data数据反向,意思就是把Path的数据逆转,但是图形是没有变化的 Xaml代码如下: ...
1916 0