【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();
        }