在ComponentOne的最新2012 v3版本中，C1Chart控件的功能有了很大的增強(qiáng)，動(dòng)畫功能便是其中之一，C1Chart提供了新的動(dòng)畫API，讓在圖表中加入動(dòng)畫元素變得更加簡(jiǎn)單。接下來(lái)就為大家介紹以下如何使用XAML創(chuàng)建圖表動(dòng)畫。

創(chuàng)建方法

　　C1Chart中有一個(gè)單PlotElementAnimation類，它只有兩個(gè)屬性：Storyboard和SymbolStyle。這兩個(gè)屬性讓你可能靈活將動(dòng)畫故事板和風(fēng)格的任意組合來(lái)自定義動(dòng)畫。然后在圖表數(shù)據(jù)對(duì)象中將PlotElementAnimation綁定至一個(gè)新LoadAnimation屬性，并可以完成圖表動(dòng)畫的創(chuàng)建。

實(shí)例：創(chuàng)建淡入動(dòng)畫

　　以下是一個(gè)通過(guò)改變透明度來(lái)實(shí)現(xiàn)圖表淡入加載效果的代碼，通過(guò)創(chuàng)建PlotElementAnimation的Storyboard和SymbolStyle屬性便可完成。

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

　　接下來(lái)創(chuàng)建資源

<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資源，非常簡(jiǎn)單易用，效果如下。

實(shí)例：創(chuàng)建縮放動(dòng)畫

　　創(chuàng)建縮放動(dòng)畫，需要用到Style和Storyboard中的另外兩個(gè)屬性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>

　　只需將Scale屬性之一為0，就可以創(chuàng)建以下效果。

實(shí)例：創(chuàng)建旋轉(zhuǎn)動(dòng)畫

　　使用RotateTransform便可以創(chuàng)建旋轉(zhuǎn)動(dòng)畫，還可以自定義原點(diǎn)（RenderTransformOrigin）。

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

實(shí)例：創(chuàng)建復(fù)合動(dòng)畫

　　在Style資源中使用TransformGroup，就能夠創(chuàng)建復(fù)合動(dòng)畫了。

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