<ComponentOne Studio for WPF下载>

在上文中，我们介绍了动画的基本知识以及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，因此可以移除它。设置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)

PS: 关于ComponentOne，这些产品你可以关注>>

本文转载自葡萄城

葡萄城经典UI产品新年大促，惊喜折扣礼品送不停！优惠详情点击查看>>

新年新禧新气象，送礼送福送优惠！优惠详情点击查看>>