[源码下载]

背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画

作者:webabcd

介绍
背水一战 Windows 10 之 动画

  • 线性动画 - ColorAnimation, DoubleAnimation, PointAnimation
  • 关键帧动画 - ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ObjectAnimationUsingKeyFrames

示例
1、演示线性动画的应用
Animation/LinearAnimation.xaml

  1. <Page
  2. x:Class="Windows10.Animation.LinearAnimation"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:local="using:Windows10.Animation"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. mc:Ignorable="d">
  9.  
  10. <Grid Background="Transparent">
  11.  
  12. <!--
  13. 线性动画一共有 3 种:ColorAnimation, DoubleAnimation, PointAnimation, 它们均继承自 Timeline
  14.  
  15. Storyboard.TargetName - 附加属性,要进行动画处理的对象的名称
  16. Storyboard.TargetProperty - 附加属性,要进行动画处理的对象的属性
  17. BeginTime - 时间线在被触发 BeginTime 的时间后才能开始播放
  18. TimeSpan - [-][日.]时:分:秒[.1位到7为的秒后的小数](可为正;可为负;可为空;默认值为 0)
  19. From - 动画的起始值
  20. To - 动画的结束值
  21. By - 动画从起始值开始计算,所需变化的总量(To 优先于 By)
  22. Duration - 时间线的持续时间
  23. TimeSpan - [-][日.]时:分:秒[.1位到7为的秒后的小数]
  24. Automatic - 自动确定
  25. Forever - 无限长
  26. AutoReverse - 动画完成后是否要原路返回。默认值为 false
  27. RepeatBehavior - 动画重复播放的时间、次数或类型
  28. TimeSpan - [-][日.]时:分:秒[.1位到7为的秒后的小数]
  29. nx - 播放次数。1x, 2x, 3x
  30. Forever - 永久播放
  31. SpeedRatio - 时间线的速率的倍数。默认值 1
  32. FillBehavior - 动画结束后的行为(System.Windows.Media.Animation.FillBehavior 枚举)
  33. FillBehavior.HoldEnd - 动画结束后,UI 保留动画后的状态。默认值
  34. FillBehavior.Stop - 动画结束后,UI 恢复为动画前的状态
  35.  
  36. 注意:
  37. 1、在 WinRT 中为了流畅的体验,部分动画被优化成了“独立动画”,即动画不依赖于 UI 线程
  38. 2、但是也有一部分动画无法优化成“独立动画”,我们把这类动画称作“依赖动画”,其需要在 UI 线程上运行
  39. 3、通过将 EnableDependentAnimation 设置为 true(默认为 false),开启“依赖动画”
  40. 4、通过将 Timeline.AllowDependentAnimations 设置为 false(默认为 true),可以全局禁止开启“依赖动画”
  41.  
  42. Independent Animation - 独立动画
  43. Dependent Animation - 依赖动画
  44. -->
  45.  
  46. <Grid.Resources>
  47. <BeginStoryboard x:Name="storyboardColor">
  48. <Storyboard>
  49. <!--Color 值线性动画-->
  50. <!--
  51. 动画要修改的属性是 Ellipse.Fill,Fill 是 Brush 类型,先把其转换为 SolidColorBrush 类型,然后设置 SolidColorBrush 的 Color 属性
  52. 所以将 Storyboard.TargetProperty 设置为 (Ellipse.Fill).(SolidColorBrush.Color),也可以设置为 (Fill).(SolidColorBrush.Color),也可以设置为 (Ellipse.Fill).Color,也可以设置为 (Fill).(Color)
  53. 类似的比如:(UIElement.RenderTransform).(CompositeTransform.TranslateY) 以及 (UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX) 等
  54. -->
  55. <ColorAnimation
  56. Storyboard.TargetName="ellipse"
  57. Storyboard.TargetProperty="(Ellipse.Fill).(SolidColorBrush.Color)"
  58. BeginTime="00:00:00"
  59. From="Red"
  60. To="Yellow"
  61. Duration="0:0:3"
  62. AutoReverse="true"
  63. RepeatBehavior="3x">
  64. </ColorAnimation>
  65. </Storyboard>
  66. </BeginStoryboard>
  67.  
  68. <BeginStoryboard x:Name="storyboardDouble">
  69. <Storyboard>
  70. <!--Double 值线性动画-->
  71. <!--
  72. 动画要修改的属性是 Canvas.Left(附加属性)
  73. 将 Storyboard.TargetProperty 设置为 (Canvas.Left)
  74. -->
  75. <DoubleAnimation
  76. Storyboard.TargetName="rectangle"
  77. Storyboard.TargetProperty="(Canvas.Left)"
  78. From="100"
  79. By="100"
  80. BeginTime="0:0:0"
  81. Duration="00:00:03"
  82. AutoReverse="true"
  83. RepeatBehavior="Forever">
  84. </DoubleAnimation>
  85. </Storyboard>
  86. </BeginStoryboard>
  87.  
  88. <Storyboard x:Name="storyboardPoint">
  89. <!--Point 值线性动画-->
  90. <!--
  91. 动画要修改的属性是 Center
  92. 将 Storyboard.TargetProperty 设置为 Center,也可以将其设置为 (EllipseGeometry.Center)
  93. -->
  94. <PointAnimation
  95. EnableDependentAnimation="True"
  96. Storyboard.TargetName="ellipseGeometry"
  97. Storyboard.TargetProperty="Center"
  98. BeginTime="00:00:00"
  99. From="50,50"
  100. To="200,200"
  101. Duration="00:00:03"
  102. AutoReverse="true"
  103. RepeatBehavior="Forever">
  104. </PointAnimation>
  105. </Storyboard>
  106. </Grid.Resources>
  107.  
  108. <StackPanel Margin="10 0 10 10">
  109.  
  110. <Ellipse x:Name="ellipse" Fill="Orange" Width="200" Height="100" HorizontalAlignment="Left" />
  111.  
  112. <Canvas Width="400" Height="100" HorizontalAlignment="Left" Margin="0 10 0 0">
  113. <Rectangle x:Name="rectangle" Fill="Orange" Width="200" Height="100" Canvas.Left="100" />
  114. </Canvas>
  115.  
  116. <Path Fill="Orange">
  117. <Path.Data>
  118. <EllipseGeometry x:Name="ellipseGeometry" Center="50,50" RadiusX="15" RadiusY="15" />
  119. </Path.Data>
  120. </Path>
  121.  
  122. <!--用于演示如何在 CodeBehind 端定义 Storyboard-->
  123. <Ellipse x:Name="ellipse2" Fill="Orange" Width="200" Height="100" HorizontalAlignment="Left" />
  124.  
  125. </StackPanel>
  126. </Grid>
  127. </Page>

Animation/LinearAnimation.xaml.cs

  1. /*
  2. * 本例用于演示如何通过 Storyboard 使用线性动画,线性动画一共有 3 种类型:ColorAnimation, DoubleAnimation, PointAnimation, 它们均继承自 Timeline
  3. */
  4.  
  5. using System;
  6. using Windows.UI;
  7. using Windows.UI.Xaml;
  8. using Windows.UI.Xaml.Controls;
  9. using Windows.UI.Xaml.Media;
  10. using Windows.UI.Xaml.Media.Animation;
  11.  
  12. namespace Windows10.Animation
  13. {
  14. public sealed partial class LinearAnimation : Page
  15. {
  16. public LinearAnimation()
  17. {
  18. this.InitializeComponent();
  19.  
  20. this.Loaded += LinearAnimation_Loaded;
  21. }
  22.  
  23. private void LinearAnimation_Loaded(object sender, RoutedEventArgs e)
  24. {
  25. // 启动动画
  26. storyboardPoint.Begin();
  27.  
  28. // 停止动画
  29. // storyboardPoint.Stop();
  30.  
  31. // 用于演示如何在 CodeBehind 端定义 Storyboard
  32. // 定义一个 ColorAnimation
  33. ColorAnimation ca = new ColorAnimation();
  34. ca.BeginTime = TimeSpan.Zero;
  35. ca.From = Colors.Red;
  36. ca.To = Colors.Yellow;
  37. ca.Duration = TimeSpan.FromSeconds();
  38. ca.AutoReverse = true;
  39. ca.RepeatBehavior = new RepeatBehavior();
  40. Storyboard.SetTarget(ca, ellipse2);
  41. Storyboard.SetTargetProperty(ca, "(Fill).(Color)");
  42.  
  43. // 定义一个 DoubleAnimation
  44. DoubleAnimation da = new DoubleAnimation()
  45. {
  46. To = 0.9,
  47. Duration = TimeSpan.FromSeconds(),
  48. AutoReverse = true,
  49. RepeatBehavior = RepeatBehavior.Forever
  50. };
  51. Storyboard.SetTarget(da, ellipse2);
  52. Storyboard.SetTargetProperty(da, "(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)");
  53. // 注:要用 Storyboard 控制 ScaleTransform 则必须先为元素声明好 ScaleTransform(否则运行时会报错)
  54. TransformGroup Group = new TransformGroup();
  55. Group.Children.Add(new ScaleTransform());
  56. ellipse2.RenderTransform = Group;
  57.  
  58. // 将定义好的动画添加进 Storyboard 然后启动动画
  59. Storyboard sb = new Storyboard();
  60. sb.Children.Add(ca);
  61. sb.Children.Add(da);
  62. sb.Begin();
  63.  
  64. /*
  65. * 注意:
  66. * 1、在 WinRT 中为了流畅的体验,部分动画被优化成了“独立动画”,即动画不依赖于 UI 线程
  67. * 2、但是也有一部分动画无法优化成“独立动画”,我们把这类动画称作“依赖动画”,其需要在 UI 线程上运行
  68. * 3、通过将 EnableDependentAnimation 设置为 true(默认为 false),开启“依赖动画”
  69. * 4、通过将 Timeline.AllowDependentAnimations 设置为 false(默认为 true),可以全局禁止开启“依赖动画”
  70. */
  71. }
  72. }
  73. }

2、演示关键帧动画的应用
Animation/KeyFrameAnimation.xaml

  1. <Page
  2. x:Class="Windows10.Animation.KeyFrameAnimation"
  3. xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  4. xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
  5. xmlns:local="using:Windows10.Animation"
  6. xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
  7. xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
  8. mc:Ignorable="d">
  9.  
  10. <Grid Background="Transparent">
  11. <StackPanel Margin="10 0 10 10">
  12.  
  13. <!--
  14. 关键帧动画一共有 4 种:
  15. ColorAnimationUsingKeyFrames, DoubleAnimationUsingKeyFrames, PointAnimationUsingKeyFrames, ObjectAnimationUsingKeyFrames 它们均继承自 Timeline
  16.  
  17. ColorAnimationUsingKeyFrames 中的 KeyFrame 支持:
  18. LinearColorKeyFrame, DiscreteColorKeyFrame, SplineColorKeyFrame, EasingColorKeyFrame
  19.  
  20. DoubleAnimationUsingKeyFrames 中的 KeyFrame 支持:
  21. LinearDoubleKeyFrame, DiscreteDoubleKeyFrame, SplineDoubleKeyFrame, EasingDoubleKeyFrame
  22.  
  23. PointAnimationUsingKeyFrames 中的 KeyFrame 支持:
  24. LinearPointKeyFrame, DiscretePointKeyFrame, SplinePointKeyFrame, EasingPointKeyFrame
  25.  
  26. ObjectAnimationUsingKeyFrames 中的 KeyFrame 支持:
  27. DiscreteObjectKeyFrame
  28.  
  29. Linear 代表线性,Discrete 代表离散,Spline 代表三次贝塞尔曲线,Easing 代表缓动
  30.  
  31. Value - 关键帧的目标值
  32. KeyTime - 到达关键帧目标值的时间
  33. KeySpline - 三次贝塞尔曲线的两个控制点:x1,y1 x2,y2(该三次贝塞尔曲线的起点为0,0,终点为1,1)
  34. -->
  35.  
  36. <!--
  37. ColorAnimationUsingKeyFrames
  38. -->
  39. <Grid Margin="5" HorizontalAlignment="Left">
  40. <Grid.Resources>
  41. <BeginStoryboard x:Name="storyboardColor">
  42. <Storyboard>
  43. <ColorAnimationUsingKeyFrames Storyboard.TargetName="solidColorBrush" Storyboard.TargetProperty="Color" Duration="0:0:10">
  44. <LinearColorKeyFrame Value="Green" KeyTime="0:0:3" />
  45. <DiscreteColorKeyFrame Value="Blue" KeyTime="0:0:4" />
  46. <SplineColorKeyFrame Value="Red" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
  47. <EasingColorKeyFrame Value="Orange" KeyTime="0:0:8">
  48. <EasingColorKeyFrame.EasingFunction>
  49. <ElasticEase EasingMode="EaseInOut" />
  50. </EasingColorKeyFrame.EasingFunction>
  51. </EasingColorKeyFrame>
  52. </ColorAnimationUsingKeyFrames>
  53. </Storyboard>
  54. </BeginStoryboard>
  55. </Grid.Resources>
  56. <Rectangle Width="100" Height="50">
  57. <Rectangle.Fill>
  58. <SolidColorBrush x:Name="solidColorBrush" Color="Red" />
  59. </Rectangle.Fill>
  60. </Rectangle>
  61. </Grid>
  62.  
  63. <!--
  64. DoubleAnimationUsingKeyFrames
  65. -->
  66. <Grid Margin="5" HorizontalAlignment="Left">
  67. <Grid.Resources>
  68. <BeginStoryboard x:Name="storyboardDouble">
  69. <Storyboard>
  70. <DoubleAnimationUsingKeyFrames Storyboard.TargetName="translateTransform" Storyboard.TargetProperty="X" Duration="0:0:10">
  71. <LinearDoubleKeyFrame Value="500" KeyTime="0:0:3" />
  72. <DiscreteDoubleKeyFrame Value="400" KeyTime="0:0:4" />
  73. <SplineDoubleKeyFrame Value="300" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
  74. <EasingDoubleKeyFrame Value="200" KeyTime="0:0:8">
  75. <EasingDoubleKeyFrame.EasingFunction>
  76. <ElasticEase EasingMode="EaseInOut" />
  77. </EasingDoubleKeyFrame.EasingFunction>
  78. </EasingDoubleKeyFrame>
  79. </DoubleAnimationUsingKeyFrames>
  80. </Storyboard>
  81. </BeginStoryboard>
  82. </Grid.Resources>
  83. <Rectangle Fill="Red" Width="100" Height="50">
  84. <Rectangle.RenderTransform>
  85. <TranslateTransform x:Name="translateTransform" X="0" Y="0" />
  86. </Rectangle.RenderTransform>
  87. </Rectangle>
  88. </Grid>
  89.  
  90. <!--
  91. PointAnimationUsingKeyFrames
  92. -->
  93. <Grid Margin="5" HorizontalAlignment="Left">
  94. <Grid.Resources>
  95. <BeginStoryboard x:Name="storyboardPoint">
  96. <Storyboard>
  97. <PointAnimationUsingKeyFrames Storyboard.TargetName="ellipseGeometry" Storyboard.TargetProperty="Center" Duration="0:0:10"
  98. EnableDependentAnimation="True">
  99. <LinearPointKeyFrame Value="100,100" KeyTime="0:0:3" />
  100. <DiscretePointKeyFrame Value="200,200" KeyTime="0:0:4" />
  101. <SplinePointKeyFrame Value="300,300" KeySpline="0.6,0.0 0.9,0.00" KeyTime="0:0:6" />
  102. <EasingPointKeyFrame Value="400,400" KeyTime="0:0:8">
  103. <EasingPointKeyFrame.EasingFunction>
  104. <ElasticEase EasingMode="EaseInOut" />
  105. </EasingPointKeyFrame.EasingFunction>
  106. </EasingPointKeyFrame>
  107. </PointAnimationUsingKeyFrames>
  108. </Storyboard>
  109. </BeginStoryboard>
  110. </Grid.Resources>
  111. <Path Fill="Red">
  112. <Path.Data>
  113. <EllipseGeometry x:Name="ellipseGeometry" Center="50,50" RadiusX="15" RadiusY="15" />
  114. </Path.Data>
  115. </Path>
  116. </Grid>
  117.  
  118. <!--
  119. ObjectAnimationUsingKeyFrames
  120. -->
  121. <Grid Margin="5" HorizontalAlignment="Left">
  122. <Grid.Resources>
  123. <BeginStoryboard x:Name="storyboardObject">
  124. <Storyboard>
  125. <ObjectAnimationUsingKeyFrames Storyboard.TargetName="textBlock" Storyboard.TargetProperty="Text" Duration="0:0:10">
  126. <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="w" />
  127. <DiscreteObjectKeyFrame KeyTime="0:0:2" Value="we" />
  128. <DiscreteObjectKeyFrame KeyTime="0:0:3" Value="web" />
  129. <DiscreteObjectKeyFrame KeyTime="0:0:4" Value="weba" />
  130. <DiscreteObjectKeyFrame KeyTime="0:0:5" Value="webab" />
  131. <DiscreteObjectKeyFrame KeyTime="0:0:6" Value="webabc" />
  132. <DiscreteObjectKeyFrame KeyTime="0:0:7" Value="webabcd" />
  133. </ObjectAnimationUsingKeyFrames>
  134. </Storyboard>
  135. </BeginStoryboard>
  136. </Grid.Resources>
  137. <TextBlock x:Name="textBlock" Width="200" FontSize="32" Text="" />
  138. </Grid>
  139.  
  140. </StackPanel>
  141. </Grid>
  142. </Page>

OK
[源码下载]

背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画的更多相关文章

  1. 背水一战 Windows 10 (17) - 动画: ThemeTransition(过渡效果)

    [源码下载] 背水一战 Windows 10 (17) - 动画: ThemeTransition(过渡效果) 作者:webabcd 介绍背水一战 Windows 10 之 动画 ThemeTrans ...

  2. 背水一战 Windows 10 (16) - 动画: ThemeAnimation(主题动画)

    [源码下载] 背水一战 Windows 10 (16) - 动画: ThemeAnimation(主题动画) 作者:webabcd 介绍背水一战 Windows 10 之 动画 PopInThemeA ...

  3. 背水一战 Windows 10 (15) - 动画: 缓动动画

    [源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...

  4. 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画

    [源码下载] 背水一战 Windows 10 (42) - 控件(导航类): Frame 动画 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) Frame 动画 示例An ...

  5. 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox

    [源码下载] 背水一战 Windows 10 (29) - 控件(文本类): RichTextBlock, RichTextBlockOverflow, RichEditBox 作者:webabcd ...

  6. 背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null

    [源码下载] 背水一战 Windows 10 (26) - XAML: x:DeferLoadStrategy, x:Null 作者:webabcd 介绍背水一战 Windows 10 之 XAML ...

  7. 背水一战 Windows 10 (4) - UI: 多窗口

    [源码下载] 背水一战 Windows 10 (4) - UI: 多窗口 作者:webabcd 介绍背水一战 Windows 10 之 UI 多窗口 示例1.自定义帮助类,用于简化 Secondary ...

  8. 背水一战 Windows 10 (111) - 通知(Tile): secondary tile 模板之图片, secondary tile 模板之分组

    [源码下载] 背水一战 Windows 10 (111) - 通知(Tile): secondary tile 模板之图片, secondary tile 模板之分组 作者:webabcd 介绍背水一 ...

  9. 背水一战 Windows 10 (78) - 自定义控件: 基础知识, 依赖属性, 附加属性

    [源码下载] 背水一战 Windows 10 (78) - 自定义控件: 基础知识, 依赖属性, 附加属性 作者:webabcd 介绍背水一战 Windows 10 之 控件(自定义控件) 自定义控件 ...

随机推荐

  1. CSS3 特效分解一

    先声明下,下面的特效不是我发明的,对CSS3的创造力还不够,只是看了别人demo的源码,一点一点分析出来的.整理出的笔记,分享给大家.因为源码是好,但是一头扎进去半天出不来. 首先看个登陆框,如下,相 ...

  2. HTML5特性速记图

    今天推荐大家一张HTML5特性速记图,供大家平时查阅,也可以打印放在电脑旁帮助速记.速查.此图笔者收集于网络图片.

  3. cache4j轻量级java内存缓存框架,实现FIFO、LRU、TwoQueues缓存模型

    简介 cache4j是一款轻量级java内存缓存框架,实现FIFO.LRU.TwoQueues缓存模型,使用非常方便. cache4j为java开发者提供一种更加轻便的内存缓存方案,杀鸡焉用EhCac ...

  4. MVC5 网站开发实践 2、后台管理

    目录 MVC5 网站开发实践 概述 MVC5 网站开发实践 1.建立项目   从这一部分开始做后台管理,首先是基本框架的 一.Data项目 1.项目添加EntityFramework引用 在Data项 ...

  5. Android 开源框架Universal-Image-Loader完全解析(一)--- 基本介绍及使用

    转载博客:http://blog.csdn.net/xiaanming/article/details/26810303 大家好!差不多两个来月没有写文章了,前段时间也是在忙换工作的事,准备笔试面试什 ...

  6. 分享几个.NET WinForm开源组件,纪念逐渐远去的WinForm。。。

    前面3个月的时间内,这些.NET开源项目你知道吗?系列文章已经发表了3篇,共计45个平时接触比较少,曾经默默无闻的.NET开源项目,展示给大家,当然不是每个人都能用得上,但也的确是有些人用了,反响还不 ...

  7. 准备 KVM 实验环境 - 每天5分钟玩转 OpenStack(3)

    KVM 是 OpenStack 使用最广泛的 Hypervisor,本节介绍如何搭建 KVM 实验环境 安装 KVM 上一节说了,KVM 是 2 型虚拟化,是运行在操作系统之上的,所以我们先要装一个 ...

  8. iOS开发之遍历Model类的属性并完善使用Runtime给Model类赋值

    在上篇博客<iOS开发之使用Runtime给Model类赋值>中介绍了如何使用运行时在实体类的基类中添加给实体类的属性赋值的方法,这个方法的前提是字典的Key必须和实体类的Property ...

  9. MySQL的分页优化

    今天下午,帮同事重写了一个MySQL SQL语句,该SQL语句涉及两张表,其中一张表是字典表(需返回一个字段),另一张表是业务表(本身就有150个字段,需全部返回),当然,字段的个数是否合理在这里不予 ...

  10. es6新特性分享

    1.字符串查找es5使用是indexOf() 返回字符第一次出现的位置int值es6新增了3个方法:includes()/startsWith()/endWith()返回bool值includes = ...