如何在矩形笔划上放置渐变并为其设置动画? [英] How to put a gradient on a rectangle stroke and animate it?

查看：17
本文介绍了如何在矩形笔划上放置渐变并为其设置动画?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在玩 WPF 动画，并试图以游走的笔触(一种只有一只蚂蚁的行军蚂蚁)的方式为矩形的边界设置动画，并想出了以下工作代码:

<窗口.资源><故事板 x:Key="MarchingAnts"><DoubleAnimationUsingKeyFrames BeginTime="00:00:00"Storyboard.TargetName="矩形"Storyboard.TargetProperty="(Shape.StrokeDashOffset)"RepeatBehavior="永远"><SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/><SplineDoubleKeyFrame KeyTime="00:00:03.000000" Value="-385"/></DoubleAnimationUsingKeyFrames></故事板></Window.Resources><窗口.触发器><EventTrigger RoutedEvent="FrameworkElement.Loaded"><BeginStoryboard Storyboard="{StaticResource MarchingAnts}"/></事件触发器></Window.Triggers><Grid x:Name="LayoutRoot"><Canvas x:Name="canvas" Background="#FF262626"><矩形填充="#14FFFFFF"中风=红色"x:Name="矩形" 宽度="400" 高度="400"StrokeDashOffset="-385" StrokeDashArray='0, 0, 100,285' StrokeThickness="4"RadiusX="25" RadiusY="25"Canvas.Left="10" Canvas.Top="10"></矩形></画布></网格></窗口>

所以我基本上有一只长度为 100 的蚂蚁"在宽度为 400 的正方形周围徘徊.现在我想找到一种方法在蚂蚁"上添加渐变，例如将其从 50% 淡出到结尾.

有没有办法将此类添加到动画 StrokeDashArray 中，或者我应该从一开始就以不同的方式创建整个事物?要求是将动画放在边框或矩形的顶部.

欢迎任何提示！

更新:就像克里斯的回答和我的评论一样……预期的外观是这样的: 虚线在矩形周围徘徊

解决方案

我有一个蚂蚁的例子

附录:

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

快速更新代码:

<窗口.资源><故事板 x:Key="GradientChaser" RepeatBehavior="永远"><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></故事板><故事板 x:Key="GradientChaserOverlay" RepeatBehavior="永远"><PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)" Storyboard.TargetName="rectangle2"><EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.146,0.146"/><EasingPointKeyFrame KeyTime="0:0:1" Value="0.502,-0.001"/><EasingPointKeyFrame KeyTime="0:0:1.5" Value="0.85,0.142"/><EasingPointKeyFrame KeyTime="0:0:2" Value="0.863,0.845"/><EasingPointKeyFrame KeyTime="0:0:2.5" Value="-0.001,0.498"/></PointAnimationUsingKeyFrames><PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)" Storyboard.TargetName="rectangle2"><EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.854,0.854"/><EasingPointKeyFrame KeyTime="0:0:1" Value="0.498,1.001"/><EasingPointKeyFrame KeyTime="0:0:1.5" Value="0.15,0.858"/><EasingPointKeyFrame KeyTime="0:0:2" Value="0.137,0.155"/><EasingPointKeyFrame KeyTime="0:0:2.5" Value="1.001,0.502"/></PointAnimationUsingKeyFrames></故事板></Window.Resources><窗口.触发器><EventTrigger RoutedEvent="FrameworkElement.Loaded"><BeginStoryboard Storyboard="{StaticResource GradientChaser}"/><BeginStoryboard Storyboard="{StaticResource GradientChaserOverlay}"/></事件触发器></Window.Triggers><网格><矩形 x:Name="rectangle" Width="250" Height="250" Horizo​​ntalAlignment="Center" VerticalAlignment="Center" StrokeThickness="10"><矩形.描边><LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"><GradientStop Color="Red" Offset="0"/><GradientStop Color="透明" Offset="1"/></LinearGradientBrush></Rectangle.Stroke></矩形><矩形 x:Name="rectangle2" Width="250" Height="250" Horizo​​ntalAlignment="Center" VerticalAlignment="Center" StrokeThickness="10"><矩形.描边><LinearGradientBrush EndPoint="1,0.501" StartPoint="0,0.499"><GradientStop Color="White" Offset="0.35"/><GradientStop Color="透明" Offset="0.342"/></LinearGradientBrush></Rectangle.Stroke></矩形></网格></窗口>

Quickie 概念结果(需要一些调整，但是嘿，无论如何，SO 不是免费的代码工作服务，对吗?:) 哦，对于糟糕的 .gif 质量感到抱歉.

希望这会有所帮助，干杯！

I was playing around with WPF animations and tried to animate the border of a rectangle in the way of a wandering stroke (kind of marching ants with only one ant) and came up with the following working code:

<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>

So I have basically one 'ant' with the length of 100 wandering around a square with a width of 400. Now I wanted to find a way to put a gradient on the 'ant', for example to fade it out from 50% to the end.

Is there a way to add such to the animated StrokeDashArray or should I create the whole thing differently from the beginning? Requirement would be to have the animation on top of a border or rectangle.

Any hints are welcome!

update: as in Chris answer and my comment .. the intended look would be like this: with the dash wandering around the rectangle

解决方案

I have an example of ants here

You can apply a Gradient to your stroke, as example;

<Rectangle.Stroke>
   <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">
      <GradientStop Color="Red" Offset="0"/>
      <GradientStop Color="Transparent" Offset="1"/>
   </LinearGradientBrush>
</Rectangle.Stroke>

However it will apply the gradient to the entire stroke and not an individual dash as I think you're implying you would rather have. What you're asking for there is not possible.

However, you can fake it with an illusion to sort of the same effect without the DashArray and animating the Gradient EndPoint and StartPoint (Shown in the Rectangle.Stroke example above) around the object from start to finish.

Quickie Concept Example:

<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 Concept Example Result:

ADDENDUM:

Unfortunately I don't have free time to tweak it and make it perfect to do your work but hopefully it will communicate the concept of how you can achieve the effect with the stroke gradient technique you're after.

Quickie Updated code:

<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>
        <Storyboard x:Key="GradientChaserOverlay" RepeatBehavior="Forever">
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.StartPoint)" Storyboard.TargetName="rectangle2">
                <EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.146,0.146"/>
                <EasingPointKeyFrame KeyTime="0:0:1" Value="0.502,-0.001"/>
                <EasingPointKeyFrame KeyTime="0:0:1.5" Value="0.85,0.142"/>
                <EasingPointKeyFrame KeyTime="0:0:2" Value="0.863,0.845"/>
                <EasingPointKeyFrame KeyTime="0:0:2.5" Value="-0.001,0.498"/>
            </PointAnimationUsingKeyFrames>
            <PointAnimationUsingKeyFrames Storyboard.TargetProperty="(Shape.Stroke).(LinearGradientBrush.EndPoint)" Storyboard.TargetName="rectangle2">
                <EasingPointKeyFrame KeyTime="0:0:0.5" Value="0.854,0.854"/>
                <EasingPointKeyFrame KeyTime="0:0:1" Value="0.498,1.001"/>
                <EasingPointKeyFrame KeyTime="0:0:1.5" Value="0.15,0.858"/>
                <EasingPointKeyFrame KeyTime="0:0:2" Value="0.137,0.155"/>
                <EasingPointKeyFrame KeyTime="0:0:2.5" Value="1.001,0.502"/>
            </PointAnimationUsingKeyFrames>
        </Storyboard>
    </Window.Resources>
    <Window.Triggers>
        <EventTrigger RoutedEvent="FrameworkElement.Loaded">
            <BeginStoryboard Storyboard="{StaticResource GradientChaser}"/>
            <BeginStoryboard Storyboard="{StaticResource GradientChaserOverlay}"/>
        </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>

        <Rectangle x:Name="rectangle2" Width="250" Height="250" HorizontalAlignment="Center" VerticalAlignment="Center" StrokeThickness="10">
            <Rectangle.Stroke>
                <LinearGradientBrush EndPoint="1,0.501" StartPoint="0,0.499">
                    <GradientStop Color="White" Offset="0.35"/>
                    <GradientStop Color="Transparent" Offset="0.342"/>
                </LinearGradientBrush>
            </Rectangle.Stroke>

        </Rectangle>

    </Grid>
</Window>

Quickie Concept Result (will require some tweaking, but hey, SO isn't a free code work service anyway right? :) Oh, and sorry for the crappy .gif quality.

Hope this helps, Cheers!

这篇关于如何在矩形笔划上放置渐变并为其设置动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆