使用正弦波动画圆的填充 [英] Animate circle's fill using sine-wave

问题描述

我正尝试使用正弦波使它的圆充满生气。这是我制作的示例图像：

I'm trying to make a circle animate it's fill using a sinewave. Here's an example image I made:

所以黑色是圆圈，正如您所看到的，它以正弦波状的方式被切除。
当正弦波沿水平方向行进并通过圆的全圆的Y值确定应将波放置在何处时，您可以这样做吗？ （要使它看起来像圆圈中的水在顶部形成波浪，并能够确定圆圈中有多少水）

So the black is the circle, and as you can see it's cut off in a sine-wave-like way. Can you do this while the sine-wave is "traveling" in a horizontal direction and deciding where the wave should be placed by an Y value of the circles full height? (to make it look like there's water in the circle creating waves on top and being able to decide how much "water" is in the circle)

有没有办法做这个？也许有一些地方可以阅读这些动画？

Are there a way to do this? Maybe there's some place to read up on these kinds of animations at?

需要注意的一点是，灰色背景代表透明度，因此圆圈的切除部分

One thing to note is that the grey background represents transparency so the "cut off" part of the circle should be transparent.

推荐答案

做这样的事情的主要功能是 OpacityMask 。下面的示例使用一个设置为Tile的VisualBrush蒙版，并使用画笔的transform属性执行您描述的动作。

The main feature to do something like this is an OpacityMask. The example below uses a VisualBrush set to Tile for the mask and uses the transform property of the brush to do the motion you described.

<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中，而不是像上面那样绑定。您可能还需要查看其他类型的笔刷及其变形和视口/视盒。

To hide the mask you could place it directly inside VisualBrush instead of a binding like above. You may also want to look at other types of brushes and their transforms and viewport/viewbox.

更新：蒙版现在分为两部分因此波幅可以单独调整。您还可以调整 ScaleTransform.ScaleX 来更改频率，但是您需要确保获得整个波形或动画断续，例如，尝试 0.5 ，0.25,0.1

Update: The mask is now in two pieces so the wave amplitude can be adjusted separately. You can also adjust ScaleTransform.ScaleX to alter the frequency but you would need to make sure you get the whole wave or the animation stutters, e.g try 0.5,0.25,0.1

这篇关于使用正弦波动画圆的填充的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！