65.9K
CodeProject 正在变化。 阅读更多。
Home

Silverlight 沿路径动画

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.89/5 (16投票s)

2008 年 11 月 10 日

CPOL

4分钟阅读

viewsIcon

151462

downloadIcon

2652

沿几何路径使对象动画化

引言

Silverlight 提供了良好的动画基础,但缺乏一种方便的方法来沿任意几何路径制作对象动画。Windows Presentation Foundation (WPF) 是 Silverlight 的超集,它提供了动画类 DoubleAnimationUsingPathPointAnimationUsingPath。使用这些类,可以轻松地沿几何路径制作对象动画。本文提供了 Silverlight 的等效动画类。我猜测 Silverlight 的未来版本将提供此功能,但在此之前,此处提供的代码将胜任这项工作。

PathAnimPic.jpg

背景

目前,Silverlight 不提供沿任意几何路径制作对象动画的动画类,但 Silverlight 提供了关键帧动画类。使用关键帧动画类,您可以指定开始和结束值,然后动画类使用插值来计算中间的所有值。可以组装一系列关键帧来描述运动路径,但为每个运动路径手动构建这些关键帧很繁琐。

为了以编程方式生成描述运动路径的关键帧,需要一种“展平”几何路径的方法。展平基本上意味着几何形状由一系列线段描述。下图显示了一个展平的贝塞尔曲线段的示例。一旦我们有了展平的路径,我们就可以轻松地为时间线构建关键帧。

flattenedpath.PNG

关于代码

SolnPic.JPG

代码的核心包含在“PathAnimation”项目中。在此项目中,抽象类 BaseAnimationUsingPath 定义了许多用于控制动画的依赖属性(见下文)。请注意,此类继承自 DependencyObject,而不是 Silverlight 动画类。这是因为 Silverlight 中的大多数动画类都是密封的,并且不像 WPF 动画类那样可扩展。这对 DoubleAnimationUsingPathPointAnimationUsingPath 动画类的使用有影响,例如它们不能添加到 Storyboard!它们可以作为资源添加,或在代码隐藏中创建(演示应用程序中提供了示例)。

BaseClassPic.JPG

另一个重要的项目是“PathGeometryHelper”。此项目实现了路径展平例程。Charles Petzold 在他的文章中开发了一种路径展平方法,并允许重新使用该代码。Charles 的方法是为 WPF 编写的,因此需要将其移植到 Silverlight。在将此代码移植到 Silverlight 时,发现了更多缺失的功能。即,Silverlight 在 Matrix 类中缺少一些方法。此外,Silverlight 没有 Vector 类。“MatrixMathHelpers”项目提供了这些类(以及其他一些类)的等效功能。

关于展平例程,一个重要的点是“Tolerance”参数。此参数已暴露到路径动画类。基本上,此参数控制用于逼近原始几何路径的段数。容差值必须大于零。较小的容差值将产生更高的精度(即,更多的线段),而较大的值将产生较低的精度(即,对几何路径的逼近效果较差)。不建议将容差设置得太小,因为这会导致将更多关键帧添加到时间线,减慢动画速度,并消耗过多的内存。请尝试使用演示应用程序,看看调整容差如何影响精度,但要小心不要将值设置得太小!

另一段重要的代码包含在 PathConverter.cs 中。目前,Silverlight 没有内置功能可以将迷你语言字符串转换为 PathGeometry,但幸运的是,一个转换器已被提供并包含在此处的 PathConverter.cs 中。有了这个方便的转换器,我们就可以为动画类提供使用 Blend 或其他工具创建的任意复杂的几何形状。

Using the Code

提供了两个类来沿几何路径制作对象动画:DoubleAnimationUsingPathPointAnimationUsingPath。两者共享许多共同的依赖属性。这些属性等同于 Silverlight 提供的动画属性,因此它们应该很熟悉

  • BeginTime:动画开始的时间
  • Duration:动画的持续时间/长度
  • AutoReverse:如果为 true,则在动画结束时反转
  • FillBehavior:在动画结束时保持当前值,或重置为动画开始之前的值
  • RepeatBehavior:重复的次数
  • PathGeometry:指定对象在动画时将遵循的几何形状
  • TargetProperty:要动画化的属性
  • Target:要动画化的对象的名称
  • Tolerance:控制路径展平的精度;必须大于零;较小的值提供更高的精度

除了上述属性外,还提供了所有标准动画方法:BeginStopPauseResumeSeek

DoubleAnimationUsingPath 仅动画类型为 double 的对象属性(例如,高度、宽度、X、Y 等)。此类具有一个额外的依赖属性:SourceSource 属性指定使用 PathGeometry 的 X 或 Y 输出值来驱动动画。

如上一节所述,此处提供的动画类不能像其他 Silverlight 动画类那样在 Storyboard 中使用。但是,它们可以作为资源添加,或在代码隐藏中创建(请参阅演示应用程序中的示例)。

历史

  • 2008 年 11 月 9 日:首次发布
  • 2009 年 3 月 4 日:代码更新
    • Animation 类添加 Completed 事件
    • DoubleAnimationUsingPath 添加了 Angle
© . All rights reserved.