c# - UWP xaml ripple Effect(安卓效果)动画

Question

我尝试在 UWP 应用程序中编写 Android 效果(波纹)代码。因此，我在网格内(在我的用户控件中)创建了一个 EllipseGeometry，但是当我的 ellipseGeometry 的 RadiusX 和 RadiusY 播放它们的动画时，我的 EllipseGeometry 会超出我的网格...我试图用可见区域限制路径并将其剪裁到路径上，但没有成功。

这是我的 XAML 代码:

<UserControl
x:Class="UIComponents.POIButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UIComponents"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="100"
d:DesignWidth="650" Background="White">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Gray">
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>
    <!--Animation Ellipse-->
    <Grid x:Name="ellipseContainer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="3">
        <Path x:Name="path" Fill="Red" Stroke="Black" StrokeThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
            <Path.Data>
                <EllipseGeometry x:Name="circleGeometry" Center="0,0" RadiusX="5" RadiusY="5" />
            </Path.Data>
        </Path>
    </Grid>
    <Rectangle x:Name="clickableRect" Grid.Column="0" Grid.ColumnSpan="3" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"  PointerPressed="clickableRect_PointerPressed"  Fill="Transparent" Tapped="clickableRect_Tapped"/>
</Grid>
<UserControl.Resources>
    <Storyboard x:Name="RipplePath">
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="RadiusX" Storyboard.TargetName="circleGeometry">
            <EasingDoubleKeyFrame KeyTime="0" Value="5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:10" Value="200"/>
        </DoubleAnimationUsingKeyFrames>
        <DoubleAnimationUsingKeyFrames EnableDependentAnimation="True" Storyboard.TargetProperty="RadiusY" Storyboard.TargetName="circleGeometry">
            <EasingDoubleKeyFrame KeyTime="0" Value="5"/>
            <EasingDoubleKeyFrame KeyTime="0:0:10" Value="200"/>
        </DoubleAnimationUsingKeyFrames>
    </Storyboard>
</UserControl.Resources>

这是我的 Cs 代码:

private void clickableRect_Tapped(object sender, TappedRoutedEventArgs e)
    {
        Point touchPosition = e.GetPosition(ellipseContainer);
        //RectangleGeometry visibleArea = new RectangleGeometry();
        //visibleArea.Rect = new Rect(0, 0, 650, 100);
        //path.Clip = visibleArea;
        Storyboard animation = this.FindName("RipplePath") as Storyboard;
        animation.Begin();

    }

这里，结果:

非常感谢您的帮助:)

============== 尝试 Justin XL 的解决方案:结果:

感谢贾斯汀的帮助，矩形几何似乎也动画化了:

但网格上没有任何东西。

Xaml 代码是:

<UserControl
x:Class="UIComponents.POIButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UIComponents"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
d:DesignHeight="100"
d:DesignWidth="650" Background="White">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Gray">
    <Grid.Clip>
        <RectangleGeometry Rect="0,0,650,100" />
    </Grid.Clip> ...

CS 代码是:

public POIButton()
    {
        this.InitializeComponent();
        var visual = ElementCompositionPreview.GetElementVisual(this);
        visual.Clip = visual.Compositor.CreateInsetClip();
    }

================ XAML 结果:

此 XAML 代码未产生正确的效果:

<UserControl
x:Class="UIComponents.POIButton"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:UIComponents"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Height="100"
Width="650" Background="White">
<Grid HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Background="Gray">
    <Grid.Clip>
        <RectangleGeometry Rect="0,0,650,100" />
    </Grid.Clip>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="100"/>
        <ColumnDefinition Width="*"/>
        <ColumnDefinition Width="100"/>
    </Grid.ColumnDefinitions>
    <!--Animation Ellipse-->
    <Grid x:Name="ellipseContainer" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Grid.Column="0" Grid.ColumnSpan="3">
        <Path x:Name="path" Fill="Red" Stroke="Black" StrokeThickness="1" HorizontalAlignment="Center" VerticalAlignment="Center" RenderTransformOrigin="0.5,0.5">
            <Path.Data>
                <EllipseGeometry x:Name="circleGeometry" Center="0,0" RadiusX="5" RadiusY="5" />
            </Path.Data>
        </Path>
    </Grid>...

结果:

但 CS 代码工作正常(在 XAML 代码中注释 RectangleGeometry 行):

this.InitializeComponent();
        var visual = ElementCompositionPreview.GetElementVisual(this);
        visual.Clip = visual.Compositor.CreateInsetClip();

产生这个:

感谢@Justin XL 的帮助:)

Answer 1

您只需要剪裁控件使其不超出其边界即可。这可以通过使用

<Grid x:Name="Root" HorizontalAlignment="Stretch"
      VerticalAlignment="Stretch"
      Background="Gray">
    <Grid.Clip>
        <RectangleGeometry Rect="0,0,200,80" />
    </Grid.Clip>

在您的 XAML 中(200 是宽度，80 是高度)，或者

public POIButton()
{
    InitializeComponent();

    var visual = ElementCompositionPreview.GetElementVisual(this);
    visual.Clip = visual.Compositor.CreateInsetClip();
}

使用新的 Composition API 进行代码隐藏。请注意，使用 XAML 方法时，如果控件的大小发生变化，您需要通过绑定(bind)或代码隐藏手动更新宽度和高度，而使用 Composition 则不需要。

此外，我注意到您使用了在 UI 线程上运行的路径动画(例如 EnableDependentAnimation)。这可以替换为带有 ScaleTransform 动画的 Ellipse，这通常是推荐的方法，因为它的性能要好得多。

---

XamlLight 的“涟漪”效果

由于您正在为 UWP 进行开发，因此了解该平台可以做什么以及实现类似效果的 UWP 方式非常重要，但仍然尊重其自身的 Fluent Design System。

我在新的 XamlLight 的帮助下创建了如下所示的 FluentButton 控件15063 中引入的类。您会注意到灯光跟随您的鼠标光标，并在单击/点击时产生涟漪。

第二部分由自定义的 XamlLight 完成，我称之为 RippleXamlLight，这就是它的实现方式 -

首先，创建一个继承自 XamlLight 的类。

public class RippleXamlLight : XamlLight

然后，在其 OnConnected 覆盖方法中，创建一个 SpotLight 实例和一个 Vector3 动画，用于为光的 偏移量。它还将负责订阅指针事件，例如 PointerPressed。

protected override void OnConnected(UIElement newElement)
{
    _compositor = Window.Current.Compositor;

    var spotLight = CreateSpotLight();
    CompositionLight = spotLight;

    _lightRippleOffsetAnimation = CreateLightRippleOffsetAnimation();

    SubscribeToPointerEvents();

    AddTargetElement(GetId(), newElement);

    ...
    }
}

最后，只要按下控件就开始播放动画。 Offset 值由指针位置和根据控件大小计算的 _rippleOffsetZ 提供。

private void OnPointerPressed(object sender, PointerRoutedEventArgs e) =>
    StartLightRippleOffsetAnimation(e.GetCurrentPoint((UIElement)sender).Position.ToVector2());

private void StartLightRippleOffsetAnimation(Vector2 position)
{
    var startingPoisition = new Vector3(position, 0.0f);
    _lightRippleOffsetAnimation?.InsertKeyFrame(0.0f, startingPoisition);
    _lightRippleOffsetAnimation?.InsertKeyFrame(1.0f, new Vector3(position.X, position.Y, _rippleOffsetZ));

    CompositionLight?.StartAnimation("Offset", _lightRippleOffsetAnimation);
}

如果我解释得不够清楚，这里是 full source供你引用。 :)