사인파를 사용하여 원의 채우기 애니메이션하기

Question

저는 원을 사인파를 사용하여 채우기 애니메이션으로 만들려고합니다. 여기에 내가 만든 예제 이미지는 다음과 같습니다

그래서 검은 색이 원하고, 당신이이 정현파와 같은 방법으로 잘라있어 볼 수 있습니다. 사인파가 수평 방향으로 "주행 중"이고 서클이 전체 높이의 Y 값에 의해 배치되어야하는 위치를 결정할 수 있습니까? (물결 모양이 원 안에 있고 물결이 원에 얼마나 있는지 결정할 수 있도록)

방법이 있습니까? 어쩌면 이런 종류의 애니메이션을 읽을 곳이 있을까요?

회색 배경은 투명도를 나타내므로 원의 "잘린"부분이 투명해야합니다.

Answer 1

이와 같은 작업을 수행하는 주요 기능은 OpacityMask입니다. 아래의 예제는 마스크를 위해 Tile로 설정된 VisualBrush를 사용하고 브러시의 transform 속성을 사용하여 설명 된 동작을 수행합니다.

<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="WpfApplication1.MainWindow" 
     Title="MainWindow" Height="447" Width="569"> 
    <Window.Resources> 
     <Storyboard x:Key="Wave"> 
      <DoubleAnimation Storyboard.TargetProperty="(UIElement.OpacityMask).(Brush.RelativeTransform).(TransformGroup.Children)[3].(TranslateTransform.X)" Storyboard.TargetName="ellipse" RepeatBehavior="Forever" From="0" To="1" Duration="0:0:1" /> 
     </Storyboard> 
    </Window.Resources> 
    <Window.Triggers> 
     <EventTrigger RoutedEvent="FrameworkElement.Loaded"> 
      <BeginStoryboard Storyboard="{StaticResource Wave}"/> 
     </EventTrigger> 
    </Window.Triggers> 
    <Canvas> 
     <Ellipse x:Name="ellipse" Fill="#FF82C6FF" Height="160" Canvas.Left="320" Canvas.Top="80" Width="160"> 
      <Ellipse.OpacityMask> 
       <VisualBrush Visual="{Binding ElementName=wave}" TileMode="Tile" Viewport="0,-1,1,3" Stretch="None" > 
        <VisualBrush.RelativeTransform> 
         <TransformGroup> 
          <ScaleTransform /> 
          <SkewTransform/> 
          <RotateTransform/> 
          <TranslateTransform Y="{Binding Value,ElementName=y}" /> 
         </TransformGroup> 
        </VisualBrush.RelativeTransform> 
       </VisualBrush> 
      </Ellipse.OpacityMask> 

      </Ellipse> 
     <Grid x:Name="wave" Height="377" Canvas.Left="80" Canvas.Top="23" Width="160" Background="#00000000"> 
      <Grid.RowDefinitions> 
       <RowDefinition Height="1*"/> 
       <RowDefinition Height="{Binding Value,ElementName=amplitude}"/> 
       <RowDefinition Height="1*"/> 
      </Grid.RowDefinitions> 
      <Path Fill="#FF82C6FF" Data="M12.5,1.6925709 C31.25,1.6925709 31.25,18.615654 50,18.615654 68.75,18.615654 68.75,1.6925709 87.5,1.6925709 87.499909,27.077196 87.5,27.077107 87.5,27.077107 63.28125,27.077136 12.5,27.077196 12.5,27.077196 12.5,27.077196 12.500094,27.077196 12.5,1.6925709 z" Stretch="Fill" Grid.Row="1"/> 
      <Rectangle Fill="#FF82C6FF" Grid.Row="2" Margin="0,-1,0,0" /> 
     </Grid> 
     <Slider x:Name="y" Width="200" Minimum="-0.6" Maximum="1" Value="0"/> 
     <Slider x:Name="amplitude" Width="200" Minimum="1" Maximum="100" Value="20" Canvas.Top="23"/> 
    </Canvas> 
</Window> 

마스크를 숨기려면 위의 바인딩 대신 VisualBrush에 직접 배치 할 수 있습니다. 다른 유형의 브러시와 해당 변형 및 뷰포트/뷰 박스를 살펴볼 수도 있습니다.

업데이트 : 마스크가 두 조각으로되어있어 웨이브 진폭을 별도로 조정할 수 있습니다. ScaleTransform.ScaleX을 조정하여 빈도를 변경할 수도 있지만 전체 웨이브 또는 애니메이션이 더 이상 들리지 않도록 시도해야합니다 (예 : 시도) 0.5,0.25,0.1