<ComponentOne Studio for WPF下載>

在上文中，我們介紹了動畫的基本知識以及Fade in動畫效果。本文就在此基礎(chǔ)上，介紹如何創(chuàng)建Scaling動畫。

創(chuàng)建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>

請注意設(shè)置了ScaleY持續(xù)到00:00:00，因此可以移除它。設(shè)置Scale屬性為0，將創(chuàng)建唯一的scaling效果如下：

RenderTransformOrigin屬性設(shè)置決定是否動畫被定位，（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函數(shù)允許你給動畫應(yīng)用自定義的公式。這內(nèi)置的在Storyboard API，因此他們可以簡單的配置。每一個功能都有額外的屬性，比如Springiness, Bounciness, Easing Mode 和 Amplitude，因此給以后自定義動畫提供方便。Easing功能的示例：

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

本文所介紹的示例代碼：

PS: 關(guān)于ComponentOne，這些產(chǎn)品你可以關(guān)注>>

本文轉(zhuǎn)載自

葡萄城經(jīng)典UI產(chǎn)品新年大促，驚喜折扣禮品送不停！優(yōu)惠詳情點擊查看>>

新年新禧新氣象，送禮送福送優(yōu)惠！優(yōu)惠詳情點擊查看>>