一：StoryBoard

一般翻譯成演示圖版或者故事板，就像電影中的情節串聯板，它是一個動畫時間線的容器。

二：動畫的分類

簡單動畫：以Animation結尾，例如DoubleAnimation

　 關鍵幀動畫：以AnimationUsingKeyFrames結尾

　 簡單動畫主要是定義兩個值，一個起點，一個終點，在兩個值之間生成動畫，可以用來滿足簡單的動畫需求。

　 關鍵幀動畫更好理解，你可以像flash裏一樣，通過不同的關鍵幀來定義動畫。這樣做的動畫會比簡單動畫來的細致一些。

三：VisualState

在上一篇中，通過編輯模板vs會自動生成一個對應控件的Style。我們可以在VisualStateManager裏改一下不同狀態下的控件樣式。

<Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <Grid x:Name="RootGrid">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="
 
CommonStates">
                                    <VisualState x:Name="Normal">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.5" From="0" To="0.1" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="
 
Mask" ></DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="PointerOver">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.5" From="0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Mask" ></DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Pressed">
                                        <Storyboard>
                                            <DoubleAnimation Duration="0:0:0.5" From="0.2" To="0" Storyboard.TargetProperty="Opacity" Storyboard.TargetName="Mask" ></DoubleAnimation>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Disabled">
                                        <Storyboard>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Ellipse Width="{TemplateBinding Width}"
                                     Height="{TemplateBinding Height}"
                                     Fill="{TemplateBinding Background}"></Ellipse>
                            <ContentPresenter x:Name="ContentPresenter" 
                                              AutomationProperties.AccessibilityView="Raw" 
                                              BorderBrush="{TemplateBinding BorderBrush}" 
                                              BorderThickness="{TemplateBinding BorderThickness}" 
                                              ContentTemplate="{TemplateBinding ContentTemplate}" 
                                              ContentTransitions="{TemplateBinding ContentTransitions}"
                                              Content="{TemplateBinding Content}" 
                                              HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              Padding="{TemplateBinding Padding}" 
                                              VerticalContentAlignment="{TemplateBinding VerticalContentAlignment}"/>
                            <Ellipse Name="Mask" Fill="Black" Opacity="0.1"/>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>

每一個VisualState代表一個狀態。Normal默認狀態，PointerOver鼠標移上狀態，Pressed鼠標安按下狀態，Disabled不可用狀態

通過簡單動畫DoubleAnimation來定義一些簡單的動畫。

---some words---

1.StoryBoard：故事板

-----the end-------

UWP 動畫