Wpf(Storyboard)動畫簡單實例

動畫的三種變換方式

RotateTransform：旋轉變換變化值：CenterX圍繞轉的圓心橫坐標

       CenterY縱坐標

       Angle旋轉角度（角度正負表示方向）

 

ScaleTransform：縮放變換變化值：ScaleX橫向放大倍數 ScaleY縱向（負值時翻轉）

 

 

TranslateTransform：平移變換變化值： X橫坐標 Y縱坐標

 

其中

<Image.Projection>      后多了三種變化值，RotationX，RotationY，RotationZ分別圍繞X Y Z軸轉（單位度數）可以通過設置定時器來實現動畫。

 

 

<控件.RenderTransform>

      <變換方式x:Name = “名字”></變換方式>

</控件.RenderTransform >

 

 

在Wpf下使用：

在xaml <window></winodw>中添加：

 

<window. Resources>

       <Storyboard x:Key=”動畫名字”  RepeatBehavior="Forever"> 

              <DoubleAnimation Storyboard.TargetName="名字"

                             Storyboard.TargetProperty="變化值"

                             From="數 " To="數 "

                             BeginTime="XX:XX:XX"

                             Duration="XX:XX:XX">

            </DoubleAnimation>
        <!--可以同時變化多個值。-->

            <DoubleAnimation Storyboard.TargetName="名字"

                             Storyboard.TargetProperty="變化值"

                             From="數 " To="數 "

                             BeginTime="XX:XX:XX"

                             Duration="XX:XX:XX">

            </DoubleAnimation>

       </Storyboard>                     

</windows. Resources>

在程序調用位置中添加（一般在窗口加載方法中添加）運行動畫

Storyboard sbd = Resources["動畫名字"]asStoryboard;

sbd.Begin();

 

注意區分這里的名字和動畫名字是不同的。一般名字是控件的名字。

 

RepeatBehavior獲取或設置此時間線的重復行為。Forever循環動畫

DoubleAnimation它在指定的持續時間內將動畫從指定的起始值繼續到指定的目標值。

From，To 動畫開始到結束變化的值

BeginTime，Duration動畫開始到結束所用時間

 

 

DoubleAnimation中的值：

AutoReverse="True/False"

是否播放結束后倒序播放，例如：一朵雲從左往右飄然后再從右往左飄回來

 

 

下面方式實例：

 

控件部分：

<Image Source="Images/cloud.png" Width="190" Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20,20,0,0">

           <Image.RenderTransform>

               <TranslateTransform x:Name="cloud"></TranslateTransform>

           </Image.RenderTransform>

       </Image>

 

 

 

動畫部分：

   <Window.Resources>

       <Storyboard x:Key="sbCloud" RepeatBehavior="Forever">

           <DoubleAnimation Storyboard.TargetName="cloud"

                            Storyboard.TargetProperty="X"

                            From="0" To="280"

                            BeginTime="00:00:00"

                            Duration="00:00:10">

               

           </DoubleAnimation>

           <DoubleAnimation Storyboard.TargetName="cloud"

                            Storyboard.TargetProperty="Y"

                            From="0" To="30"

                            BeginTime="00:00:00"

                            Duration="00:00:10">

               

           </DoubleAnimation>

       </Storyboard>

   </Window.Resources>

 

這篇文章主要是給自己看的，描述錯誤請見諒。