Silverlight
4（共 4）对本文的评价是有帮助&
本主题介绍 Silverlight 中的关键帧动画。&通过关键帧动画，您可以使用两个以上的目标值制作动画，并控制动画的内插方法。
本主题包括下列各节。
若要了解本概述，应先熟悉 Silverlight 动画。&有关动画的介绍，请参见。
与 From/To/By 动画类似，关键帧动画以动画形式显示了目标属性的值。&它通过其&&创建其目标值之间的过渡。&但是，From/To/By
动画创建两个值之间的过渡，而单个关键帧动画可以创建任意数量的目标值之间的过渡。
与 From/To/By 动画不同，关键帧动画没有设置其目标值所需的&From、To&或&By&属性。&而是使用关键帧对象描述关键帧动画的目标值。&若要指定动画的目标值，需要创建关键帧对象并将其添加到动画的&KeyFrames&属性。&动画运行时，将在您指定的帧之间过渡。
某些关键帧方法除支持多个目标值外，还支持多个内插方法。&动画的内插方法定义了从某个值过渡到下一个值的方式。&有三种内插类型：离散、线性和样条。
若要使用关键帧动画进行动画处理，需要完成下列步骤：
按照对 From/To/By 动画使用的方法声明动画并指定其&Duration。
对于每一个目标值，创建相应类型的关键帧，设置其值和&，并将其添加到动画的&&集合内。
按照对 From/To/By 动画使用的方法，将动画与属性相关联。
下面的示例使用&&对象对跨屏幕的&&元素进行动画处理。
&Canvas&&Canvas.Resources&&Storyboardx:Name=&myStoryboard&&&!-- Animate the TranslateTransform's X property
from 0 to 350, then 50, then 200 over 10 seconds. --&&DoubleAnimationUsingKeyFramesStoryboard.TargetName=&MyAnimatedTranslateTransform&Storyboard.TargetProperty=&X&Duration=&0:0:10&&&!-- Using a LinearDoubleKeyFrame, the rectangle moves
steadily from its starting position to 500 over
the first 3 seconds.
--&&LinearDoubleKeyFrameValue=&500&KeyTime=&0:0:3&/&&!-- Using a DiscreteDoubleKeyFrame, the rectangle suddenly
appears at 400 after the fourth second of the animation. --&&DiscreteDoubleKeyFrameValue=&400&KeyTime=&0:0:4&/&&!-- Using a SplineDoubleKeyFrame, the rectangle moves
back to its starting point. The animation starts out slowly at
first and then speeds up. This KeyFrame ends after the 6th
second. --&&SplineDoubleKeyFrameKeySpline=&0.6,0.0 0.9,0.00&Value=&0&KeyTime=&0:0:6&/&&/DoubleAnimationUsingKeyFrames&&/Storyboard&&/Canvas.Resources&&RectangleMouseLeftButtonDown=&Mouse_Clicked&Fill=&Blue&Width=&50&Height=&50&&&Rectangle.RenderTransform&&TranslateTransformx:Name=&MyAnimatedTranslateTransform&X=&0&Y=&0&/&&/Rectangle.RenderTransform&&/Rectangle&&/Canvas&
// When the user clicks the Rectangle, the animation// begins.privatevoid Mouse_Clicked(object sender, MouseEventArgs e)
myStoryboard.Begin();
就像在 From/To/By 动画中一样，使用&&对象将关键帧动画应用于属性。
不同的特性类型有不同的动画类型。&若要对采用&&的属性（例如元素的&&属性）进行动画处理，请使用生成&&值的动画。&若要对采用&&的属性进行动画处理，请使用生成&&值的动画，依此类推。
关键帧动画类遵循以下命名约定：
type_AnimationUsingKeyFrames
其中，type_&是类要进行动画处理的值的类型。
Silverlight 提供了以下关键帧动画类。
对应的关键帧动画类
支持的内插方法
离散、线性、样条
离散、线性、样条
离散、线性、样条
关键帧的主要用途是指定&&和目标&Value。&每一个关键帧类型（用于键入值的抽象类型和用于定义内插技术的派生类型）都提供了这两个属性。
Value&属性指定关键帧的目标值。
KeyTime&属性指定到达关键帧的&Value&的时间（在动画的&&之内）。
关键帧动画开始后，它会按照由其&KeyTime&属性定义的顺序来循环访问其关键帧。
如果时间 0 上没有关键帧，动画将在目标属性当前值和第一个关键帧的&Value&之间创建一个过渡；否则，动画的输出值将成为第一个关键帧的值。
动画会使用由第二个关键帧指定的内插方法来创建第一个和第二个关键帧的&Value&之间的过渡。&过渡起始自第一个关键帧的&KeyTime，在到达第二个关键帧的&KeyTime&时结束。
动画将继续，并创建每个后续关键帧及其前面的关键帧之间的过渡。
最终，动画过渡到关键时间最大（等于或小于动画的&）的关键帧值。
如果动画的&&为&Automatic&或其&&等于最后一个关键帧的时间，动画将结束。&如果动画的&&大于最后一个关键帧的关键时间，动画将保持关键帧值，直到到达其&&的末尾为止。&如果动画的&&小于最后一个关键帧，动画将在到达持续时间后立即进入填充期。
与所有动画类似，关键帧动画使用其&&属性来确定在到达其活动期末尾时是否保留最终值。
就像对不同特性类型进行动画处理时有不同类型的关键帧动画一样，关键帧对象的类型也各不相同：对于每种进行动画处理的值和所支持的内插方法，都有一个对象类型。&关键帧类型遵循以下命名约定：
_interpolationMethod_typeKeyFrame
其中，_interpolationMethod&是关键帧使用的内插方法，_type&是类要进行动画处理的值的类型。
支持所有三种内插方法的关键帧动画有三种关键帧类型可供您使用。&例如，您可以使用以下三种具有&DoubleAnimationUsingKeyFrames&的关键帧类型：、&和&。&（对内插方法进行了详细说明。）
下面的示例使用在前面的示例中定义的&&对象来演示&Value&和&KeyTime&属性的工作方式。
第一个关键帧立即将动画的输出值设置为 0。
第二个关键帧在 0 和 350 之间进行动画移动。&它的起始位置是第一个关键帧的结束位置（时间 = 0 秒），播放 2 秒钟，结束位置为时间 = 0:0:2。
第三个关键帧在 350 和 50 之间进行动画移动。&它的起始位置是第二个关键帧的结束位置（时间 = 2 秒），播放 5 秒钟，结束位置为时间 = 0:0:7。
第四个关键帧在 50 和 200 之间进行动画移动。&它的起始位置是第三个关键帧的结束位置（时间 = 7 秒），播放 1 秒钟，结束位置为时间 = 0:0:8。
由于动画的&&属性设置为 10 秒，因此当在时间 = 0:0:10
处结束之前，动画将保留其最终值两秒钟。&由于&&属性设置为&，因此当时间结束时，矩形将返回到其原始位置。
&Canvas.Resources&
&Storyboard x:Name=&myStoryboard&&
&!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. --&
&DoubleAnimationUsingKeyFrames
Storyboard.TargetName=&MyAnimatedTranslateTransform&
Storyboard.TargetProperty=&X&
Duration=&0:0:10& FillBehavior=&Stop&&
&LinearDoubleKeyFrame Value=&0& KeyTime=&0:0:0& /&
&LinearDoubleKeyFrame Value=&350& KeyTime=&0:0:2& /&
&LinearDoubleKeyFrame Value=&50& KeyTime=&0:0:7& /&
&LinearDoubleKeyFrame Value=&200& KeyTime=&0:0:8& /&
&/DoubleAnimationUsingKeyFrames&
&/Storyboard&
&/Canvas.Resources&
&Rectangle MouseLeftButtonDown=&Mouse_Clicked&
Fill=&Blue& Width=&50& Height=&50&&
&Rectangle.RenderTransform&
&TranslateTransform
x:Name=&MyAnimatedTranslateTransform&
X=&0& Y=&0& /&
&/Rectangle.RenderTransform&
&/Rectangle&
// When the user clicks the Rectangle, the animation begins.
public void Mouse_Clicked(object sender, MouseEventArgs e)
myStoryboard.Begin();
如前面所述，某些关键帧动画支持多种内插方法。&动画的内插描述了动画在其持续时间内如何在各个值之间进行过渡。&通过选择动画将要使用哪种关键帧类型，可以定义该关键帧段的内插方法。&有三种不同类型的内插方法：线性、离散和样条。
使用线性内插，动画将以段持续期间内的固定速度来播放。&例如，如果关键帧段在 5 秒内从 0 过渡到 10，则该动画会在指定的时间产生如下表所示的值。
输出值
使用离散内插，动画函数将从一个值跳到下一个没有内插的值。&如果关键帧段在 5 秒内从 0 过渡到 10，则该动画会在指定的时间产生如下表所示的值。
输出值
请注意，动画在段持续期间恰好结束之前不会更改其输出值。
样条内插更为复杂。&有关内容将在下一部分介绍。
样条内插可用于达到更现实的计时效果。&由于动画通常用于模拟现实世界中发生的效果，因此您可能需要精确地控制对象的加速和减速，并且需要严格地对计时段进行操作。&通过样条关键帧，您可以使用样条内插进行动画处理。&使用其他关键帧，您可以指定一个&Value&和&KeyTime。&使用样条关键帧，您还可以指定一个KeySpline。&下面的示例演示&&的单个样条关键帧。&请注意&&属性，此属性可将样条关键帧与其他类型的关键帧区别开来。
&SplineDoubleKeyFrame Value=&500&
KeyTime=&0:0:7& KeySpline=&0.0,1.0 1.0,0.0& /&
一条三次方贝塞尔曲线由一个起点、一个终点和两个控制点来定义。&样条关键帧的&KeySpline&属性定义从 (0,0) 延伸到 (1,1) 的贝塞尔曲线的两个控制点。&第一个控制点控制贝塞尔曲线前半部分的曲线因子，第二个控制点控制贝塞尔线段后半部分的曲线因子。&所得到的曲线是对该样条关键帧的更改速率所进行的描述。&曲线陡度越大，关键帧更改其值的速度越快。&曲线趋于平缓时，关键帧更改其值的速度也趋于缓慢。
运行下面的示例，了解更改&KeySpline&值如何影响动画的内插。&此外，此示例还演示了&KeySpline&对表示内插的贝塞尔曲线的影响。
您可以使用&KeySpline&来模拟下落的水滴或跳动的球等物体的物理轨迹，或者将&渐入&和&渐出&效果应用于动画。&对于用户交互效果，例如背景淡入/淡出或控制按钮弹跳等，您可能要应用样条内插，以便按照特定的方式来提高或降低动画的更改速率。
下面的示例指定一条控制点为 0,1 和 1,0 的&。
&SplineDoubleKeyFrame Value=&500&
KeyTime=&0:0:7& KeySpline=&0.0,1.0 1.0,0.0& /&
下图演示了该贝塞尔曲线样条。
控制点为 (0.0, 1.0) 和 (1.0, 0.0) 的关键样条
上面的关键帧在开始时快速运动，再减速，然后再次加速，直到结束。
下面的示例指定一条控制点为 0.5,0.25 和 0.75,1.0 的&。
&SplineDoubleKeyFrame Value=&350&
KeyTime=&0:0:15& KeySpline=&0.25,0.5 0.75,1& /&
下图演示了该贝塞尔曲线。
控制点为 (0.25, 0.5) 和 (0.75, 1.0) 的关键样条
由于贝塞尔曲线的曲度变化幅度很小，此关键帧的运动速率几乎固定不变；只在将近接近结束时才开始减速。
下面的示例使用&&对矩形的位置进行动画处理。&由于&&使用&&对象，因此每个关键帧值之间的过渡都使用样条内插。
&Canvas&&Canvas.Resources&&Storyboardx:Name=&myStoryboard&&&!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. --&&DoubleAnimationUsingKeyFramesStoryboard.TargetName=&SplineAnimatedTranslateTransform&Storyboard.TargetProperty=&X&Duration=&0:0:15&&&SplineDoubleKeyFrameValue=&500&KeyTime=&0:0:7&KeySpline=&0.0,1.0 1.0,0.0&/&&SplineDoubleKeyFrameValue=&200&KeyTime=&0:0:10&KeySpline=&0.0,0.0 1.0,0.0&/&&SplineDoubleKeyFrameValue=&350&KeyTime=&0:0:15&KeySpline=&0.25,0.5 0.75,1&/&&/DoubleAnimationUsingKeyFrames&&/Storyboard&&/Canvas.Resources&&RectangleMouseLeftButtonDown=&Mouse_Clicked&Fill=&Blue&Width=&50&Height=&50&&&Rectangle.RenderTransform&&TranslateTransformx:Name=&SplineAnimatedTranslateTransform&X=&0&Y=&0&/&&/Rectangle.RenderTransform&&/Rectangle&&/Canvas&
// When the user clicks the Rectangle, the animation// begins.privatevoid Mouse_Clicked(object sender, MouseEventArgs e)
myStoryboard.Begin();
样条内插可能很难理解；请使用不同的设置进行体验，这会有助于理解。
可以在单个关键帧动画中使用具有不同内插类型的关键帧。&如果两个具有不同内插的关键帧动画彼此跟随，第二个关键帧的内插方法将用于创建从第一个值到第二个值的过渡。&有关在一个关键帧动画中使用线性、样条和离散内插的示例，请参见。
像其他动画一样，关键帧动画具有&&属性。&除了指定动画的&&外，还必须指定为每个关键帧保留该持续时间的哪个部分。&可以通过描述动画的每个关键帧的&KeyTime&来实现此目的。&每个关键帧的&KeyTime&都指定了该关键帧的结束时间。
KeyTime&属性并不指定关键帧的播放的长度。&关键帧播放时间长度由关键帧的结束时间、前一个关键帧的结束时间以及动画的持续时间来确定。
可以使用时间值来指定&KeyTime。&该值应大于或等于 0。&下面的示例演示一个持续时间为 10
秒钟、有四个关键帧（这些关键帧的关键时间被指定为时间值）的动画。
在前 3 秒钟内，第一个关键帧将在基值和 100 之间进行动画移动。结束位置为时间 = 0:0:03。
第二个关键帧在 100 和 200 之间进行动画移动。&它的起始位置是第一个关键帧的结束位置（时间 = 3 秒），播放 5 秒钟，结束位置为时间 = 0:0:8。
第三个关键帧在 200 和 500 之间进行动画移动。&它的起始位置是第二个关键帧的结束位置（时间 = 8 秒），播放 1 秒钟，结束位置为时间 = 0:0:9。
第四个关键帧在 500 和 600 之间进行动画移动。&它的起始位置是第三个关键帧的结束位置（时间 = 9 秒），播放 1 秒钟，结束位置为时间 = 0:0:10。
&Canvas&&Canvas.Resources&&Storyboardx:Name=&myStoryboard&&&DoubleAnimationUsingKeyFramesStoryboard.TargetName=&MyAnimatedTranslateTransform&Storyboard.TargetProperty=&X&Duration=&0:0:10&&&!-- KeyTime properties are expressed as TimeSpan values. --&&LinearDoubleKeyFrameValue=&100&KeyTime=&0:0:3&/&&LinearDoubleKeyFrameValue=&200&KeyTime=&0:0:8&/&&LinearDoubleKeyFrameValue=&500&KeyTime=&0:0:9&/&&LinearDoubleKeyFrameValue=&600&KeyTime=&0:0:10&/&&/DoubleAnimationUsingKeyFrames&&/Storyboard&&/Canvas.Resources&&RectangleMouseLeftButtonDown=&Mouse_Clicked&Fill=&Blue&Width=&50&Height=&50&&&Rectangle.RenderTransform&&TranslateTransformx:Name=&MyAnimatedTranslateTransform&X=&0&Y=&0&/&&/Rectangle.RenderTransform&&/Rectangle&&/Canvas&
// When the user clicks the Rectangle, the animation// begins.privatevoid Mouse_Clicked(object sender, MouseEventArgs e)
myStoryboard.Begin();
通过缓动函数，您可以将自定义算术公式应用于动画。&例如，您可能希望某一对象逼真地弹回或其行为像弹簧一样。&您可以使用关键帧动画甚至 From/To/By 动画来大致模拟这些效果，但可能需要执行大量的工作，并且与使用算术公式相比动画的精确性将降低。&还可以将缓动函数应用于关键帧动画。&有关更多信息，请参见。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：148085次
积分：1795
积分：1795
排名：第19594名
原创：18篇
转载：133篇
(3)(5)(5)(5)(1)(3)(19)(10)(2)(7)(9)(2)(1)(11)(27)(2)(5)(2)(6)(1)(4)(4)(21)请求处理中...
中国领先的新型创意服务交易平台
网站动画设计基础知识 什么是帧
发布时间： 10:43:31 &&&&阅读次数：次&&&&评论数：0次&&
字体：[&&&&&&]
&&&& 帧是网站动画设计中的基础概念之一，对于经常从事flash的朋友自然不陌生，而对于行外的朋友估计连帧的概念都不明白。&&&& 帧就是影像动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。一帧就是一副静止的画面，连续的帧就形成动画。我们通常说帧数，简单地说，就是在1秒钟时间里传输的图片的帧数，也可以理解为图形处理器每秒钟能够刷新几次，通常用fps（Frames Per Second）表示。每一帧都是静止的图象，快速连续地显示帧便形成了运动的假象。高的帧率可以得到更流畅、更逼真的动画。每秒钟帧数 (fps) 愈多，所显示的动作就会愈流畅。&&& 在中，提到帧，就不能不提到关键帧与过渡帧两个概念。&&& 任何动画要表现运动或变化，至少前后要给出两个不同的关键状态，而中间状态的变化和衔接电脑可以自动完成，在Flash中，表示关键状态的帧叫做关键帧。其中，关键帧的用途有分为普通关键帧与动作脚本关键帧两种。普通关键帧用于处理图形图像和动画；动作脚本关键帧用于存放动作脚本，关键帧可以通过动作脚本控制flash影片和其中的影片剪辑。&&& 而关键帧与关键帧之间的动画可以由软件来创建，叫做过渡帧或者中间帧。在定义了起始关键帧和结束关键帧后，在起始关键帧和结束关键帧之间的帧被称为过渡帧。过渡帧是动画实现的详细过程，它能具体体现的变化过程。当用鼠标左键单击过渡帧时，在工作区可以预览这一帧的动画情况。过渡帧的画面由计算机生成，无法进行编辑操作。&&& 关键帧与过渡帧两者关系密切却又有所区别。两个关键帧的中间可以没有过渡帧（如逐帧动画），但过渡帧前后肯定有关键帧，因为过渡帧附属于关键帧；关键帧可以修改该帧的内容，但过渡帧无法修改该帧内容。另外，关键帧中可以包含形状、剪辑、组等多种类型的元素或诸多元素，但过渡帧中对象只能是剪辑（影片剪辑、图形剪辑、按钮）或独立形状。（一品威客 SELU）
除非注明，文章均为(一品威客网 )原创，转载请保留链接:
编辑：chenliwen666
小编介绍：chenliwen666是一品威客资深小编，从事编辑工作多年，创作和整理了近万篇优质文章。如果您对“网站动画设计基础知识 什么是帧”有其它疑问或见解，可以联系chenliwen666，共同探讨，相互学习，可以通过下面的方式与之联系。
擅长领域：
网站动画设计微博
网站动画设计QQ
网站动画设计博客
网站动画设计QQ群
您有类似需求？1发布一个任务2百万威客响应3选择满意方案4确认并付款
最新相关任务推荐
热门服务推荐
买创意，买服务，上一品
选择更多，超900万威客人才随您挑
相关百科推荐
相关人才推荐
成功雇主优秀威客
时间定格在日晚，长沙贺龙体育场。2018俄罗斯世界杯预选赛亚洲区12强赛A...
“上次在你们平台发布了需求，收到了很多不错的作品，满意。”在回复广东惠州雇主飞飞...
他是一名作家：从1997年至今创作文集《最后的江湖》、《寻访失落的胜迹》、《亮出一...
成功案例展示区
化工涂料制造企业LOGO设计
征集精致型田园酒店LOGO
鸭脖店招牌和logo设计
某火锅店logo设计
蔬菜批发市场摊位门面LOGO设计
海参包装盒以及手提袋子包装设计
卡片卡通头像设计
阀门厂个人名片设计
客厅设计并制作一个3D效果图
农村连体别墅建筑设计图纸
瑞嘉地板专卖店效果图简意施工图设计
富有花园样板间空间设计大赛
热门关注TOP10
Copyright (C) 2010- 版权所有 备案：闽ICP备号
服务热线：400-92-5997736 地址：厦门市集美区软件园三期起步区诚毅大街359号A区02栋五楼
联系客服：在线：8:30-22:00
400-(免长途费)
您还可以拨打： 或留下联系方式，我们主动联系您
客诉主管 李林祥
CEO 黄国华
产品总监 冯梅
联系客服：在线：8:30-22:00
400-(免长途费)
您还可以拨打： 或留下联系方式，我们主动联系您
一品官方微信
每日推·十条订单发任务·创意极速
您还可以关注一品新浪微博
投诉维权监督
固话：400-
微信：xiang138602
客诉主管 李林祥
CEO 黄国华
产品总监 冯梅