基础介绍。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初级教程》系列文章: