<ComponentOne Studio for WPF下载>

之前我们介绍了两种基础的动画，本文就接着来介绍Rotation动画。

创建Rotation动画

Rotation动画和scaling动画类似，它们都仅仅使用一个RotateTransform而不是ScaleTransform。而且类似scaling动画，您可以自定义原点（RenderTransformOrigin），同样也是easing功能。代码参考：

<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属性，需要注意所有的plot元素动画。它允许您在每个点之间设置一个延迟时间。它会创建escalating动画效果，这对于Column、bar、pie和scatter图表都是可用的（它对Area或是Line图表没有实际效果）。

例如我们来再次看看scaling动画，这次我们设置IndexDelay属性给每一个动画对象，去创建我们的延迟。代码参考：

<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>

本文所介绍的示例代码： ChartAnimation_Rotate.zip (316.17 kb)

PS: 关于ComponentOne，这些产品你可以关注>>

本文转载自葡萄城

葡萄城经典UI产品新年大促，惊喜折扣礼品送不停！优惠详情点击查看>>

新年新禧新气象，送礼送福送优惠！优惠详情点击查看>>