WPF自定义控件二:Border控件与TextBlock控件轮播动画

时间：2021-12-29 21:22:59

需求：实现Border轮播动画与TextBlock动画

XAML代码如下：

 <Window.Resources>

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

            <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(Border.BorderBrush).(Brush.RelativeTransform).(TransformGroup.Children)[0].(RotateTransform.Angle)" Storyboard.TargetName="border">

                <EasingDoubleKeyFrame KeyTime="0:0:2" Value="360"/>

            </DoubleAnimationUsingKeyFrames>

        </Storyboard>

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

            <DoubleAnimation  From="-2" To="2" Duration="0:0:3"  Storyboard.TargetProperty="(TextBlock.Foreground).(Brush.RelativeTransform).(TransformGroup.Children)[0].(TranslateTransform.X)" Storyboard.TargetName="border1">

            </DoubleAnimation>

            <DoubleAnimation  From="2" To="-2" BeginTime="0:0:3" Duration="0:0:3" Storyboard.TargetProperty="(TextBlock.Foreground).(Brush.RelativeTransform).(TransformGroup.Children)[0].(TranslateTransform.X)"  Storyboard.TargetName="border1"></DoubleAnimation>

        </Storyboard>

        <LinearGradientBrush x:Key="dddd" EndPoint="0.5,1" StartPoint="0.5,0">

            <LinearGradientBrush.RelativeTransform>

                <TransformGroup>

                    <RotateTransform Angle="0" CenterX="0.5" CenterY="0.5"/>

                </TransformGroup>

            </LinearGradientBrush.RelativeTransform>

            <GradientStop Color="#11374c" Offset="0.2"/>

            <GradientStop Color="White" Offset="4"/>

        </LinearGradientBrush>

        <LinearGradientBrush  x:Key="eeee" StartPoint="0,0" EndPoint="1,0.001">

            <LinearGradientBrush.RelativeTransform>

                <TransformGroup>

                    <TranslateTransform X="-0.5" ></TranslateTransform>

                </TransformGroup>

            </LinearGradientBrush.RelativeTransform>

            <LinearGradientBrush.GradientStops>

                <GradientStopCollection>

                    <GradientStop Color="White" Offset="0.0"></GradientStop>

                    <GradientStop Color="LightBlue" Offset="0"></GradientStop>

                    <GradientStop Color="#11374c" Offset="1"></GradientStop>

                </GradientStopCollection>

            </LinearGradientBrush.GradientStops>

        </LinearGradientBrush>

    </Window.Resources>

    <Window.Triggers>

        <EventTrigger RoutedEvent="FrameworkElement.Loaded">

            <BeginStoryboard Storyboard="{StaticResource OnLoaded1}"/>

            <BeginStoryboard Storyboard="{StaticResource OnloadText}"/>

        </EventTrigger>

    </Window.Triggers>

    <Grid Background="Black">

        <TextBlock x:Name="border1" Foreground="{StaticResource eeee}" Text="Hymson" Width="130"  Height="55" FontSize="42"  FontFamily="宋体" FontWeight="Black" />

        <Border x:Name="border" Width="200" Height="60" BorderBrush="{StaticResource dddd}" BorderThickness="2" CornerRadius="5">

        </Border>

    </Grid>

效果展示

WPF自定义控件二:Border控件与TextBlock控件轮播动画

相关文章