C1Chart for WPF初级教程-基础介绍。XAML动画(二)

发布时间:2015/06/19 00:06 发布者:Alice

返回博客中心

基础介绍。XAML动画(二)

在上一章C1Chart for WPF初级教程-基础介绍。XAML动画(一)中,我们介绍了动画的基础知识,以及Fade in动画效果。

本文就在上一篇的基础上,介绍如何创建Scaling动画。

创建Scaling 动画

一个Scaling动画是plot元素在大小上的缩放和扩展。我们可以通过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>

 

请注意设置了ScaleY持续到00:00:00,因此可以移除它。

但是在例子中留着,给想要增加duration人。设置Scale属性为0,将创建唯一的scaling效果如下:

 

RenderTransformOrigin属性设置决定是否动画被定位。 (0.5,0.5)这样的值以为着它在中心位置。

如下一个列表,帮助你了解位置: 

  • Center = (0.5, 0.5)
  • Bottom = (0.5, 2)
  • Top = (0.5, -2)
  • Left = (-2, 0.5)
  • Right = (2, 0.5)
  • Top Left = (2, -2)
  • Top Right = (-2, -2)
  • Bottom Left = (2, 2)
  • Bottom Right = (-2, 2)

Easing函数允许你给动画应用自定义的公式。这内置的在Storyboard API,因此他们可以简单的配置。

每一个功能都有额外的属性,比如Springiness, Bounciness, Easing Mode 和 Amplitude,因此给以后自定义动画提供方便。

Easing功能的示例:

  • BackEase
  • BounceEase
  • CircleEase
  • CubicEase
  • ElasticEase
  • ExponentialEase
  • PowerEase
  • QuadraticEase
  • QuarticEase
  • SineEase

 本文的介绍到此结束,本文所介绍的示例代码如下所示:

ChartAnimation_Scale.zip (315.89 kb)

 

 

下面还会介绍Rotation动画和 使用TransformGroup.

 

 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动画(四)


关于葡萄城

赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。

了解详情,请访问葡萄城官网