屬性值動態改變 (動畫)

屬性值可以透過動態的功能做到動態改變。
改變值的元件依照值的類型而有所不同，如果是一般的數值，就可以使用
DoubleAnimation

DoubleAnimation

操作一個值 (Storyboard.TargetProperty)，給予開始值(From)和結束值(To)，會在指定的時間週期(Duration)內，將值從開始值變化到結束值

<DoubleAnimation Storyboard.TargetProperty="StrokeThickness" 
             From="0" To="2" Duration="0:0:0.5" 
             AutoReverse="True" RepeatBehavior="Forever"
             />

當變化完成後，若想倒轉回到原本的值，可以下AutoReverse。若想要重覆此流程，可以下RepeatBehavior。

RepeatBehavior有以下幾種用法

• Forever 不斷重覆
• 0:0:4 重覆直到4秒
• 2x 重覆兩次
• 0.5x 重覆半次

在DoubleAnimation中，要指定變化的屬性並不是透過DoubleAnimation中的屬性，而是要使用附加屬性 Storyboard.TargetProperty。因此，我們可以知道在DoubleAnimation的外層一定包著Storyboard

Storyboard

Storyboard用來決定

• 要改變的屬性
• 擁有此屬性的對像
• 讓動畫前進、停止、暫停等動作
  Storyboard並不直接設定改變的屬性及對像，相反的是透過附加屬性在子系的xxxAnimation中去指定

觸發動畫的方法

1. 直接在控制項的Triggers中，新增EventTrigger

   • 由於EventTrigger是看事件的，所以直接使用 < BeginStoryboard >

        <Rectangle Fill="#FFF4F4F5"  Height="100" Margin="215,186,0,0"  Width="100">
        <Rectangle.Triggers>
            <EventTrigger  RoutedEvent="Loaded">
                <BeginStoryboard>
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetProperty="Opacity"  From="1.0" To="0" Duration="0:0:2" AutoReverse="True" RepeatBehavior="Forever"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
        </Rectangle.Triggers>
     

2. 在控制項中的Triggers中，新增Trigger

• 由於Trigger在設定的時候，就要指定值是什麼的時候才要觸發Trigger。所以會有值被修改造成觸發及值被修改後再次等待觸發兩種狀況。
  這兩種狀況發生時，要作動的內容分別寫在
  <Trigger.EnterActions>
  及
  <Trigger.ExitActions>
• Trigger只能設在Style中的Triggers，不能設在控制項中的Triggers。所以要在控制項中的Resource中設定Style來設定此Trigger

< Rectangle Stroke="Black" Fill="#FFF4F4F5"  Height="100" Margin="74,178,0,0"  Width="100">
    < Rectangle.Resources>
        < Style TargetType="Rectangle">
            < Style.Triggers>
                < Trigger Property="IsMouseOver"  Value="True">
                    < Trigger.EnterActions>
                        < BeginStoryboard>
                            < Storyboard>
                                < DoubleAnimation Storyboard.TargetProperty="StrokeThickness" From="0" To="4" Duration="0:0:1"/>
                            < /Storyboard>
                        < /BeginStoryboard>
                    < /Trigger.EnterActions>
                < /Trigger>
            < /Style.Triggers>
        < /Style>
    < /Rectangle.Resources>
< /Rectangle>