Question

我正在玩WPF动画，试图以漫游的方式为一个矩形的边框设置动画（只用一只蚂蚁行进蚂蚁）并提出以下工作代码：

<Window
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" mc:Ignorable="d" x:Class="WindowTest.MainWindow"
    Height="454.719" Width="429.847" ResizeMode="NoResize">
<Window.Resources>
    <Storyboard x:Key="MarchingAnts">
        <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" 
            Storyboard.TargetName="rectangle" 
            Storyboard.TargetProperty="(Shape.StrokeDashOffset)" 
            RepeatBehavior="Forever">
            <SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>
            <SplineDoubleKeyFrame KeyTime="00:00:03.000000" Value="-385"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</Window.Resources>
<Window.Triggers>
    <EventTrigger RoutedEvent="FrameworkElement.Loaded">
        <BeginStoryboard Storyboard="{StaticResource MarchingAnts}"/>
    </EventTrigger>
</Window.Triggers>

<Grid x:Name="LayoutRoot">
    <Canvas x:Name="canvas" Background="#FF262626">
        <Rectangle Fill="#14FFFFFF" 
            Stroke="Red"
            x:Name="rectangle" Width="400" Height="400" 
            StrokeDashOffset="-385" StrokeDashArray='0, 0, 100,285' StrokeThickness="4"                        
            RadiusX="25" RadiusY="25"
            Canvas.Left="10" Canvas.Top="10">                
        </Rectangle>
    </Canvas>
</Grid>
</Window>

所以我基本上有一个＆＃39; ant＆＃39;长度为100，在宽度为400的正方形周围游荡。现在我想找到一种方法在＆＃39; ant＆＃39;上添加渐变，例如将其从50％淡化到最后。

有没有办法将这些添加到动画StrokeDashArray中，还是应该从头开始创建不同的东西？要求是将动画置于边框或矩形之上。

欢迎任何提示！

更新：正如克里斯回答和我的评论......预期的外观将是这样的：短划线在矩形周围徘徊

Answer 1

我有一个蚂蚁here

的例子

例如，您可以将渐变应用于笔划;

var dictionary = new RouteValueDictionary();
dictionary[filter] = query;
return RedirectToAction("Search", dictionary);

然而，它会将渐变应用于整个笔划，而不是单独的破折号，因为我认为你暗示你宁愿拥有。您要求的是不可能的。

然而，你可以用幻觉来假装它，以便在没有DashArray和动画渐变<Rectangle.Stroke> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Red" Offset="0"/> <GradientStop Color="Transparent" Offset="1"/> </LinearGradientBrush> </Rectangle.Stroke>和EndPoint（显示在Rectangle.Stroke中）的情况下进行相同的效果排序上面的例子）从开始到结束的对象周围。

Quickie概念示例：

StartPoint

Quickie概念示例结果：

<强>附录：

不幸的是，我没有空闲时间来调整它并使它完美地完成你的工作，但希望它能传达你如何通过你所追求的笔画渐变技术实现效果的概念。

快速更新代码：

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WpfApplication1"
        mc:Ignorable="d"
        Title="MainWindow" Height="350" Width="525">
    <Window.Resources>
        <Storyboard x:Key="GradientChaser" RepeatBehavior="Forever">
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)" 
                                          Storyboard.TargetName="rectangle">
                <EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.855,0.148"/>
                <EasingPointKeyFrame KeyTime="0:0:1" Value="0.852,0.855"/>
                <EasingPointKeyFrame KeyTime="0:0:1.5" Value="0.148,0.855"/>
                <EasingPointKeyFrame KeyTime="0:0:2" Value="0.144,0.149"/>
                <EasingPointKeyFrame KeyTime="0:0:2.5" Value="0,0"/>
            </PointAnimationUsingKeyFrames>
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)" 
                                          Storyboard.TargetName="rectangle">
                <EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.145,0.852"/>
                <EasingPointKeyFrame KeyTime="0:0:1" Value="0.148,0.145"/>
                <EasingPointKeyFrame KeyTime="0:0:1.5" Value="0.852,0.145"/>
                <EasingPointKeyFrame KeyTime="0:0:2" Value="0.856,0.851"/>
                <EasingPointKeyFrame KeyTime="0:0:2.5" Value="0,1"/>
            </PointAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource GradientChaser}"/>
        </EventTrigger>
    </Window.Triggers>
    <Grid>

        <Rectangle x:Name="rectangle" Width="250" Height="250"
                   HorizontalAlignment="Center" VerticalAlignment="Center" 
                   StrokeThickness="10">
            <Rectangle.Stroke>
                <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="Transparent" Offset="1"/>
                </LinearGradientBrush>
            </Rectangle.Stroke>

        </Rectangle>

    </Grid>
</Window>

Quickie概念结果（需要一些调整，但是，嘿，反正这不是一个免费的代码工作服务吗？:)哦，抱歉蹩脚的.gif质量。

希望这有帮助，干杯！

如何在矩形笔划上放置渐变并为其设置动画？

1 个答案: