矩形のストロークにグラデーションを配置してアニメーションする方法は？

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> 

私は基本的に100の長さを持つ1つの「蟻」を400の幅の正方形の周りをさまよっています。 今、私は「ant」に勾配をつける方法を探したかったのです。 ％ 最後まで。

アニメーション化されたStrokeDashArrayにそのようなものを追加する方法はありますか、または最初とは別のものを作成する必要はありますか？境界または矩形の上にアニメーションを配置する必要があります。

ヒントは大歓迎です！

更新：クリスの答えは、私のコメントのように ...意図外観はこのようになります：長方形

Answer 1

うろついダッシュ 私はあなたがすることができアリhere

の例を持っています例として、ストロークにグラデーションを適用します。

私はあなたがむしろ持っているでしょう暗示していると思うと、それはストローク全体ではなく、個々のダッシュにグラデーションを適用しますが

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

。あなたが求めていることは不可能です。

ただし、あなたが偽のそれDashArrayせずに同じ効果をソートするための錯覚で、スタートからフィニッシュまで、オブジェクトの周りに（上記Rectangle.Strokeの例で示した）グラデーションEndPointとStartPointをアニメーション化することができます。

急ごしらえの概念例：

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

急ごしらえのコンセプト例では、結果：

補遺：

は、残念ながら、私はそれを微調整して作るために自由な時間を持っていませんそれはあなたの仕事を行うのに完璧ですが、うまくいけば、あなたがあなたが行っているストロークグラジエントテクニックを使って効果を捉えます。

急ごしらえの更新コード：

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

急ごしらえのコンセプト結果（いくつかの調整が必要になりますが、ちょっと、SO無料のコードワークサービスはああ:)とにかく右ではなく、安っぽい.GIFのため申し訳ありません？品質。

これは、乾杯を役に立てば幸い！