使用正弦波动画圆的填充

Question

我正在尝试使用正弦波制作圆形动画。这是我制作的示例图片：

所以黑色是圆圈，你可以看到它以正弦波的方式被切断。 当正弦波在水平方向“行进”并通过圆圈全高的 Y 值决定波应该放置在哪里时，你能做到这一点吗？ （让它看起来像圆圈中有水在顶部产生波浪并能够确定圆圈中有多少“水”）

有没有办法做到这一点？也许有一些地方可以阅读这些类型的动画？

需要注意的一点是，灰色背景代表透明度，因此圆圈的“被切断”部分应该是透明的。

Answer 1

执行此类操作的主要功能是OpacityMask。下面的示例使用 VisualBrush 设置为 Tile 作为蒙版，并使用画笔的 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