基础介绍。XAML动画(四)
之前我们介绍了三种基础的动画,本文就接着来介绍如何使用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)
Chart的在线英文产品文档地址:
http://helpcentral.componentone.com/nethelp/c1wpfchart/#!Documents/componentonechartforwpf.htm
如果你对C1Chart感兴趣,请到我们的官网下载最新版本:/developer/componentone-winform/controls/chart
如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn/showforum-68.html
《C1Chart for WPF初级教程》系列文章:
