【WIN10】Storyboard動畫板

源碼下載：http://yunpan.cn/cFJR5zcMNtBq6  訪問密碼 ac7a

 

使用Storyboard可以實現動畫效果。

1.仿照WINDOWS系統安裝時的等待畫面，不停更換背景顏色

        <Button x:Name="testBtn" Content="Button" HorizontalAlignment="Left" Margin="62,29,0,0" VerticalAlignment="Top" Height="53" Width="234">
            <Button.Background>
                <SolidColorBrush x:Name="testBtnBack" Color="Black">
                </SolidColorBrush>
            </Button.Background>
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">－－－－－控件一加載就跑一個動畫
                    <BeginStoryboard>－－－－－－－－－－－表示開始執行
                        <Storyboard －－－－－真正的動畫板
　　　　　　　　　　　　　　　　RepeatBehavior="Forever"－－－－－－－－無限循環
 　　　　　　　　　　　　　　　 AutoReverse="True"－－－－－－－－－－－－自動反向變換，即動畫從A->B，後再B->A。
　　　　　　　　　　　　　　　　>
                            <ColorAnimation
                                From="Red"－－－－－－－－－－－－－－－－－－－－－－－－－－－－－｜從紅色變到綠色，可以使用Binding, Converter分配一個隨機顏色
                                To="Blue" －－－－－－－－－－－－－－－－－－－－－－－－－－－－－｜
                                Duration="0:0:2" －－－－－－－－－－－－－－－－－－－－－－－－－變換時間，H:M:S，可以使用小數。
                                Storyboard.TargetName="testBtnBack" －－－－－－－－－－－－－－這裡是應用於哪個控件
                                Storyboard.TargetProperty="Color"   －－－－－－－－－－－－－－屬性
                                />
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

以上這段XAML代碼就實現了背景顏色從RED變化到BLUE的簡單動畫。

這個例子中，我們使用了單幀動畫 ColorAnimation ，Color 代表是屬性的類型，如上圖中，背景顏色屬性類型為Color，Animation代表動畫，所以這個東東就表示是一個顏色變化的單幀動畫。

2.單幀動畫

下面列出單幀動畫：

DoubleAnimation	屬性類型為Double或int的動畫。
PointAnimation	屬性類型為Point的動畫。
ColorAnimation	屬性類型為Color的動畫。

 

比如DoubleAnimation，我們可以改變字體大小，改變寬度，高度等等。

所以要改變控件的位置，XAML不支持使用Margin.Top這樣的屬性。必須使用RenderTransform。舉例說明，實現一個球上下彈動的效果：

        <Ellipse x:Name="ball" Fill="#FFF4F4F5" HorizontalAlignment="Left" Height="52" Margin="45,226,0,0" Stroke="Black" VerticalAlignment="Top" Width="52" RenderTransformOrigin="0.5,0.5">
            <Ellipse.RenderTransform>－－－－－－－－－－－－－這裡要使用Render
                <TranslateTransform />
            </Ellipse.RenderTransform>
            <Ellipse.Triggers>
                <EventTrigger RoutedEvent="Ellipse.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames ------多幀，稍後討論。 Storyboard.TargetName="ball"
                                Storyboard.TargetProperty="(UIElement.RenderTransform).(TranslateTransform.Y)"－－－－－－改變Y的位置。
                                Duration="0:0:2"
                                RepeatBehavior="Forever"
                                EnableDependentAnimation="True"－－－－－－這個玩意一定要設置為真。。
                               AutoReverse="True" >
                                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="240"> －－－－－這種屬性多幀類型，稍後討論。
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <BackEase EasingMode="EaseOut" />
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>
                        </Storyboard>

                    </BeginStoryboard>
                </EventTrigger>
            </Ellipse.Triggers>
        </Ellipse>

 

 

 3.多幀動畫

DoubleAnimationUsingKeyFrames		全部使用Double類型單幀的動畫。
－ DiscreteDoubleKeyFrame		馬上變化，沒有漸變效果。如寬度從0到200，直接就變化到200，有一個跳變，一般會感覺比較突兀。
－ LinearDoubleKeyFrame		變化是線性變化效果，如寬度從0到200，是從0到10，到20，到50，再到200，有一個緩慢變化效果。
－ SplineDoubleKeyFrame		貝塞爾曲線，具體可以查看貝塞爾曲線的定義，再進行理解。 具體參照博客：http://blog.csdn.net/tcjiaan/article/details/7550506
－ EasingDoubleKeyFrame		緩動變化效果。 具體請參照博客：http://www.cnblogs.com/xwlyun/archive/2012/09/11/2680579.html
PointAnimationUsingKeyFrames		全部使用Point類型單幀的動畫。
ColorAnimationUsingKeyFrames		全部使用Point類型單幀的動畫。
ObjectAnimationUsingKeyFrames		可以使用任意類型單幀的動畫。

所要說明的是，每一種子幀類型都有4種，即Discrete、Linear、Spline、Easing。如，PointAnimationUsingKeyFrames就會有DiscretePointKeyFrame、LinearPointKeyFrame、SplinePointKeyFrame、EasingPointKeyFrame。

而ObjectAnimationUsingKeyFrames只能使用DeiscreteObjectKeyFrame，以及系統自定義主題動畫。待會再介紹這個東東。

DeiscreteObjectKeyFrame這個玩意可以使用任意類型，即不局限於double、color、point，但是你也看到了，它是使用Deiscrete，所以它只能立即改變。

 

每一個子幀都有 KeyTime、Value兩個屬性。

KeyTime即為顯示該幀的時間，Value即在DoubleAnimationUsingKeyFrames中設定的屬性的值。

 

好了，我寫了一個BUTTON，可以任意跳轉位置，而且可以轉換長度：

<Button x:Name="widthButton" Content="Button" HorizontalAlignment="Left" Height="100" Margin="251,413,0,0" VerticalAlignment="Top" Width="124">
            <Button.Triggers>
                <EventTrigger RoutedEvent="Button.Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Duration="0:0:2" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="widthButton" Storyboard.TargetProperty="Width">
                                <LinearDoubleKeyFrame KeyTime="0" Value="100" />
                                <LinearDoubleKeyFrame KeyTime="0:0:1" Value="200" />
                                <LinearDoubleKeyFrame KeyTime="0:0:2" Value="300" />
                            </DoubleAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames EnableDependentAnimation="True" Duration="0:0:9" RepeatBehavior="Forever" AutoReverse="True" Storyboard.TargetName="widthButton" Storyboard.TargetProperty="Margin">
                                <DiscreteObjectKeyFrame KeyTime="0" Value="0,100,0,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:1" Value="100,100,0,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:2" Value="100,100,100,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:3" Value="0,200,100,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:4" Value="300,100,100,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:5" Value="0,400,100,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:6" Value="10,400,100,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:7" Value="90,160,100,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:0:8" Value="28,10,100,0" />
                                <DiscreteObjectKeyFrame KeyTime="0:09" Value="244,100,0,0" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>

 

 

4.系統主題動畫。

 

API	描述
AddDeleteThemeTransition	為控件添加或刪除子對象或內容的情形提供動畫的過渡表現方式。通常，控件是項目容器。
ContentThemeTransition	為控件的內容更改時的情形提供動畫的過渡表現方式。可以在應用 AddDeleteThemeTransition 后再應用它。
EntranceThemeTransition	為控件第一次顯示的情形提供動畫的過渡表現方式。
ReorderThemeTransition	為列表-視圖控件項目更改順序的情形提供動畫的過渡表現方式。通常它作為拖放操作的結果出現。不同的控件和主題可能具有不同的動畫特征。
RepositionThemeTransition	為控件更改位置的情形提供動畫的過渡表現方式。

 

API	描述
DropTargetItemThemeAnimation	應用到潛在的拖放目標元素的預配置動畫。
FadeInThemeAnimation	控件第一次出現時應用到控件的預配置不透明度動畫。
FadeOutThemeAnimation	控件從 UI 中刪除或隱藏時應用到控件的預配置不透明度動畫。
PopInThemeAnimation	控件的彈入組件顯示時應用到它們的預配置動畫。此動畫結合了不透明度和轉換。
PopOutThemeAnimation	控件的彈入組件關閉或刪除時應用到它們的預配置動畫。此動畫結合了不透明度和轉換。
RepositionThemeAnimation	對象重新放置時應用的預配置動畫。
SplitCloseThemeAnimation	使用拆分動畫顯示目標 UI 的預配置動畫。
PointerDownThemeAnimation	用於用戶點擊或單擊項目或元素操作的預配置動畫。
PointerUpThemeAnimation	在點擊一個項目或元素后（指針不再懸停在上面）運行的用戶操作預配置動畫。
SplitOpenThemeAnimation	使用拆分動畫顯示目標 UI 的預配置動畫。

上述表格從以下博客複製：

http://www.cnblogs.com/hebeiDGL/archive/2012/10/27/2742293.html

比如為GridView添加添加、刪除元素的動畫：

<GridView>
            <GridView.Items>
                <AddDeleteThemeTransition />
            </GridView.Items>
</GridView>

 

為一個按鈕添加一個進入的動畫：

                            <Button x:Name="button" Content="Button" HorizontalAlignment="Left" Height="69" Margin="-13,93,0,-117" VerticalAlignment="Top" Width="115">
                                <Button.Transitions>
                                    <TransitionCollection>
                                        <EntranceThemeTransition FromHorizontalOffset="500" FromVerticalOffset="500"  />
                                    </TransitionCollection>
                                </Button.Transitions>
                            </Button>

 

 

5.代碼控制動畫的播放與停止

上面介紹的都是自動播放的動畫，實際上我們可以手動開始、停止動畫。

我寫了一個單擊變化長度的動畫：

        <Grid.Resources>
            <Storyboard   x:Name="framesBoard"> －－－－標識一個名字進行操作
                <DoubleAnimationUsingKeyFrames
                        Storyboard.TargetName="frames"
                        Storyboard.TargetProperty="Width"
                        Duration="0:0:2"
                        EnableDependentAnimation="True"
                        >
                    <LinearDoubleKeyFrame KeyTime="0:0:2" Value="500" />
                </DoubleAnimationUsingKeyFrames>
            </Storyboard>
        </Grid.Resources>

        private void frames_Click(object sender, RoutedEventArgs e)
        {
            framesBoard.Begin();
        }