← 返回所有博客文章

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

初遇。Getting Started(上)

初遇。Getting Started(下)

类型。穿Prada的女王(上)

类型。穿Prada的女王(下)

数据。和数据源相关的那些事(一)

数据。和数据源相关的那些事(二)

数据。和数据源相关的那些事(三)

数据。和数据源相关的那些事(四)

标记和标签。撕名牌大战(一)

标记和标签。撕名牌大战(二)

标记和标签。撕名牌大战(三)

导出(PDF,EXCEL) 

多轴图表 

轴的动态绑定

实现轴注释的高级自定义

颜色和大小。数据点的自定义(一)

符号。数据点的自定义(二)

基础介绍。XAML动画(一)

基础介绍。XAML动画(二)

基础介绍。XAML动画(三)

基础介绍。XAML动画(四)