利用ComponentOne创建具有动画效果的图表

在ComponentOne的最新版本2012 V3中的C1 Chart控件提供了新的动画API，利用C1 Chart控件可以轻松地实现动画图表的旋转，缩放等复杂动画效果，接下来我已实例为大家展示ComponentOne控件集中的C1 Chart控件的应用。

首先介绍创建动画图表的方法：

C1Chart中有一个单PlotElementAnimation类，它只有两个属性：Storyboard和SymbolStyle。这两个属性让你可能灵活将动画故事板和风格的任意组合来自定义动画。然后在图表数据对象中将PlotElementAnimation绑定至一个新LoadAnimation属性，并可以完成图表动画的创建。

实例1：创建淡入动画

<c1:C1Chart x:Name="c1Chart1" Palette="Office">
    <c1:C1Chart.Data>
        <c1:ChartData>
            <c1:DataSeries Label="s1" Values="1 2 3 4 5" />
            <c1:ChartData.LoadAnimation>
                <c1:PlotElementAnimation Storyboard="{StaticResource sbOpacity}"
                                         SymbolStyle="{StaticResource styleOpacity}"/>
            </c1:ChartData.LoadAnimation>
        </c1:ChartData>
    </c1:C1Chart.Data>
</c1:C1Chart>

上面这段代码是通过改变透明度来实现图表淡入加载效果的代码，接下来我们创建资源：

 

<Style TargetType="c1:PlotElement" x:Key="styleOpacity">
    <Setter Property="Opacity" Value="0" />
</Style>
<Storyboard x:Key="sbOpacity">
    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                     Duration="00:00:01"
                     From="0" To="1"
                     c1:PlotElementAnimation.IndexDelay="0.5"/>
</Storyboard>

这里面的Storyboard和SymbolStyle都是典型的XAML资源，用法都很简单

效果图如下：

 

 

实例2：创建缩放动画

创建缩放动画，需要用到Style和Storyboard中的另外两个属性EasingFunction和RenderTransformOrigin。

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

从上述代码XAML代码中大家可以看出只要将Scale属性之一为0，就可以创建一个旋转的动画图表了。如下图：

实例3：创建旋转动画

创建代码如下：

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

 

效果图如下：

 

通过以上这些动画图表所展示的出色的动画效果，大家可以发现：在 WPF 和 Silverlight 下设置动画效果是如此的简单。同样，还可以将这些 动画效果 应用到 Phone 和 WinRT平台。

 

另外ComponentOne Studio Enterprise还包含有其他的控件，如：ComponentOne Studio for WinForms，ComponentOne Studio for ASP.NET Wijmo等等。