<ComponentOne Studio for WPF下载>

之前我们介绍了三种基础的动画，本文就接着来介绍如何使用TransformGroup创建复合动画效果。

使用TransformGroup创建复合动画

可以将之前提到的动画效果组合起来，主要是要使用在Style资源里的TransformGroup。唯一需要设置的是Scale和Rotate。示例展示了组合opacity、scale和rotate到storyboard。代码参考：

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

如你所见，API的动画是很简单和容易实现的。你也可以在WPF、Silverlight、Phone或是WinRT平台实现。

本文示例： ChartAnimation_Composite.zip (317.34 kb)

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

本文转载自葡萄城

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

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