Silverlight、WPF 平台實現 旋轉、縮放等動畫效果

Silverlight、WPF 在用戶體驗方面同樣出色，例如其富媒體體驗、動畫效果、濾鏡特效、3D引擎以及簡潔明了的原型設計等等。在這片文章中我們將闡述如何實現縮放和旋轉以及更加復雜的動畫效果。

在本篇文章中，我們將以 C1Chart 為例，闡述如何實現 縮放、旋轉等動畫效果。在 ComponentOne 2012V3 中我們針對 C1Chart 做了很多增強，使用戶開發圖表類應用更加簡單。動畫效果是我們比較注重的一方面。我們新增了動畫 API，使動畫設置更加簡單。我們在設計 XAML 控件時，我們盡可能的使其具有靈活的擴展性。這對我們來說是一個很大的挑戰，但對用戶來說是很有益處的。因此，我們不希望只是給你一個枚舉的屬性，如“動畫”與十幾個可供選擇的方案。這將局限你的主觀能動性。所以，我們提供了擴展性較強的 PlotElementAnimation 類，它有兩個屬性：Storyboard 和SymbolStyle。你可以創建任何喜歡的動畫風格。

下面，讓我們通過實例來講解如何實現自定義動畫：

創建 Fade-in 動畫效果：

這里我們通過在加載圖片時改變 Chart 的透明度來實現淡入效果：

<c1:C1Chart x:Name="c1Chart1" Palette="Office">
    <c1:C1Chart.Data>
        <c1:ChartData>
            <c1:DataSeries Label="s1" Values="1 2 3 4 5" />
            <c1:ChartData.LoadAnimation>
                <c1:PlotElementAnimation Storyboard="{StaticResource sbOpacity}"
                                         SymbolStyle="{StaticResource styleOpacity}"/>
            </c1:ChartData.LoadAnimation>
        </c1:ChartData>
    </c1:C1Chart.Data>
</c1:C1Chart>

我們將創建 PlotElementAnimation 來定制動畫效果。 現在，讓我們來看看如何創建這些資源。

<Style TargetType="c1:PlotElement" x:Key="styleOpacity">
    <Setter Property="Opacity" Value="0" />
</Style>
<Storyboard x:Key="sbOpacity">
    <DoubleAnimation Storyboard.TargetProperty="Opacity"
                     Duration="00:00:01"
                     From="0" To="1"
                     c1:PlotElementAnimation.IndexDelay="0.5"/>
</Storyboard>

相信大家都很熟悉 XAML 平台下的典型資源 Style 和 Storyboard。我們可以通過自定義 StoryBoard 實現 XAML 平台下的任意動畫效果。把該動畫樣式設置給 c1:PlotElement 類型。這是我們創建動畫效果的常用方法。最關鍵的步驟為鏈接 Storyboard 的 TargetProperty 到我們演示中。接下來，我們將查看如何創建更多的動畫樣式。

創建縮放樣式：

縮放樣式給元素一種增長或者縮小的效果。在設置縮放效果的同時，我們還可以添加許多其他特性，例如 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 的 duration 屬性為 00:00:00，我是可以移除這句代碼的，考慮到一些朋友需要更改 ScaleY 的持續時間。所以，我沒有刪除。

應用 Style 和 Storyboard 到 C1Chart 控件后，效果如下：

RenderTransformOrigin 的 property setter 用於定制動畫開始的位置，值 (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。

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

創建旋轉效果：

旋轉效果和縮放效果類似，設置方法也基本相同，這里就不多說了-代碼如下：

<Style TargetType="c1:PlotElement" x:Key="styleRotate">
    <Setter Property="RenderTransform">
        <Setter.Value>
            <RotateTransform Angle="180" />
        </Setter.Value>
    </Setter>
    <Setter Property="RenderTransformOrigin" Value="0.5, 0.5" />
</Style>
<Storyboard x:Key="sbRotate">
    <DoubleAnimation Storyboard.TargetProperty="(RenderTransform).Angle" Duration="00:00:01" To="1" c1:PlotElementAnimation.IndexDelay="0.5">
        <DoubleAnimation.EasingFunction>
            <BackEase EasingMode="EaseIn"  Amplitude="5" />
        </DoubleAnimation.EasingFunction>
    </DoubleAnimation>
</Storyboard>

Index Delay

如果你仔細的觀察了代碼和動畫效果，你會發現每個元素的加載時間和 IndexDelay 相關。IndexDelay 屬性用於設置每個元素加載的間隔時間。

<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>

 

使用 TransformGroup 創建 Composite 動畫效果

你可以合並之前提到的任意動畫效果。可以通過 TransformGroup 實現。僅當你合並 縮放 和 旋轉效果是，需要設置 TransformGroup。下面這個例子合並了 透明、縮放和旋轉等動畫效果：

<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>

 

正如你所見到的，在 WPF 和 Silverlight 下設置動畫效果是非常簡單的。同樣，你可以應用以上動畫效果到 Phone 和 WinRT平台。

Demo下載：download a sample