WPF 사각형을 동시에 애니메이션화하는 방법

Question

폭이 0에서 일부 오프셋을 색상으로 표현하고 빨간색으로 나머지 폭을 녹색으로 나타내려면 직사각형이 있습니다. 어떻게해야할까요?

예 : - | - 레드 - < 시작> 중지>

이 애니메이션의 흐름 | 시작 < - 녹색 -> 중지 |

Answer 1

Rectangle 당신은 Content을 허용하지 않습니다. 따라서 Fill을 VisualBrush 또는 DrawingBrush으로 사용할 수 있습니다. 이 VisualBrush 두 Rectangle 객체와 StackPanel이있을 것이다

비주얼 접근 방식. 코드 아래

실행 그대로 :

<Rectangle Height="100" Stroke="Black"> 
    <Rectangle.Triggers> 
     <EventTrigger RoutedEvent="Loaded"> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation Storyboard.TargetProperty="Width" From="0" To="200" Duration="0:0:10"/> 
        <DoubleAnimation Storyboard.TargetName="LeftRect" Storyboard.TargetProperty="Width" From="0" To="100" Duration="0:0:5"/> 
        <DoubleAnimation Storyboard.TargetName="RightRect" Storyboard.TargetProperty="Width" From="0" To="100" Duration="0:0:5" BeginTime="0:0:5"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Rectangle.Triggers> 
    <Rectangle.Fill> 
     <VisualBrush Stretch="None" AlignmentX="Left"> 
      <VisualBrush.Visual> 
       <StackPanel Orientation="Horizontal"> 
        <Rectangle x:Name="LeftRect" Height="100"> 
         <Rectangle.Style> 
          <Style TargetType="Rectangle"> 
           <Setter Property="Fill" Value="Red"/> 
           <Setter Property="Width" Value="0"/> 
          </Style> 
         </Rectangle.Style> 
        </Rectangle> 
        <Rectangle x:Name="RightRect" Height="100"> 
         <Rectangle.Style> 
          <Style TargetType="Rectangle"> 
           <Setter Property="Fill" Value="Green"/> 
           <Setter Property="Width" Value="0"/> 
          </Style> 
         </Rectangle.Style> 
        </Rectangle> 
       </StackPanel> 
      </VisualBrush.Visual> 
     </VisualBrush> 
    </Rectangle.Fill>   
</Rectangle> 

DrawingBrush 접근

이 DrawingBrush은 RectangleGeometry을하고있는 Control를 사용하지 않습니다.

<Rectangle Height="100" Width="300" Stroke="Black" StrokeThickness="2" RenderTransformOrigin="0,0.5"> 

    <Rectangle.Triggers> 
     <EventTrigger RoutedEvent="Loaded"> 
      <BeginStoryboard> 
       <Storyboard> 
        <DoubleAnimation Storyboard.TargetName="LeftScaleX" Storyboard.TargetProperty="ScaleX" From="0" To="1" Duration="0:0:1"/> 
        <DoubleAnimation Storyboard.TargetName="RightScaleX" Storyboard.TargetProperty="ScaleX" From="0" To="1" Duration="0:0:1" BeginTime="0:0:1"/> 
       </Storyboard> 
      </BeginStoryboard> 
     </EventTrigger> 
    </Rectangle.Triggers> 

    <Rectangle.Fill> 
     <DrawingBrush AlignmentX="Left" Stretch="None"> 
      <DrawingBrush.Drawing> 
       <DrawingGroup> 
        <GeometryDrawing Brush="Red">         
         <GeometryDrawing.Geometry> 
          <RectangleGeometry x:Name="LeftRect" Rect="0 0 200 100"> 
           <RectangleGeometry.Transform> 
            <TransformGroup> 
             <ScaleTransform x:Name="LeftScaleX" ScaleX="0" CenterY="50"/> 
            </TransformGroup> 
           </RectangleGeometry.Transform> 
          </RectangleGeometry> 
         </GeometryDrawing.Geometry> 
        </GeometryDrawing> 
        <GeometryDrawing Brush="Green"> 
         <GeometryDrawing.Geometry> 
          <RectangleGeometry Rect="200 0 300 100"> 
           <RectangleGeometry.Transform> 
            <TransformGroup> 
             <ScaleTransform x:Name="RightScaleX" ScaleX="0" CenterX="200"/> 
            </TransformGroup> 
           </RectangleGeometry.Transform> 
          </RectangleGeometry> 
         </GeometryDrawing.Geometry> 
        </GeometryDrawing> 
       </DrawingGroup> 
      </DrawingBrush.Drawing> 
     </DrawingBrush> 
    </Rectangle.Fill> 

</Rectangle> 

Answer 2

훨씬 간단한 방법은 ViewPort 속성에 애니메이션을 적용하는 것입니다.

<Rectangle Stroke="Black" Margin="44,67,44,0" Width="0" HorizontalAlignment="Left" VerticalAlignment="Top" Height="100"> 
     <Rectangle.Triggers> 
      <EventTrigger RoutedEvent="Loaded"> 
       <BeginStoryboard> 
        <Storyboard> 
         <DoubleAnimation Storyboard.TargetProperty="Width" To="300" Duration="0:0:1"/> 
         <RectAnimation Storyboard.TargetName="Brush1" Storyboard.TargetProperty="(DrawingBrush.Viewport)" To="0,0, 300,100" Duration="0:0:1"/> 
        </Storyboard> 
       </BeginStoryboard> 
      </EventTrigger> 
     </Rectangle.Triggers> 
     <Rectangle.Fill> 
      <DrawingBrush x:Name="Brush1" Viewport="0,0,0,100" AlignmentX="Left" Stretch="None" ViewportUnits="Absolute"> 
       <DrawingBrush.Drawing> 
        <DrawingGroup> 
         <GeometryDrawing Brush="Red"> 
          <GeometryDrawing.Geometry> 
           <RectangleGeometry Rect="0,0, 200, 100"/> 
          </GeometryDrawing.Geometry> 
         </GeometryDrawing> 
         <GeometryDrawing Brush="Green"> 
          <GeometryDrawing.Geometry> 
           <RectangleGeometry Rect="200,0, 100, 100"/> 
          </GeometryDrawing.Geometry> 
         </GeometryDrawing> 
        </DrawingGroup> 
       </DrawingBrush.Drawing> 
      </DrawingBrush> 
     </Rectangle.Fill> 
    </Rectangle>