<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平臺實現。

本文示例： 

PS: 關于ComponentOne，這些產品你可以關注>>

本文轉載自

葡萄城經典UI產品新年大促，驚喜折扣禮品送不停！優惠詳情點擊查看>>

新年新禧新氣象，送禮送福送優惠！優惠詳情點擊查看>>