Dikdörtgen konturuna bir degrade nasıl yerleştirilir ve canlandırılır?

Question

WPF animasyonlar ile oynamak ve gezgin bir inme (tek ant ile yürüyen karıncaların tür) yolunda bir dikdörtgenin sınır animasyon çalıştı ve şu çalışma kodu ile geldi edildi

:

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

Bu yüzden temelde bir 'karınca' 100 tane genişliğinde bir karenin etrafında dolaşıyor. Şimdi 'karıncaya' bir degrade koymak için bir yol bulmak istedim, örneğin % sonuna kadar.

Animasyonlu StrokeDashArray öğesine eklemenin bir yolu var mı yoksa her şeyi baştan farklı bir şekilde oluşturmalı mıyım? Gereksinim, animasyonu bir sınırın veya dikdörtgenin üstünde olmalıydı.

Herhangi bir ipucu açığız!

güncelleme: .. amaçlanan görünüm böyleolacağını Chris cevap ve benim açıklama olarak: çizgi dikdörtgen dolaşıp ile

Answer 1

Karıncalarla bir örnek var here

yapabilirsiniz Örneğin, vuruşunuza bir Degrade uygulayın; Ben size oldukça olurdu ima etmeye çalıştığını düşünüyorum gibi tüm inme ve meyil ve tek bir çizgi uygulayacaktır Ancak

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

. Orada sorduğun şey mümkün değil. Ancak

, bir yanılsama ile sahte aynı DashArray olmadan etkisi ve canlandırmanın sıralamak olabilir Gradient baştan sona nesnenin etrafında (yukarıdaki Rectangle.Stroke örnekte gösterilen) EndPoint ve StartPoint.

Quickie Konsept Örnek:

<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 Konsept Örnek Sonuç:

EK:

Ne yazık ki üzerinde düzenleme ve yapmak serbest zaman yok işinizi yapmak için mükemmel ama umarım nasıl yapabileceğinizle ilgili sonra inme gradyan tekniği ile etkisi chieve.

Quickie Güncelleme kod:

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

Şipşak Konsept Sonucu (bazı değişiklik yapmak gerekebileceğini, ama hey, SO ücretsiz kod çalışma hizmeti zaten doğru değil :) Oh ve berbat .gif için üzgün olacak? kalite.

Umut bu, Şerefe yardımcı olur!