Silverlight、WPF 平台实现 旋转、缩放等动画效果

Silverlight、WPF 在用户体验方面同样出色，例如其富媒体体验、动画效果、滤镜特效、3D引擎以及简洁明了的原型设计等等。在这片文章中我们将阐述如何实现缩放和旋转以及更加复杂的动画效果。

在本篇文章中，我们将以 C1Chart 为例，阐述如何实现 缩放、旋转等动画效果。在 ComponentOne 2012V3 中我们针对 C1Chart 做了很多增强，使用户开发图表类应用更加简单。动画效果是我们比较注重的一方面。我们新增了动画 API，使动画设置更加简单。我们在设计 XAML 控件时，我们尽可能的使其具有灵活的扩展性。这对我们来说是一个很大的挑战，但对用户来说是很有益处的。因此，我们不希望只是给你一个枚举的属性，如“动画”与十几个可供选择的方案。这将局限你的主观能动性。所以，我们提供了扩展性较强的 PlotElementAnimation 类，它有两个属性：Storyboard 和SymbolStyle。你可以创建任何喜欢的动画风格。

下面，让我们通过实例来讲解如何实现自定义动画：

创建 Fade-in 动画效果：

这里我们通过在加载图片时改变 Chart 的透明度来实现淡入效果：

?

1 2 3 4 5 6 7 8 9 10 11

<c1:C1Chart x:Name="c1Chart1" Palette="Office">     <c1:C1Chart.Data>         <c1:ChartData>             <c1:DataSeries Label="s1" Values="1 2 3 4 5" />             <c1:ChartData.LoadAnimation>                 <c1:PlotElementAnimation Storyboard="{StaticResource sbOpacity}"                                          SymbolStyle="{StaticResource styleOpacity}"/>             </c1:ChartData.LoadAnimation>         </c1:ChartData>     </c1:C1Chart.Data> </c1:C1Chart>

?

1	我们将创建 PlotElementAnimation 来定制动画效果。 现在，让我们来看看如何创建这些资源。

?

1 2 3 4 5 6 7 8 9

<Style TargetType="c1:PlotElement" x:Key="styleOpacity">     <Setter Property="Opacity" Value="0" /> </Style> <Storyboard x:Key="sbOpacity">     <DoubleAnimation Storyboard.TargetProperty="Opacity"                      Duration="00:00:01"                      From="0" To="1"                      c1:PlotElementAnimation.IndexDelay="0.5"/> </Storyboard>

相信大家都很熟悉 XAML 平台下的典型资源 Style 和 Storyboard。我们可以通过自定义 StoryBoard 实现 XAML 平台下的任意动画效果。把该动画样式设置给 c1:PlotElement 类型。这是我们创建动画效果的常用方法。最关键的步骤为链接 Storyboard 的 TargetProperty 到我们演示中。接下来，我们将查看如何创建更多的动画样式。

创建缩放样式：

缩放样式给元素一种增长或者缩小的效果。在设置缩放效果的同时，我们还可以添加许多其他特性，例如 EasingFunction 和 RenderTransformOrigin 样式。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<Style TargetType="c1:PlotElement" x:Key="styleScale">     <Setter Property="RenderTransform">         <Setter.Value>             <ScaleTransform ScaleX="0" ScaleY="0" />         </Setter.Value>     </Setter>     <Setter Property="RenderTransformOrigin" Value="0.5, 0.5" /> </Style> <Storyboard x:Key="sbScale">     <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).ScaleX" Duration="00:00:01" From="0" To="1" c1:PlotElementAnimation.IndexDelay="0.5">         <DoubleAnimation.EasingFunction>             <CubicEase EasingMode="EaseInOut" />         </DoubleAnimation.EasingFunction>     </DoubleAnimation>     <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).ScaleY" Duration="00:00:00" From="0" To="1">         <DoubleAnimation.EasingFunction>             <CubicEase EasingMode="EaseInOut" />         </DoubleAnimation.EasingFunction>     </DoubleAnimation> </Storyboard>

注意在这里我们设置了 ScaleY 的 duration 属性为 00:00:00，我是可以移除这句代码的，考虑到一些朋友需要更改 ScaleY 的持续时间。所以，我没有删除。

应用 Style 和 Storyboard 到 C1Chart 控件后，效果如下：

RenderTransformOrigin 的 property setter 用于定制动画开始的位置，值 (0.5, 0.5) 代表动画将从中心位置开始。以下为一些位置设置列表，可以尝试更改体验效果：

• Center = (0.5, 0.5)
• Bottom = (0.5, 2)
• Top = (0.5, -2)
• Left = (-2, 0.5)
• Right = (2, 0.5)
• Top Left = (2, -2)
• Top Right = (-2, -2)
• Bottom Left = (2, 2)
• Bottom Right = (-2, 2)

Easing 方法允许我们将自定义数学公式应用到动画中。这是 Storyboard 内置的 API ，因此，很容易更改。每个方法都有附加的属性设置，例如，Springiness, Bounciness, Easing Mode 和 Amplitude。

• BackEase
• BounceEase
• CircleEase
• CubicEase
• ElasticEase
• ExponentialEase
• PowerEase
• QuadraticEase
• QuarticEase
• SineEase

创建旋转效果：

旋转效果和缩放效果类似，设置方法也基本相同，这里就不多说了-代码如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<Style TargetType="c1:PlotElement" x:Key="styleRotate">     <Setter Property="RenderTransform">         <Setter.Value>             <RotateTransform Angle="180" />         </Setter.Value>     </Setter>     <Setter Property="RenderTransformOrigin" Value="0.5, 0.5" /> </Style> <Storyboard x:Key="sbRotate">     <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).Angle" Duration="00:00:01" To="1" c1:PlotElementAnimation.IndexDelay="0.5">         <DoubleAnimation.EasingFunction>             <BackEase EasingMode="EaseIn"  Amplitude="5" />         </DoubleAnimation.EasingFunction>     </DoubleAnimation> </Storyboard>

Index Delay

如果你仔细的观察了代码和动画效果，你会发现每个元素的加载时间和 IndexDelay 相关。IndexDelay 属性用于设置每个元素加载的间隔时间。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<Style TargetType="c1:PlotElement" x:Key="styleScale">     <Setter Property="RenderTransform">         <Setter.Value>             <ScaleTransform ScaleX="0" ScaleY="0" />         </Setter.Value>     </Setter>     <Setter Property="RenderTransformOrigin" Value="0.5, 0.5" /> </Style> <Storyboard x:Key="sbScale">     <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).ScaleX" Duration="00:00:01" From="0" To="1"                      c1:PlotElementAnimation.IndexDelay="0.5">         <DoubleAnimation.EasingFunction>             <CubicEase EasingMode="EaseInOut" />         </DoubleAnimation.EasingFunction>     </DoubleAnimation>     <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).ScaleY" Duration="00:00:00" From="0" To="1">         <DoubleAnimation.EasingFunction>             <CubicEase EasingMode="EaseInOut" />         </DoubleAnimation.EasingFunction>     </DoubleAnimation> </Storyboard>

 

使用 TransformGroup 创建 Composite 动画效果

你可以合并之前提到的任意动画效果。可以通过 TransformGroup 实现。仅当你合并 缩放 和 旋转效果是，需要设置 TransformGroup。下面这个例子合并了 透明、缩放和旋转等动画效果：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<Style TargetType="c1:PlotElement" x:Key="styleComposite">     <Setter Property="RenderTransform">         <Setter.Value>             <TransformGroup>                 <ScaleTransform ScaleX="0" ScaleY="0" />                 <RotateTransform Angle="180" />             </TransformGroup>         </Setter.Value>     </Setter>     <Setter Property="RenderTransformOrigin" Value="0.5, 0.5" />     <Setter Property="Opacity" Value="0" /> </Style> <Storyboard x:Key="sbComposite">     <DoubleAnimation Storyboard.TargetProperty="Opacity" Duration="00:00:01" From="0" To="1"                      c1:PlotElementAnimation.IndexDelay="1"/>     <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].ScaleX" Duration="00:00:01" From="0" To="1"                      c1:PlotElementAnimation.IndexDelay="1">         <DoubleAnimation.EasingFunction>             <CubicEase EasingMode="EaseInOut" />         </DoubleAnimation.EasingFunction>     </DoubleAnimation>     <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[0].ScaleY" Duration="00:00:01" From="0" To="1">         <DoubleAnimation.EasingFunction>             <CubicEase EasingMode="EaseInOut" />         </DoubleAnimation.EasingFunction>     </DoubleAnimation>     <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).(TransformGroup.Children)[1].Angle" Duration="00:00:01" To="1"                      c1:PlotElementAnimation.IndexDelay="1">         <DoubleAnimation.EasingFunction>             <BackEase />         </DoubleAnimation.EasingFunction>     </DoubleAnimation> </Storyboard>

 

正如你所见到的，在 WPF 和 Silverlight 下设置动画效果是非常简单的。同样，你可以应用以上动画效果到 Phone 和 WinRT平台。

Demo下载：download a sample