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