WPF动画效果学习记录

最新推荐文章于 2023-08-25 16:56:16 发布

weixin_45082999

最新推荐文章于 2023-08-25 16:56:16 发布

阅读量143

点赞数

文章标签：动画

本文链接：https://blog.csdn.net/weixin_45082999/article/details/130714770

版权

WPF动画学习记录）

用Border做一个进入动画
Border 进入动画

用Border做一个进入动画

  <Border x:Name="TestBorder"
                Width="120"
                Height="60"
                Background="#353535">
     
            <Grid>
                <Border x:Name="LightBorder"
                        Height="10"
                        Width="30"
                        Margin="-85 -45 0 0"
                        CornerRadius="5">
                    <Border.Background>
                    <!--目前只是研究出了用SolidColorBrush来做颜色动画-->
                        <SolidColorBrush Color="#FF8C00">
                        </SolidColorBrush>
                    </Border.Background>
                </Border>
                <TextBlock Text="UserControl" 
                           Margin="40 0 0 0"
                           Foreground="#FF9C00"/>
                <TextBlock x:Name="TextTest" Width="100" Height="40" Margin="0 10 0 0"/>
            </Grid>
            <Border.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <ColorAnimationUsingKeyFrames Storyboard.TargetName="LightBorder"
                                                          Storyboard.TargetProperty="(Border.Background).(SolidColorBrush.Color)"
                                                          BeginTime="0:0:0"
                                                          Duration="0:0:2"
                                                          FillBehavior="HoldEnd"
                                                          RepeatBehavior="Forever">
                                <ColorAnimationUsingKeyFrames.KeyFrames>
                                    <DiscreteColorKeyFrame KeyTime="0:0:0"
                                                           Value="#FFFFFF"/>
                                    <DiscreteColorKeyFrame KeyTime="0:0:0.1"
                                                           Value="#5B5B5B"/>
                                    <DiscreteColorKeyFrame KeyTime="0:0:0.25"
                                                           Value="#FFFFFF"/>
                                    <DiscreteColorKeyFrame KeyTime="0:0:0.3"
                                                           Value="#5B5B5B"/>
                                </ColorAnimationUsingKeyFrames.KeyFrames>
                            </ColorAnimationUsingKeyFrames>
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
        </Border>

Border 进入动画

  <Border x:Name="TestBorder"
                Width="120"
                Height="60"
                Background="#353535">
            <Border.RenderTransform>
                <TranslateTransform X="0"
                                    Y="-270"/>
            </Border.RenderTransform>
            <Grid>
                <Border x:Name="LightBorder"
                        Height="10"
                        Width="30"
                        Margin="-85 -45 0 0"
                        CornerRadius="5">
                    <Border.Background>
                        <SolidColorBrush Color="#FF8C00">

                        </SolidColorBrush>
                    </Border.Background>
                </Border>
                <TextBlock Text="UserControl" 
                           Margin="40 0 0 0"
                           Foreground="#FF9C00"/>
                <TextBlock x:Name="TextTest" Width="100" Height="40" Margin="0 10 0 0"/>
            </Grid>
            <Border.Triggers>
                <EventTrigger RoutedEvent="Loaded">
                    <BeginStoryboard>
                        <Storyboard>
                            <DoubleAnimation Storyboard.TargetName="TestBorder"
                                             Storyboard.TargetProperty="RenderTransform.(TranslateTransform.Y)"
                                             From="-270"
                                             To="0"
                                             BeginTime="0:0:0"
                                             Duration="0:0:0.2">
                                             <!--缓存动画,感觉像是逐渐加速效果-->
                                             <DoubleAnimation.EasingFunction>
                                    			<CircleEase EasingMode="EaseIn"/>
                               				 </DoubleAnimation.EasingFunction>
                            </DoubleAnimation >
                        </Storyboard>
                    </BeginStoryboard>
                </EventTrigger>
            </Border.Triggers>
        </Border>