WPF:Animation动画--AnimationTiming动画时机
AnimationTiming动画时机
RepeatBehaviorExample重复行为动画
<StackPanel.Triggers><EventTrigger SourceName="restartButton" RoutedEvent="Button.Click"><BeginStoryboard Name="myBeginStoryboard"><Storyboard><!-- Create an animation that repeats indefinitely. --><DoubleAnimation Storyboard.TargetName="foreverRepeatingRectangle" Storyboard.TargetProperty="(Rectangle.Width)" From="50" To="300" Duration="0:0:2" RepeatBehavior="Forever" /><!-- Create an animation that repeats for four seconds. As a result, theanimation repeats twice. --> <DoubleAnimation Storyboard.TargetName="fourSecondsRepeatingRectangle" Storyboard.TargetProperty="(Rectangle.Width)"From="50" To="300" Duration="0:0:2" RepeatBehavior="0:0:4" /><!-- Create an animation that repeats twice. --><DoubleAnimation Storyboard.TargetName="twiceRepeatingRectangle" Storyboard.TargetProperty="(Rectangle.Width)" From="50" To="300" Duration="0:0:2" RepeatBehavior="2x" /> <!-- Create an animation that repeats 0.5 times. The resulting animationplays for one second, half of its Duration. It animates from 50 to 150. --><DoubleAnimation Storyboard.TargetName="halfRepeatingRectangle" Storyboard.TargetProperty="(Rectangle.Width)" From="50" To="300" Duration="0:0:2" RepeatBehavior="0.5x" /><!-- Create an animation that repeats for one second. The resulting animationplays for one second, half of its Duration. It animates from 50 to 150. --><DoubleAnimation Storyboard.TargetName="oneSecondRepeatingRectangle" Storyboard.TargetProperty="(Rectangle.Width)" From="50" To="300" Duration="0:0:1" RepeatBehavior="0:0:1" /> </Storyboard></BeginStoryboard></EventTrigger> <EventTrigger SourceName="stopButton" RoutedEvent="Button.Click"><StopStoryboard BeginStoryboardName="myBeginStoryboard" /></EventTrigger>
</StackPanel.Triggers></StackPanel>
Timeline.RepeatBehavior 属性:获取或设置此时间线的重复行为。
- 一个迭代 Count,指定时间线将要播放的次数;一个 TimeSpan 值,指定此时间线活动周期的总长度;或者特殊值 Forever,指定时间线应该无限重复。 默认值是 RepeatBehavior 的 Count 为 1,该值指示时间线播放一次。
- 如果指定了一个迭代 Count 且将时间线的 AutoReverse 属性设置为 true,则一次重复包含一次向前迭代和一次向后迭代。
- 除了指定时间线播放的次数,还可以指定希望时间线播放的总时间长度。 对于要重复的时间线,此 RepeatBehavior.Duration 值应该大于时间线的 Duration。 例如, Duration 为 2 秒且 RepeatBehavior.Duration 为 4 秒的时间线将播放两次。如果 RepeatBehavior.Duration 小于时间线的 Duration,则时间线的活动周期将缩短。
AutoReverseExample自动反转
注意:AutoReverse 属性如何在嵌套时间线上工作:最后一个AutoReverse设置在父并行时间线ParallelTimeline 此时为向前2次,再向后2次,若设置在具体动画DoubleAnimation,则会正常来回重复两次。
<!-- Create an animation that automatically reverses at the end of each iteration.Set the animation to repeat twice. As a result, then animation plays forward,the backward, then forward, and then backward again. --><DoubleAnimation Storyboard.TargetName="autoReverseRectangleWithRepeats" Storyboard.TargetProperty="(Rectangle.Width)"Duration="0:0:2" From="100" To="400" AutoReverse="True" RepeatBehavior="2x" /> <!-- Set the parent timeline's AutoReverse property to True and set the animation'sRepeatBehavior to 2x. As a result, the animation plays forward twice and thenbackwards twice. --> <ParallelTimeline AutoReverse="True"><DoubleAnimation Storyboard.TargetName="complexAutoReverseExample" Storyboard.TargetProperty="(Rectangle.Width)"Duration="0:0:2" From="100" To="400" RepeatBehavior="2x" /> </ParallelTimeline>
</Storyboard>
Timeline.AutoReverse 属性:获取或设置一个值,该值指示时间线在完成向前迭代后是否按相反的顺序播放。
- 如果时间线在每次迭代结束时按相反的顺序播放,则为 true;否则为 false。 默认值为 false。 如果将 AutoReverse 属性设置为 true,则时间线播放的时间长度是其 Duration 属性指定时间长度的二倍。
- 当时间线的 AutoReverse 属性设置为 true 并且它的 RepeatBehavior 属性使它重复时,每个向前迭代都跟有一个向后迭代。 这样就产生了一次重复。 例如,AutoReverse 值为 true 且迭代 Count 为 2 的时间线将向前播放一次,然后向后播放一次,再向前播放一次,然后再向后播放一次。
BeginTimeExample开始动画时间
<Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard><DoubleAnimation Storyboard.TargetName="defaultBeginTimeRectangle" Storyboard.TargetProperty="(Rectangle.Width)"BeginTime="0:0:0" From="20" To="400" Duration="0:0:2" FillBehavior="HoldEnd" /> <DoubleAnimation Storyboard.TargetName="delayedBeginTimeRectangle" Storyboard.TargetProperty="(Rectangle.Width)" BeginTime="0:0:5" From="20" To="400" Duration="0:0:2" FillBehavior="HoldEnd" /><ParallelTimeline BeginTime="0:0:5"> <DoubleAnimation Storyboard.TargetName="delayedAnimationWithDelayedParentRectangle" Storyboard.TargetProperty="(Rectangle.Width)" BeginTime="0:0:5" From="20" To="400" Duration="0:0:2" FillBehavior="HoldEnd" /></ParallelTimeline></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers>
Timeline.BeginTime 属性:获取或设置此 Timeline 将要开始的时间。
- 创建在序列中播放的时间线时,BeginTime 属性非常有用:通过增加共享同一个父级的连续时间线的 BeginTime,可以错开它们的播放时间。
- 负的 BeginTime 值使 Timeline 的行为如同在过去某个时间开始一样。 例如,BeginTime 为 - 2.5 秒且 Duration 为 5 秒的 Timeline 将看起来像是一开始就已完成了一半。
- 由 BeginTime 属性描述的时间以时间线父级的时间为单位进行度量。 例如,BeginTime 为 5 且其父级的 SpeedRatio 为 2 的时间线,实际将是在 2.5 秒后开始。
- 时间线自己的 SpeedRatio 设置将不影响其 BeginTime。 例如,BeginTime 为 5 秒、 SpeedRatio 为 2 且其父级时间线的 SpeedRatio 为 1 的时间线将在 5 秒(而不是 2.5 秒)后开始。
FillBehaviorExample填充行为
注意:当父时间线的FillBehavior为Stop时,子时间线都为Stop,当父时间线的FillBehavior为HoldEnd时,子时间线的由自身的为准。
Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard><!-- The animated rectangle's width reverts back to its non-animated valueafter the animation ends. --><DoubleAnimation Storyboard.TargetName="deactiveAnimationRectangle" Storyboard.TargetProperty="(Rectangle.Width)" From="100" To="400" Duration="0:0:2" FillBehavior="Stop" /><DoubleAnimation Storyboard.TargetName="holdEndAnimationRectangle" Storyboard.TargetProperty="(Rectangle.Width)" From="100" To="400" Duration="0:0:2" FillBehavior="HoldEnd" /> </Storyboard></BeginStoryboard></EventTrigger></Button.Triggers>
Timeline.FillBehavior 属性:获取或设置一个值,该值指定 Timeline 在活动周期结束后的行为方式。
- 一个值,用于指定时间线在其活动周期结束后但其父时间线仍处于活动周期或填充周期时的行为方式。 默认值为 HoldEnd。
- 如果希望动画在活动周期结束时保留其值,则将动画 FillBehavior 属性设置为 HoldEnd。 如果动画的活动周期已结束且 FillBehavior 的设置为 HoldEnd,则说明动画进入填充周期。 如果不希望动画在其活动周期结束时保留其值,则将其FillBehavior 属性设置为 Stop。
- 因为处于填充周期的动画将继续重写其目标属性值,所以尝试通过其他方法设置目标属性的值似乎不起任何作用。
- 当父时间线停止播放和填充时,子时间线也将停止;如果希望子时间线进行填充,请确保其父时间线的 FillBehavior 为 HoldEnd。
SpeedExample速度示例
注意:父时间线的SpeedRatio影响到子时间线,值为相乘
<DoubleAnimationStoryboard.TargetName="slowerRectangle" Storyboard.TargetProperty="(Rectangle.Width)" From="20" To="400" Duration="0:0:2" SpeedRatio="0.5" />
Timeline.SpeedRatio 属性:获取或设置此 Timeline 的时间相对于其父级的前进速率。
- 一个大于 0 的有限值,表示此时间线的时间相对于其父级的前进速率;如果此时间线为根时间线,则为默认时间线速度。 默认值为 1。
- 某个时间线的 SpeedRatio 设置对其 BeginTime 没有影响。如果该时间线为根时间线,则该时间为时间线的时钟开始时刻,否则该时间相对于该时间线的父级。
- 如果指定了 AccelerationRatio 或 DecelerationRatio,则 SpeedRatio 是整个时间线自然长度的平均速率。
Acceleration and DecelerationExample加速减速动画
注意:一个介于 0 和 1 之间的值(包括 0 和 1),用于指定在将时间消逝从其最大速率减速到零所占用时间线的 Duration 的百分比。 如果同时设置时间线的 AccelerationRatio 属性,则 DecelerationRatio 和 AccelerationRatio 之和必须小于等于 1。 默认值为 0。
<!-- Creates an animation that accelerates through 40% of its duration anddecelerates through the 60% of its duration. --><DoubleAnimation Storyboard.TargetName="acceleratedAndDeceleratedRectangle" Storyboard.TargetProperty="(Rectangle.Width)"AccelerationRatio="0.4" DecelerationRatio="0.6" Duration="0:0:10" From="20" To="400" /></Storyboard>
</BeginStoryboard></EventTrigger>
</Button.Triggers>
HandoffVersusComposeExample
<Page.Resources><Storyboard x:Key="FadeToHalf"><DoubleAnimation To="0.5" Duration="0:0:1.0"
Storyboard.TargetProperty="Fill.Opacity" /><DoubleAnimation To="45" Duration="0:0:1.0"
Storyboard.TargetProperty="Height" /></Storyboard> <Storyboard x:Key="FadeToFull"><DoubleAnimation Duration="0:0:1.0"
Storyboard.TargetProperty="Fill.Opacity" /><DoubleAnimation Duration="0:0:1.0"
Storyboard.TargetProperty="Height" /></Storyboard> <Style x:Key="Compose" TargetType="{x:Type Rectangle}"><Setter Property="Fill" Value="Red" /><Setter Property="Width" Value="90" /><Setter Property="Height" Value="90" /><Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter"><EventTrigger.Actions><BeginStoryboard Storyboard="{StaticResource FadeToHalf}" HandoffBehavior="Compose"/></EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave"><EventTrigger.Actions><BeginStoryboard Storyboard="{StaticResource FadeToFull}" HandoffBehavior="Compose"/></EventTrigger.Actions>
</EventTrigger></Style.Triggers></Style><Style x:Key="Handoff" TargetType="{x:Type Rectangle}"><Setter Property="Fill" Value="Blue" /><Setter Property="Width" Value="90" /><Setter Property="Height" Value="90" /><Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter"><EventTrigger.Actions><BeginStoryboard Storyboard="{StaticResource FadeToHalf}" HandoffBehavior="SnapshotAndReplace"/></EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave"><EventTrigger.Actions><BeginStoryboard Storyboard="{StaticResource FadeToFull}" HandoffBehavior="SnapshotAndReplace"/></EventTrigger.Actions>
</EventTrigger></Style.Triggers></Style></Page.Resources>
<Canvas Background="White"><TextBlock Canvas.Top="50" Canvas.Left="100" Foreground="Red">Compose</TextBlock><TextBlock Canvas.Top="50" Canvas.Left="200" Foreground="Blue">SnapshotAndReplace</TextBlock><Rectangle Style="{StaticResource Handoff}" Canvas.Top="100" Canvas.Left="100" /><Rectangle Style="{StaticResource Compose}" Canvas.Top="100" Canvas.Left="200" />
BeginStoryboard.HandoffBehavior 属性:获取或设置正确的提交行为以启动此演示图板中的动画时钟周期。一般指定演示图板动画之间的切换行为。默认值为 SnapshotAndReplace。
- 当通过使用 HandoffBehavior.Compose 将 Storyboard、 AnimationTimeline 或 AnimationClock 应用于属性时,任何以前与该属性关联的 Clock 对象都会继续占用系统资源,计时系统不会自动移除这些时钟周期。
- 在使用 Compose 应用大量时钟时,若要避免出现性能问题,应在时钟应用完成后从经过动画处理的属性中移除组合时钟。 用来移除时钟的方法有以下几种:ApplyAnimationClock(,null)或BeginAnimation(,null).这主要是生存期很长的对象上的动画所具有的问题。将对象作为垃圾回收时,同时会断开其时钟的连接并将其时钟作为垃圾回收。
- 如果值为 Compose,在出现动画重叠时,动画之间的过渡将较为平滑,而如果值为 SnapshotAndReplace,则会使新动画立即取代之前的重叠动画。
DatabindingExample动画绑定值
<Page.Triggers><EventTrigger RoutedEvent="Button.Click" SourceName="myButton"><EventTrigger.Actions><BeginStoryboard ><Storyboard FillBehavior="HoldEnd" ><DoubleAnimation FillBehavior="HoldEnd" BeginTime="00:00:00" Storyboard.TargetName="MyAnimatedRectangle" Storyboard.TargetProperty="Width" Duration="00:00:03"To="{Binding ElementName=AnimationDestinationValueSlider, Path=Value}"From="0" /></Storyboard></BeginStoryboard ></EventTrigger.Actions></EventTrigger></Page.Triggers><TextBlock Margin="0,30,0,0">Animated Rectangle</TextBlock><Rectangle Width="50" Height="50" Fill="Red" Name="MyAnimatedRectangle"HorizontalAlignment="Left"Margin="0,10,0,0" /><Button Content="Trigger animation" Width="150" Height="40" Name="myButton"/>
对动画数To值进行绑定,值为开始动画时候已设置的值
IsCumulativeExample是否累计值
<Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard><!-- Animation with IsCumulative set to "True". --><DoubleAnimation Storyboard.TargetName="withIsCumulative" Storyboard.TargetProperty="(Rectangle.Width)" Duration="0:0:1" From="100" By="100" IsCumulative="True" RepeatBehavior="4x" AutoReverse="True" /><!-- Animation with IsCumulative set to "False". --><DoubleAnimation Storyboard.TargetName="withoutIsCumulative" Storyboard.TargetProperty="(Rectangle.Width)" Duration="0:0:1" From="100" By="100" IsCumulative="False" RepeatBehavior="4x" AutoReverse="True" /></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers>
DoubleAnimation.IsCumulative 属性:该值指定动画重复时是否累计该动画的值。默认值为 false
- 如果将该属性设置为 true,则只在该动画的 RepeatBehavior 属性使其简单重复时累计该动画的输出值。 该动画在重新启动时不累计其值,这是因为已重复该动画的父级,或者是因为已从 Begin 调用中重新启动该动画的时钟。
IsAdditiveExample
注意:当正在进行动画时,再次开始动画,当前值会累计基值。
<Button.Triggers><EventTrigger RoutedEvent="Button.Click"><BeginStoryboard><Storyboard><!-- Animation with IsCumulative set to "True". --><DoubleAnimation Storyboard.TargetName="withIsAdditive" Storyboard.TargetProperty="(Rectangle.Width)" Duration="0:0:1" From="100" By="100" IsAdditive="True" /><!-- Animation with IsCumulative set to "False". --><DoubleAnimation Storyboard.TargetName="withoutIsAdditive" Storyboard.TargetProperty="(Rectangle.Width)" Duration="0:0:1" From="100" By="100" IsAdditive="False" /></Storyboard></BeginStoryboard></EventTrigger></Button.Triggers>
DoubleAnimation.IsAdditive 属性:该值指示是否应将目标属性的当前值与此动画的起始值相加。默认值为 false。
- 如果动画仅设置了其 From、 To 或 By 属性之一,则设置此属性将无效。
- IsAdditive 属性指定是否将动画的输出值添加到已进行动画处理的属性的起始值(基值)。 您可以将 IsAdditive 属性用于大多数基本动画和大多数关键帧动画。
扩展:
尺码Path的代码数据:
<!-- This rectangle is animated with IsAdditive set to "True". -->
<Rectangle Name="withIsAdditive"Width="100" Height="20" Margin="12,0,0,5" Fill="#AA3333FF" HorizontalAlignment="Left" />
<!-- Measuring Stick -->
<Path Stroke="Black" StrokeThickness="2"
Data="M 12,0 L 112,0" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 112,0 L 112,8" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 112,-9 L 212,-9" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 212,-9 L 212,0" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 212,-9 L 312,-9" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 312,-9 L 312,0" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 312,-9 L 412,-9" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 412,-9 L 412,0" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 412,-9 L 512,-9" />
<Path Stroke="Black" StrokeThickness="2"
Data="M 512,-9 L 512,0" />
<!-- End of Measuring Stick -->
WPF:Animation动画--AnimationTiming动画时机相关推荐
- 【转】WPF 窗体淡入淡出动画
[转]WPF 窗体淡入淡出动画 第一种 <Window.Triggers><EventTrigger RoutedEvent="Window.Loaded" &g ...
- 小人快跑之WPF基础——图形与动画(二)
前言: 昨天说到了利用基于帧的动画来实现效果,这其实与WPF提供的图形与动画功能没有太大关系,在这里我们还是要关注一下WPF为我们提供的高级方法来解决问题. 本次主题将简述WPF中有关"图形 ...
- 基于animation.css实现动画旋转特效
分享一款基于animation.css实现动画旋转特效.这是一款基于CSS3实现的酷炫的动画旋转特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div clas ...
- 【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )
文章目录 ◯.AnimatedBuilder 引入 一.创建动画控制器 二.创建动画 三.创建动画作用的组件 四.创建 AnimatedBuilder 关联动画与组件 五.动画运行 六.完整代码示例 ...
- 【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )
文章目录 ◯.AnimatedWidget 组件引入 一.创建 AnimatedWidget 动画组件 二.创建动画控制器 三.创建动画 四.动画运行 五.完整代码示例 六.相关资源 Animated ...
- 【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )
文章目录 一.创建动画控制器 二.创建动画 三.设置值监听器 四.设置状态监听器 五.布局中使用动画值 六.动画运行 七.完整代码示例 八.相关资源 Flutter 动画基本流程 : ① 创建动画控制 ...
- 【Flutter】Animation 动画 ( Flutter 动画的核心类 | Animation | CurvedAnimation | AnimationController | Tween )
文章目录 一.动画的核心类 Animation 二.动画的核心类 CurvedAnimation 三.动画的核心类 AnimationController 四.动画的核心类 Tween 五.相关资源 ...
- 【Flutter】Animation 动画 ( Flutter 动画类型 | Flutter 动画的核心类 )
文章目录 一.Flutter 动画类型 二.Flutter 动画的核心类 三.相关资源 Flutter Animation 动画 : Flutter 动画类型 为 Widget 组件添加动画 为动画添 ...
- 【Android 属性动画】属性动画 Property Animation 与 视图动画 View Animation 区别
文章目录 一.动画效果添加对象 二.动画效果类型 三.动画效果与实际属性 四.开发复杂程度 属性动画 Property Animation 可以为 任何对象 ( View 对象 / 非 View 对象 ...
最新文章
- 一步一步学Silverlight 2系列(18):综合实例之RSS阅读器
- 任务管理器显示不全 - 确定谁占用了我们的端口
- 【转】从哈希存储到Bloom Filter
- python转嵌入式c_在C嵌入式python中刷新导入
- sql2005-数据库备份方案
- Activiti 学习记录1 inclusiveGateway与 exclusiveGateway的区别
- php 获取内容页图片,织梦CMS如何从列表页获取内容页的图片
- 使用Spring Secuirty Oauth2实现SSO单点登录
- MongoDB(window安装及服务配置)
- NVIDIA Parallel Nsight
- 12 个实用的前端开发技巧总结
- Fatal error in launcher: Unable to create process using ''之解决办法
- 用turtle绘图做一个钟表时钟
- 白鹭(egret)搜素引擎入门
- 前端实现旗帜飘动效果系列 (Ⅳ):webgl实现
- linux文件如何改名字
- 噪声分析基础(公式)知识
- 计算机网络协议测试技术分析
- Mysql存储引擎Innodb的读写锁、行级锁
- 最简单的方波变三角波__RC一阶电路__方波变三角波
热门文章
- 杭电1276--士兵队列训练问题
- proc文件系统探索 之 根目录下的文件[三]
- oral_quiz-#求链表中的倒数第K个结点#
- 如何破解Red Hat Enterprise 4的root密码(救援有密码)
- 智能实验室-杀马(Defendio) 3.0.0.580 beta 4
- MySQL 解压缩安装
- Java 门面模式 浅析
- android有用的知识
- 民族、学历学位、所学专业、、专业技术职务 对应表
- PowerShell_5_零基础自学课程_5_自定义PowerShell环境及Powershell中的基本概念