全新Xamarin.Forms效果视图控件的功能介绍及操作方法

一个现代的移动应用程序都有极具吸引力的动画。移动应用程序通常包括许多动画类型，如波纹、旋转和缩放，这些类型的动画使应用程序具有很强的交互性。

为了更有效地提供这些效果，Syncfusion在iOS和Android平台2019 v3测试版为Xamarin引入了一个名为effects View的新组件（此控件作为Syncfusion.Xamarin.Core NuGet包的一部分提供）。它是一个容器控件，可以接受任何类型的视图作为它的子视图，提供了诸如突出背景、波纹、选择、放大、缩小和旋转等效果。该控件的一个优点就是，这些效果在不同的组合（例如高光和波纹、波纹和选择、选择和缩放、波纹和旋转等）中也可以正常工作。

不同的效果

突出

通过将效果模式设置为高光可以实现高光效果。完成后，此效果将自动消失。

<ContentPage xmlns:effectsView="clr-namespace:Syncfusion.XForms.EffectsView;assembly=Syncfusion.Core.XForms">     <effectsView:SfEffectsView TouchDownEffects="Highlight">                      <Grid>....</Grid>  </effectsView:SfEffectsView> </ContentPage>

波纹

通过将效果模式设置为Ripple可以实现波纹效果。与高光效果一样，此效果也将在完成后自动淡出。

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><effectsView：SfEffectsView TouchDownEffects =“ Ripple”>                 </font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">    <Grid> .... </ Grid></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"></ effectsView：SfEffectsView></font></font><font></font>

旋转

旋转效果可以通过将效果模式设置为旋转来实现。Effects视图的内容将根据角度值进行旋转。

<font style="vertical-align: inherit;"><font style="vertical-align: inherit;"><effectsView：SfEffectsView TouchDownEffects =“旋转” Angle =“ 180”>                 </font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">    <Grid> .... </ Grid></font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;"></ effectsView：SfEffectsView></font></font><font></font>

缩放比例

缩放效果可以通过将效果模式设置为Scale来实现。Effects视图的内容将根据ScaleFactor的值按比例缩小或按比例放大。即，如果小于1，就会有按比例缩小；如果大于1，就会有按比例放大。

<effectsView:SfEffectsView TouchDownEffects="Scale" ScaleFactor="0.8">                 <font></font>    <Grid>....</Grid><font></font></effectsView:SfEffectsView><font></fo

选择

通过将效果模式设置为选择，可以移动到选择状态。

<effectsView:SfEffectsView TouchDownEffects="Selection">                 <font></font>    <Grid>....</Grid><font></font></effectsView:SfEffectsView><font></font>nt>

您还可以将属性IsSelected设置为true。

<effectsView:SfEffectsView IsSelected="true">                 <font></font>    <Grid>....</Grid><font></font></effectsView:SfEffectsView><font></font>

使用这两种方法都会触发SelectionChanged事件，该事件可用于应用程序级别的自定义。

规模和选择

正如前面所说，除了单独使用这些效果外，您还可以组合使用它们。

组合一：设置规模和选择的影响模式

<effectsView:SfEffectsView TouchDownEffects="Scale, Selection" ScaleFactor="0.8">                 <font></font>    <Grid>....</Grid><font></font></effectsView:SfEffectsView><font></font><font></font>

组合二：波纹和规模

另一个可能的组合是波动和规模。

<effectsView:SfEffectsView TouchDownEffects="Ripple, Scale">                 <font></font>    <Grid>....</Grid><font></font></effectsView:SfEffectsView><font></font>

组合三：波纹和旋转

您还可以使用波动和旋转组合。

<effectsView:SfEffectsView TouchDownEffects="Ripple, Rotation">                 <font></font>    <Grid>....</Grid><font></font></effectsView:SfEffectsView><font></font>

触摸交互

在前面的代码片段中，您可能已经注意到不同的效果被设置为属性TouchDownEffects。顾名思义，这些效果将在与effects视图控件的触摸交互期间呈现。如果你需要这些效果在长按或触摸互动，可以使用长按效果和触摸效果的属性。

有一个有趣地方是，您可以对不同的交互产生不同的影响。例如，您可以将高亮设置为降落，将波纹设置为长按。

<effectsView:SfEffectsView TouchDownEffects="Highlight" LongPressEffects="Ripple, Selection" >                 <font></font>    <Grid>....</Grid><font></font></effectsView:SfEffectsView><font></font>

通过API触发效果

除了触摸交互，还可以使用ApplyEffects方法触发这些效果。此方法的所有参数都是可选的，可以根据需要使用。如果未传递任何参数，则将触发纹波效果。它接受以下可选参数：

• effects – 设置效果的类型。

• rippleStartPosition – 交互期间，波动效应将始终从交互点开始。使用ApplyEffects方法时，可以从左侧、右侧、顶部或底部位置开始波动。默认为中心。

• rippleStartPoint – 设置从其开始波动的确切x、y点。

• repeat – 设置是否连续重复波动效果的值。

重复并淡出波纹

淡出的波纹是在移动应用程序中最常见的动画之一。您可以通过在ApplyEffects方法中传递repeat并将FadeOutRipple属性设置为true来实现此效果。

this.RotationEffectsView.ApplyEffects（repeat：true）;

如果需要停止纹波效果，可以使用Reset（）方法。

this.RotationEffectsView.Reset（）;

*想要获得Essential Studio for Xamarin更多资源或正版授权的朋友，可以咨询【客服】了解哦~

·1024程序员节，DevExpress、MyEclipse、Axure RP、Aspose、FastReport等产品限时放“价”，给你专属宠爱！点击下方图片查看活动详情↓↓↓

标签：