WPF前台動畫設計

以下是簡單的按鈕動畫，事件觸發動畫效果：

<Button x:Name="test" Content="事件動畫" Height="50" Width="100" Background="Red">
            <Button.Triggers >
                <EventTrigger RoutedEvent="Button.MouseMove">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation  Storyboard.TargetProperty="Opacity"
                                     From="1.0" To="0.0" Duration="0:0:1" RepeatBehavior="Forever" AutoReverse="True"/>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Button.Triggers>
        </Button>
           

裡面主要涉及到幾個參數&屬性：

1.BeginStoryboard：開始故事闆

2.Storyboadd：故事闆設計

3.DoubleAnimation ：指定一個Double類型的屬性,使其在指定的時間内由起點值到達終點值,進而形成動畫效果.

4.Storyboard.TargetProperty：要操作的屬性

5.其實還有一個Storyboard.TargetName：要動畫效果的元素名稱

6.Duration：即運作一個動畫所需的時間，如0：0：5即對應動畫所需5秒中。

7.RepeatBehavior：動畫重複的次數，輸入數字即訓話多少次；輸入’Forever‘代表一直循環。

8.AutoReverse:輸入True，動畫正向運作然後反向運作；輸入False，動畫隻正向運作。

以下是通過綁定屬性觸發動畫效果：

<CheckBox x:Name="bb" Content="顯示動畫" Margin="0,50,0,0" HorizontalAlignment="Center"/>

        <Button Content="綁定動畫" Height="50" Margin="50" Width="100" Background="Red">
            <Button.Style>
                <Style TargetType="Button">
                    <Style.Triggers>
                        <DataTrigger Binding="{Binding ElementName=bb,Path=IsChecked}" Value="true">
                            <DataTrigger.EnterActions>
                                <BeginStoryboard x:Name="animation">
                                    <Storyboard>
                                        <DoubleAnimation  Storyboard.TargetProperty="Opacity"
                                     From="1.0" To="0.0" Duration="0:0:1" RepeatBehavior="Forever" AutoReverse="True"/>
                                    </Storyboard>
                                </BeginStoryboard>
                            </DataTrigger.EnterActions>
                            <DataTrigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="animation"/>
                            </DataTrigger.ExitActions>
                        </DataTrigger>
                    </Style.Triggers>
                </Style>
            </Button.Style>
        </Button>
           

綁定屬性觸發循環動畫有個問題，就是綁定屬性變化之後，運作的動畫不會停止并一直運作；以下代碼可以有效解決此問題，可以在屬性更改之後直接停止動畫。

<DataTrigger.ExitActions>
                                <StopStoryboard BeginStoryboardName="animation"/>
                            </DataTrigger.ExitActions>
           

以上隻是簡單的動畫講解，後期會更新更多的WPF動畫技巧。