添加状态改变后显示的动画

此页仅适用于 Silverlight 2 项目

您可以为状态添加动画,使其在控件过渡到该状态后加以显示。例如,当您将鼠标指针移到某个按钮上,使得该按钮在过渡到 MouseOver 状态时变色。如果您为 MouseOver 状态添加动画(例如令该按钮螺旋盘转),该按钮便会在变色后演示此动画。

为状态添加动画

  1. 按 F6 转至“动画工作区”。这样一来,便会将“交互”面板移到美工板的下方,以留出更多的空间来显示时间线。

  2. 在“状态”下,,选择要添加动画的状态。

  3. 在“对象和时间线”下,单击“显示时间线”Dd185497.927789b4-13c3-4722-9a18-d24675423e23(zh-cn,Expression.10).png 按钮。

    Dd185497.9985179e-40a4-488b-97e1-94625d2480f4(zh-cn,Expression.10).png

    Dd185497.alert_note(zh-cn,Expression.10).gif说明:

    如果选中“状态”下的“基本”,则不会显示“显示时间线”Dd185497.927789b4-13c3-4722-9a18-d24675423e23(zh-cn,Expression.10).png 按钮,因为此时并不处于状态记录模式下。

  4. 如果该控件在此状态下的外观并非其默认外观(在选择“基本”的情况下),则已在 0 秒标记处设置了关键帧。

    Dd185497.54c77792-cbb0-4f6c-a7c4-88d5e8228c42(zh-cn,Expression.10).png

  5. 若要添加更多的动画,可将播放指针 Dd185497.5626c9eb-40bb-450a-9ca1-3678e5abe429(zh-cn,Expression.10).png 移到时间线的另一时间处,然后更改美工板上的对象。

    例如,若要使一张扑克牌螺旋盘绕,可将播放指针 Dd185497.5626c9eb-40bb-450a-9ca1-3678e5abe429(zh-cn,Expression.10).png 移至 1 秒标记处,选择“对象和时间线”下的“LayoutRoot”对象,然后在“属性”面板的“转换”下,选择“旋转”选项卡,并将“Angle”属性设置为 360。

    Dd185497.e67a5de7-5ff8-4eb5-ac18-e42c820451fb(zh-cn,Expression.10).png

  6. 单击“播放”Dd185497.64ad8e84-1eec-4154-9d0c-11fef322c0bf(zh-cn,Expression.10).png 按钮,即可预览动画。

  7. 按 F5 测试处于相应状态的动画。

    Dd185497.alert_tip(zh-cn,Expression.10).gif提示:

    如果您不希望控件在状态再次改变后转回到 0 度,可以将由此状态过渡到其他所有状态的过渡时间设为 0 秒。有关操作步骤,请参阅修改系统控件状态改变的过渡时间

后续步骤

  • 您可以令处于相应状态的动画在到达最后一帧时多次循环、永久循环或者反转。有关详细信息,请参阅修改 Storyboard 以在其周期结束时重复或反转

  • 您可以调整关键帧之间的动画显示速度,制作出更加自然逼真的动画。有关详细信息,请参阅更改关键帧之间的动画内插方式

  • 如果您准备修改系统控件模板,则可以按 F5 来观察应用程序中的变化。如果您准备处理的是用户控件,则可以令用户控件对鼠标单击做出响应以观看修改后的动画演示效果。有关详细信息,请参阅更改用户交互的响应状态