c# –UWP xaml涟漪效果(android效果)动画

概述我尝试在UWP应用程序中编写Android效果(涟漪).所以我在网格中创建了一个EllipseGeometry(在我的usercontrol中)但是当我的ellipseGeometry的RadiusX和RadiusY播放他们的动画时,我的EllipseGeometry从我的网格中增长…我试图用可见区域限制路径并将其剪辑到路径,但没有成功.这是我

我尝试在UWP应用程序中编写Android效果(涟漪).所以我在网格中创建了一个EllipseGeometry(在我的usercontrol中)但是当我的ellipseGeometry的RadiusX和RadiusY播放他们的动画时,我的EllipseGeometry从我的网格中增长…@H_502_1@我试图用可见区域限制路径并将其剪辑到路径,但没有成功.

这是我的XAML代码：

<UserControlx: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 touch@R_502_4612@ = e.Get@R_502_4612@(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的解决方案：结果：

感谢Justin的帮助,看起来矩形几何学也是如此：

但没有任何东西在网格上.

Xaml代码是：

<UserControlx: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 = ElementCom@R_502_4612@PrevIEw.GetElementVisual(this);        visual.Clip = visual.Compositor.CreateInsetClip();    }

================ XAML结果：

此XAML代码不会产生正确的效果：

<UserControlx: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 Code工作正常(在XAML代码中注释行RectangleGeometry)：

this.InitializeComponent();        var visual = ElementCom@R_502_4612@PrevIEw.GetElementVisual(this);        visual.Clip = visual.Compositor.CreateInsetClip();

产生这个：

谢谢@Justin XL的帮助:)

解决方法:

您只需要将控件剪切到其边界之外.这可以通过使用来实现

<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 = ElementCom@R_502_4612@PrevIEw.GetElementVisual(this);    visual.Clip = visual.Compositor.CreateInsetClip();}

在使用新的Com@R_502_4612@ API进行代码隐藏.请注意,使用XAML方法,如果控件的大小发生更改,则需要通过绑定或代码隐藏手动更新宽度和高度,而不是使用Com@R_502_4612@.

另外,我注意到你使用了在UI线程上运行的路径动画(例如EnableDependentAnimation).这可以用带有Scaletransform动画的Ellipse代替,这通常是推荐的方法,因为它具有更好的性能.

Xamllight带来“波纹”效应

由于您正在为UWP开发,因此重要的是要认识到平台可以做什么,以及UWP实现类似效果的方式,同时仍然尊重自己的Fluent设计系统.

我在15063中引入了一个新的XamlLight类,创建了下面的Fluentbutton控件,如下所示.你会注意到灯光跟随你的鼠标光标,点击/点击时会发出涟漪声.

第二部分由定制的Xamllight完成,我称之为RippleXamllight,这就是它的实现方式 –

首先,创建一个继承自Xamllight的类.

public class RippleXamllight : Xamllight

然后,在其OnConnected覆盖方法中,创建一个Spotlight实例和一个Vector3动画,该动画将用于为灯光的偏移设置动画.它还将负责订阅诸如Pointerpressed之类的指针事件.

protected overrIDe voID OnConnected(UIElement newElement){    _compositor = Window.Current.Compositor;    var spotlight = CreateSpotlight();    Com@R_502_4612@light = spotlight;    _lightRippleOffsetAnimation = CreatelightRippleOffsetAnimation();    SubscribetoPointerEvents();    AddTargetElement(GetID(), newElement);    ...    }}

最后,每当按下控件时启动动画. Offset值由指针位置和_rippleOffsetZ提供,_rippleOffsetZ是根据控件的大小计算的.

private voID OnPointerpressed(object sender, PointerRoutedEventArgs e) =>    StartlightRippleOffsetAnimation(e.GetCurrentPoint((UIElement)sender).@R_502_4612@.ToVector2());private voID StartlightRippleOffsetAnimation(Vector2 @R_502_4612@){    var startingPoisition = new Vector3(@R_502_4612@, 0.0f);    _lightRippleOffsetAnimation?.InsertKeyFrame(0.0f, startingPoisition);    _lightRippleOffsetAnimation?.InsertKeyFrame(1.0f, new Vector3(@R_502_4612@.X, @R_502_4612@.Y, _rippleOffsetZ));    Com@R_502_4612@light?.StartAnimation("Offset", _lightRippleOffsetAnimation);}

如果我没有清楚地解释清楚,这里是full source供您参考. 总结

以上是内存溢出为你收集整理的c# – UWP xaml涟漪效果(android效果)动画全部内容，希望文章能够帮你解决c# – UWP xaml涟漪效果(android效果)动画所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。