WPF動畫基礎小例項 - DoubleAnimation遇上Effect
阿新 • • 發佈:2020-08-25
動畫效果如下:
原始碼如下:
<UniformGrid Columns="2"> <!-- DropShadowEffect陰影效果 --> <Grid> <Ellipse x:Name="el" Width="100" Height="100" Fill="#5c6bff"> <Ellipse.Effect> <DropShadowEffect x:Name="dse" BlurRadius="5" Direction="0" ShadowDepth="5" /> </Ellipse.Effect> </Ellipse> <StackPanel> <StackPanelOrientation="Horizontal"> <TextBlock Text="ShadowDepth:" /> <TextBox Text="{Binding ElementName=dse, Path=ShadowDepth}" /> <TextBlock Text="預設值:5" /> <CheckBox Name="cbShadowDepth" IsChecked="True"><CheckBox.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard x:Name="daShadowDepth"> <Storyboard> <DoubleAnimation AutoReverse="False" RepeatBehavior="Forever" Storyboard.TargetName="dse" Storyboard.TargetProperty="(DropShadowEffect.ShadowDepth)" From="5" To="50" Duration="0:0:15" /> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="CheckBox.Unchecked"> <PauseStoryboard BeginStoryboardName="daShadowDepth" /> </EventTrigger> <EventTrigger RoutedEvent="CheckBox.Checked"> <ResumeStoryboard BeginStoryboardName="daShadowDepth" /> </EventTrigger> </CheckBox.Triggers> </CheckBox> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="BlurRadius:" /> <TextBox Text="{Binding ElementName=dse, Path=BlurRadius}" /> <TextBlock Text="預設值:5" /> <CheckBox Name="cbBlurRadius" IsChecked="True"> <CheckBox.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard x:Name="daBlurRadius"> <Storyboard> <DoubleAnimation AutoReverse="False" RepeatBehavior="Forever" Storyboard.TargetName="dse" Storyboard.TargetProperty="(DropShadowEffect.BlurRadius)" From="5" To="50" Duration="0:0:15" /> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="CheckBox.Unchecked"> <PauseStoryboard BeginStoryboardName="daBlurRadius" /> </EventTrigger> <EventTrigger RoutedEvent="CheckBox.Checked"> <ResumeStoryboard BeginStoryboardName="daBlurRadius" /> </EventTrigger> </CheckBox.Triggers> </CheckBox> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="Direction:" /> <TextBox Text="{Binding ElementName=dse, Path=Direction}" /> <TextBlock Width="150" Text="預設值:0,取值範圍0-360" /> <CheckBox Name="cbDirection" IsChecked="True"> <CheckBox.Triggers> <EventTrigger RoutedEvent="FrameworkElement.Loaded"> <BeginStoryboard x:Name="daDirection"> <Storyboard> <DoubleAnimation AutoReverse="False" RepeatBehavior="Forever" Storyboard.TargetName="dse" Storyboard.TargetProperty="(DropShadowEffect.Direction)" From="0" To="360" Duration="0:0:15" /> </Storyboard> </BeginStoryboard> </EventTrigger> <EventTrigger RoutedEvent="CheckBox.Unchecked"> <PauseStoryboard BeginStoryboardName="daDirection" /> </EventTrigger> <EventTrigger RoutedEvent="CheckBox.Checked"> <ResumeStoryboard BeginStoryboardName="daDirection" /> </EventTrigger> </CheckBox.Triggers> </CheckBox> </StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="Color:" /> <TextBox Text="{Binding ElementName=dse, Path=Color}" /> <TextBlock Text="預設值:黑色" /> </StackPanel> </StackPanel> </Grid> <!-- BlurEffect模糊效果 --> <Grid> <Ellipse x:Name="el2" Width="100" Height="100" Fill="#5c6bff"> <Ellipse.Effect> <BlurEffect x:Name="dse2" Radius="5" /> </Ellipse.Effect> </Ellipse> <StackPanel> <StackPanel Orientation="Horizontal"> <TextBlock Text="Radius:" /> <TextBox Text="{Binding ElementName=dse2, Path=Radius}" /> <TextBlock Text="預設值:5" /> </StackPanel> </StackPanel> </Grid> </UniformGrid>