Hoạt ảnh WPF uốn cong và theo một số hình dạng đường dẫn

Question

Được rồi, vì vậy tôi đang làm việc trên màn hình tải và tôi muốn kích hoạt nó một chút.

Về cơ bản những gì tôi đang cố gắng làm là động một đối tượng cùng dữ liệu hình học đường ... Tôi nhấn mạnh 'cùng' vì giữ một đối tượng cố định dọc theo con đường trên tiếp tuyến không phải là những gì tôi muốn làm

Đây là đại diện tốt nhất của những gì tôi đang cố gắng để làm:

tôi có thể sử dụng một ma trận chuyển để gửi yếu tố biên giới này dọc theo con đường nhưng nó gió lên sắp ra như một phim hoạt hình tiếp tuyến mà di chuyển và quay với đường dẫn, nhưng không được nd để phù hợp với hình dạng của con đường ... Dưới đây là một ví dụ về điều đó:

<Border Background="Black" BorderBrush="Transparent" Width="20" Height="20"> 
<Border.RenderTransform> 
    <MatrixTransform x:Name="MatrixT"> 
     <MatrixTransform.Matrix> 
      <Matrix/> 
     </MatrixTransform.Matrix> 
    </MatrixTransform> 
</Border.RenderTransform> 
<Border.Triggers> 
    <EventTrigger RoutedEvent="Border.Loaded"> 
     <BeginStoryboard> 
      <Storyboard> 
       <MatrixAnimationUsingPath Storyboard.TargetName="MatrixT" Storyboard.TargetProperty="Matrix" DoesRotateWithTangent="True" Duration="0:0:5" RepeatBehavior="Forever"> 
        <MatrixAnimationUsingPath.PathGeometry> 
         <PathGeometry Figures="M201.1,50.501C201.1,78.138,178.737,100.501,151.1,100.501L150.799,100.501C123.162,100.501,114.933,77.834,100.8,50.501L100.8,50.5C86.666,23.167,78.437,0.5,50.8,0.5L50.5,0.5C22.863,0.5,0.500000000000014,22.863,0.500000000000014,50.5L0.500000000000014,50.501C0.500000000000014,78.138,22.863,100.501,50.5,100.501L50.8,100.501C78.437,100.501,86.666,77.834,100.8,50.501L100.8,50.5C114.933,23.167,123.162,0.5,150.799,0.5L151.1,0.5C178.736,0.5,201.1,22.863,201.1,50.501L201.1,50.501z" PresentationOptions:Freeze="True"/> 
        </MatrixAnimationUsingPath.PathGeometry> 
       </MatrixAnimationUsingPath> 
      </Storyboard> 
     </BeginStoryboard> 
    </EventTrigger> 
</Border.Triggers> 

tôi đã đưa ra một giải pháp thay thế mà trông thật sự sắc nét, nhưng tôi muốn để pitch câu hỏi này ra với cộng đồng để xem họ có ý tưởng nào về cách thực hiện nhiệm vụ này hay không. Tôi đã thực hiện một số vấn đề lớn về vấn đề này và đã không tìm ra cách để thực hiện điều này một cách hiệu quả có nghĩa.

Các yêu cầu:

1. Nó phải làm theo (hoặc 'uốn cong cùng') con đường
2. Nó phải có khả năng mở rộng về quy mô mà không vi phạm các hình ảnh động (rất nhiều các cơ quan đại diện hình ảnh động đột quỵ Tôi đã thấy điều này chỉ có thể hoạt động ở một kích thước mà không phải định cấu hình lại các thuộc tính hoạt ảnh) ... một hộp xem hoàn toàn có thể chấp nhận để thực hiện điều này

Nếu hình dạng có thể bị mờ và mờ dần ở phía sau thậm chí còn lớn hơn (xem hình ảnh ở trên), nhưng có thể nhiều hơn là có thể

CHỈNH SỬA: Để làm rõ ý tôi là 'uốn cong' ... Ý tôi là hình B bên dưới ... hình A là tiêu chuẩn mà tôi đã thấy truyền thống:

Answer 1

Biến đổi hình dạng của bạn thành một đường dẫn sẽ rất khó khăn trong WPF. Tuy nhiên có một xấp xỉ gần đúng có thể bằng cách làm động hai đường dẫn riêng biệt, và cũng làm động hai vùng cắt cùng một lúc.

Đưa ra dưới đây là XAML cho xấp xỉ những gì bạn muốn. Nếu bạn nhìn kỹ vào điểm giao nhau của biểu tượng vô cực, bạn sẽ thấy một chút gián đoạn trong độ bóng của độ bóng khi chuyển đổi. Điều này là do tôi có một chút tùy ý trong việc thiết lập các điểm Bắt đầu, Kết thúc và Bù đắp cho các đối tượng LinearGradientBrush. Một công việc nhỏ trên những người sẽ làm mịn quá trình chuyển đổi đó. Bạn thậm chí có thể chọn làm động các thuộc tính trên bàn chải để trợ giúp điều đó.

<Window x:Class="AnimationTest.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     Title="MainWindow" Height="350" Width="525" 
     Background="#FF486CBF"> 
    <Viewbox> 
    <Grid> 
     <Canvas Width="50" Height="50" 
       HorizontalAlignment="Left" 
       VerticalAlignment="Top"> 
     <Canvas.Clip> 
      <RectangleGeometry Rect="0,0,50,55"> 
      <RectangleGeometry.Transform> 
       <TranslateTransform x:Name="_clip1"/> 
      </RectangleGeometry.Transform> 
      </RectangleGeometry> 
     </Canvas.Clip> 
     <Path StrokeStartLineCap="Round" 
       StrokeEndLineCap="Round" 
       StrokeThickness="10" 
       RenderTransformOrigin="0.5,0.8571" 
       Data="M 5,25 c 0,-25 40,-25 40,0"> 
      <Path.Stroke> 
      <LinearGradientBrush StartPoint="0,0" EndPoint="1,0"> 
       <GradientStop Color="#FFFFFFFF" Offset="0"/> 
       <GradientStop Color="#00FFFFFF" Offset="0.7"/> 
      </LinearGradientBrush> 
      </Path.Stroke> 
      <Path.RenderTransform> 
      <RotateTransform x:Name="_rot1" /> 
      </Path.RenderTransform> 
      <Path.Triggers> 
      <EventTrigger RoutedEvent="Path.Loaded"> 
       <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation From="360" To="0" 
            Duration="0:0:3" 
            RepeatBehavior="Forever" 
            Storyboard.TargetName="_rot1" 
            Storyboard.TargetProperty="Angle"/> 
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_clip1" 
         Storyboard.TargetProperty="Y" 
         RepeatBehavior="Forever"> 
        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/> 
        <DiscreteDoubleKeyFrame KeyTime="0:0:1.5" Value="25"/> 
        <DiscreteDoubleKeyFrame KeyTime="0:0:2.8" Value="55"/> 
        <DiscreteDoubleKeyFrame KeyTime="0:0:4.5" Value="-30"/> 
        <DiscreteDoubleKeyFrame KeyTime="0:0:5.8" Value="0"/> 
        <DiscreteDoubleKeyFrame KeyTime="0:0:6" Value="0"/> 
        </DoubleAnimationUsingKeyFrames> 
       </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
      </Path.Triggers> 
     </Path> 
     </Canvas> 

     <Canvas Width="50" Height="50" 
       HorizontalAlignment="Left" 
       VerticalAlignment="Top" 
       Margin="40,0,0,0"> 
     <Canvas.Clip> 
      <RectangleGeometry Rect="0,0,50,55"> 
      <RectangleGeometry.Transform> 
       <TranslateTransform x:Name="_clip2"/> 
      </RectangleGeometry.Transform> 
      </RectangleGeometry> 
     </Canvas.Clip> 
     <Path StrokeStartLineCap="Round" 
       StrokeEndLineCap="Round" 
       StrokeThickness="10" 
       RenderTransformOrigin="0.5,0.8571" 
       Data="M 5,25 c 0,-25 40,-25 40,0"> 
      <Path.Stroke> 
      <LinearGradientBrush StartPoint="1,0" EndPoint="0,0"> 
       <GradientStop Color="#FFFFFFFF" Offset="0"/> 
       <GradientStop Color="#00FFFFFF" Offset="0.7"/> 
      </LinearGradientBrush> 
      </Path.Stroke> 
      <Path.RenderTransform> 
      <RotateTransform x:Name="_rot2" /> 
      </Path.RenderTransform> 
      <Path.Triggers> 
      <EventTrigger RoutedEvent="Path.Loaded"> 
       <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation From="0" To="360" 
         Duration="0:0:3" 
         RepeatBehavior="Forever" 
         Storyboard.TargetName="_rot2" 
         Storyboard.TargetProperty="Angle"/> 
        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="_clip2" 
         Storyboard.TargetProperty="Y" 
         RepeatBehavior="Forever"> 
        <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="55"/> 
        <DiscreteDoubleKeyFrame KeyTime="0:0:1.5" Value="-30"/> 
        <DiscreteDoubleKeyFrame KeyTime="0:0:2.8" Value="0"/> 
        <DiscreteDoubleKeyFrame KeyTime="0:0:4.5" Value="25"/> 
        <DiscreteDoubleKeyFrame KeyTime="0:0:5.8" Value="55"/> 
        <DiscreteDoubleKeyFrame KeyTime="0:0:6" Value="55"/> 
        </DoubleAnimationUsingKeyFrames> 
       </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
      </Path.Triggers> 
     </Path> 
     </Canvas> 
    </Grid> 
    </Viewbox> 
</Window> 

Điều quan trọng cần lưu ý là các vùng cắt cần được áp dụng cho các đối tượng Canvas.Nếu chúng được áp dụng cho các đối tượng Path, như bạn thường làm cho hình ảnh, vùng cắt sau đó sẽ được xoay cùng với Path theo RenderTrasform. Không phải là hiệu ứng mong muốn.

Answer 2

Bạn chỉ có thể đặt nhiều vòng tròn trên đường dẫn và tạo hiệu ứng đường kính của chúng.