你的位置:首页 > 操作系统

[操作系统]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();    }