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


    需求:实现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>

    效果展示

  • 相关阅读:
    小程序请求Django后台及路由跳转
    git操作
    github 介绍
    小程序01
    HTML5要点(四)对象全整理
    JavaScript要点(十二) HTML DOM 事件
    JavaScript要点(九)HTML DOM
    JavaScript要点(八) 闭包
    inferred 和 freefrom
    MySql数据库实现分布式的主从结构
  • 原文地址:https://www.cnblogs.com/zt199510/p/14037492.html
Copyright © 2020-2023  润新知