iis服务器助手广告广告
返回顶部
首页 > 资讯 > 后端开发 > 其他教程 >WPF实现动画效果(三)之时间线(TimeLine)
  • 380
分享到

WPF实现动画效果(三)之时间线(TimeLine)

2024-04-02 19:04:59 380人浏览 八月长安
摘要

WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果

WPF动画效果系列

WPF实现动画效果(一)之基本概念

WPF实现动画效果(二)之From/To/By 动画

WPF实现动画效果(三)之时间线(TimeLine)

WPF实现动画效果(四)之缓动函数

WPF实现动画效果(五)之关键帧动画

WPF实现动画效果(六)之路径动画

WPF实现动画效果(七)之演示图板

正文

时间线(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();

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

  • 通过CreateClock函数创建时钟对象Clock

  • 通过UIElement. ApplyAnimationClock函数启用支持时钟控制的动画

  • 使用Clock. Controller的方法控制动画

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

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

  • CurrentProgress    当前进度

  • CurrentState    当前状态

  • CurrentTime    当前播放时间

  • IsPaused    是否处于暂停状态

  • NaturalDuration    动画持续时间

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

  • Completed:动画结束时的通知

  • CurrentGlobalSpeedInvalidated 播放速率变化时的通知,

  • CurrentStateInvalidated 状态变化时的通知

  • CurrentTimeInvalidated 播放时间变化时的通知

  • RemoveRequested 动画移除时候的通知

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

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

参考资料:

  • 计时行为概述

  • 计时事件概述

  • Timeline 类

  • Clock 类

  • 同步定位时钟

到此这篇关于WPF实现动画效果之时间线(TimeLine)的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: WPF实现动画效果(三)之时间线(TimeLine)

本文链接: https://www.lsjlt.com/news/152352.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • WPF实现动画效果(三)之时间线(TimeLine)
    WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果...
    99+
    2024-04-02
  • WPF实现动画效果(六)之路径动画
    WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果...
    99+
    2024-04-02
  • WPF实现动画效果
    学习平台 微软开发者博客:https://devblogs.microsoft.com/WT.mc_id=DT-MVP-5003986微软文档与学习:https://docs.mic...
    99+
    2024-04-02
  • WPF实现动画效果(二)之From/To/By动画
    WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果...
    99+
    2024-04-02
  • WPF实现动画效果(五)之关键帧动画
    WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果...
    99+
    2024-04-02
  • 微信小程序实现Timeline时间线效果
    微信小程序实现类似elementUI的Timeline时间线效果,自适应页面与文本 wxml代码: <view class="box">   <view wx:fo...
    99+
    2024-04-02
  • WPF实现动画效果(四)之缓动函数
    WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果...
    99+
    2024-04-02
  • WPF实现倒计时转场动画效果
    代码如下 一、创建 CountdownTimer.xaml 继承ContentControl代码如下。 using System; using System.Linq; u...
    99+
    2022-11-13
    WPF倒计时动画 WPF 倒计时 WPF 转场 动画
  • WPF实现动画效果(一)之基本概念
    WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果...
    99+
    2024-04-02
  • WPF实现动画效果(七)之演示图板
    WPF动画效果系列 WPF实现动画效果(一)之基本概念 WPF实现动画效果(二)之From/To/By 动画 WPF实现动画效果(三)之时间线(TimeLine) WPF实现动画效果...
    99+
    2024-04-02
  • Element Timeline时间线的实现
    目录组件—时间线⾃定义节点样式⾃定义时间戳组件—时间线 基础用法 <div class="block"> <div clas...
    99+
    2024-04-02
  • WPF怎么实现3D画廊动画效果
    要实现3D画廊动画效果,可以使用WPF的3D功能和动画功能。以下是一个简单的实现步骤:1. 创建一个WPF项目,并添加一个Viewp...
    99+
    2023-08-18
    WPF
  • 基于WPF如何实现3D画廊动画效果
    本篇内容介绍了“基于WPF如何实现3D画廊动画效果”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!接下来想做一个图廊,所以并没有必要用立方体,...
    99+
    2023-07-05
  • WPF实现流光动画特效
    一、代码 <Window.Resources> <!--外--> <Storyboard x:Key="Storyboar...
    99+
    2024-04-02
  • 如何利用JS实现时间轴动画效果
    目录css动画什么是时间轴动画?动画对象动画函数思考总结css动画 在前端开发中,一些简单的动效往往是使用 css3 的 @keyframes 来实现的 ,如: .div1 { ...
    99+
    2024-04-02
  • gojs实现蚂蚁线动画效果
    目录一、gojs 实现1. 绘图2. 虚线实现3. 让虚线动起来二、虚线及虚线动画背后的原理三、虚线的一些概念四、css 绘制边框虚线在绘制 dag 图时,通过节点和来箭头的连线来表...
    99+
    2024-04-02
  • 基于WPF实现3D画廊动画效果的示例代码
    接下来想做一个图廊,所以并没有必要用立方体,只需做一些“墙壁”就行了。 而在一个平面上建起另一个矩形的平面,实则非常容易,只需输入墙角的两点和高度就可以了,这...
    99+
    2023-02-28
    WPF实现3D画廊效果 WPF 3D画廊 WPF 3D
  • Android如何实现时间线效果
    目录1、背景2、分析2.1功能分析2.2细节分析2.3方案设想3、编码3.1第一版3.2第二版4、结语1、背景 这天下班前,老板找到小庄:“有个页面要优化,小需求,你跟进一下。” 小...
    99+
    2024-04-02
  • 基于WPF实现控件轮廓跑马灯动画效果
    代码如下 一、创建EdgeLight.xaml代码如下。 <ResourceDictionary xmlns="http://schemas.microsoft.com/win...
    99+
    2022-11-13
    WPF 控件轮廓跑马灯动画 WPF轮廓动画 WPF跑马灯动画
  • 基于Flutter实现爱心三连动画效果
    目录前言Animation 简介AnimationController 简介应用 - 爱心三连总结前言 我们开始 Flutter 动画相关篇章之旅,在应用中通过动效能够给用户带来更愉...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作