动手试验:尝试切换动画和非切换动画

如果多个动画时间线同时动态显示同一个属性,则根据是否在 0 秒标记处记录了关键帧,过渡行为会有所不同。以下过程可帮助您理解切换动画和非切换的工作原理。

比较切换动画与非切换动画

  1. 在 Microsoft Expression Blend 中,打开或新建一个项目。有关详细信息,请参阅创建新的文档或项目

  2. 按 F6 切换到“动画工作区”。(按 F6 将在“设计工作区”和“动画工作区”之间进行切换。在“动画工作区”中,“交互”面板位于美工板的下方。)

  3. 在“对象和时间线”下,选择“关闭 Storyboard”Cc295058.4c066464-3a41-452d-b2e9-e95f6c5659ff(zh-cn,Expression.10).png 按钮。

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

    打开 Storyboard 时,对属性所做的任何更改都将在 Storyboard 的时间线上自动记录一个关键帧。

  4. 从“工具箱”中选择“椭圆形”Cc295058.8938cfdf-9b75-4a33-bc88-b0636e114a0d(zh-cn,Expression.10).png 工具。在美工板中央绘制一个圆。可以在“属性”面板的“布局”类别下,使用“Height”和“Width”属性使椭圆成为标准的圆。如果出现了剪切情况,请调整“Margin”属性。

  5. 在“对象和时间线”下,单击“新建”Cc295058.86937695-03dd-44ea-aa30-28d4029b3ad0(zh-cn,Expression.10).png 按钮。

    此时,将显示“创建 Storyboard 资源”对话框。

  6. 在“资源名(关键字)”字段中,输入名称“Double”,然后单击“确定”。

    Expression Blend 将进入时间线录制模式,并且播放指针 Cc295058.5626c9eb-40bb-450a-9ca1-3678e5abe429(zh-cn,Expression.10).png 位于 0 秒标记处。在录制模式下时,所设置的任何属性都将在该时间线上自动记录一个关键帧。

  7. 请勿在 0 秒标记处设置关键帧。而应将播放指针拖到 1 秒标记处。

  8. 从“工具箱”中选择“选择”Cc295058.2ff91340-477e-4efa-a0f7-af20851e4daa(zh-cn,Expression.10).png 工具,按住 Alt 键,并拖动椭圆的宽度图柄,直到椭圆的宽度变为其原始宽度的两倍。

    此时,将自动在 1 秒标记处为“ScaleX”属性设置一个关键帧。

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

    在美工板上调整对象大小时按住 Alt 键,将使中心点保持不变。

  9. 在“对象和时间线”下,展开椭圆下的节点,直到显示“ScaleX”节点。右键单击“ScaleX”节点或灰色时间范围条,然后单击“编辑重复次数”。

    此时,将显示“编辑重复”对话框。

  10. 若要使时间线不停地重复,请单击“设置为永久”Cc295058.da7f68ed-4aa6-461f-a8e9-10ab93e437e0(zh-cn,Expression.10).png 按钮,然后单击“确定”。

  11. 在“对象和时间线”下,单击“新建”Cc295058.86937695-03dd-44ea-aa30-28d4029b3ad0(zh-cn,Expression.10).png 按钮。

    此时,将显示“创建 Storyboard 资源”对话框。

  12. 在“资源名(关键字)”字段中,输入名称“Quadruple”,然后单击“确定”。

    Expression Blend 将进入第二个时间线的录制模式,并从原始椭圆大小开始。

  13. 与此前的操作相同,请勿在 0 秒标记处设置关键帧。而应将播放指针拖到 1 秒标记处。

  14. 从“工具箱”中选择“选择”工具,按住 Alt 键,并拖动椭圆的宽度图柄,直到椭圆的宽度变为其原始宽度的四倍。

    此时,将自动在 1 秒标记处为“ScaleX”属性设置一个关键帧。

  15. 右键单击“ScaleX”节点或灰色时间范围条,单击“编辑重复次数”,单击“设置为永久”按钮,然后单击“确定”。

  16. 此时,便可以为动画设置触发器。默认情况下,在文档的根元素中创建的任何新时间线都将导致在“触发器”下为“Window.Loaded”事件添加一个事件触发器。可以将该触发器用于“Double”时间线,并为“Quadruple”时间线添加一个新触发器。

  17. 在“触发器”下,选择“Window.Loaded”触发器。该触发器的操作显示在“在引发 Window.Loaded 时”下。单击“Quadruple.Begin”旁边的减号可以删除对应的操作。现在,在应用程序启动时,Double 动画仍会开始运行,而 Quadruple 动画不会运行。

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

    可能需要调整“触发器”窗格的大小,才能看到“活动时的属性”部分。若要调整其大小,请单击并拖动该窗格的边框以及该窗格内的边框。

  18. 若要为“Quadruple”动画添加触发器,请单击“触发器”下的“添加事件触发器”Cc295058.671c69bb-32e9-4ef9-9837-29403524abd0(zh-cn,Expression.10).png 按钮。

    此时,将创建一个新的 Window.Loaded 触发器。

  19. 选择“对象和时间线”下的椭圆,然后在“触发器”下,使用下拉框将新触发器从“在引发 Window.Loaded 时”改为“在引发 ellipse.MouseEnter 时”。

  20. 单击“在引发 ellipse.MouseEnter 时”旁边的“添加新操作”Cc295058.d02551d0-d56a-4ca3-9d5f-58fbc6bda0c3(zh-cn,Expression.10).png 按钮,然后使用下拉框将新操作改为“Quadruple.Begin”。

    现在,当用户将鼠标光标移到椭圆上时,Quadruple 动画将中断 Double 动画。

  21. 添加一个新事件触发器,将其更改为“在引发 ellipse.MouseLeave 时”,并为“Double.Begin”添加一个新操作。

    当用户将鼠标光标移到椭圆外部时,Double 动画将中断 Quadruple 动画。

  22. 若要查看动画时间线和刚才创建的事件触发器的行为,请单击“项目”菜单上的“测试项目”,对场景进行测试。

    这两个动画在 0 秒标记处均未设置关键帧。动画之间生成的过渡称为“切换”动画。用一个动画中断另一个动画时,动画的切换行为是从中断时的宽度平滑过渡到后续动画的第一个关键帧。如果在 Double 动画结束时将鼠标光标移到椭圆中,则 Quadruple 动画将不会从椭圆的原始大小开始运行,而会从移动鼠标时的椭圆宽度开始运行。将鼠标移到椭圆外部时,由于在这两个动画之间发生过渡,因此 Double 动画看起来就像是反向播放的 Quadruple 动画。

  23. 退出应用程序以返回到 Expression Blend。

  24. 在“对象和时间线”下,选择椭圆的“ScaleX”节点,选择“Quadruple”时间线,将播放指针移到 0 秒标记处,然后单击“记录关键帧”按钮。

  25. 再次测试动画。过渡行为将改变。将鼠标指针移到椭圆中时,Quadruple 动画将从椭圆的原始宽度开始运行。

    通过在 Double 动画的 0 秒标记处添加关键帧并再次测试,然后在 Quadruple 动画的 0 秒标记处删除关键帧并再次测试,可进一步了解不同的过渡行为。