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

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

翻译|使用教程|编辑：陈津勇|2019-10-15 16:53:31.227|阅读 1233 次

概述：本文主要介绍了Essential Studio for Xamarin 2019 v3中新的Xamarin.Forms Effects视图组件及其在各种情况下的使用方法。

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

Xamarin.Forms中可用于实现iOS和Android这类效果的选项很少。在安卓系统中，你可以使用RippleDrawable来增加涟漪效应，但在Xamarin.iOS系统中却没有。此外，作为单独的特性使用时，这种效果更好。当您需要同时包含多个动画（比如ripple和rotation）时，您需要在共享和特定于平台的项目中进行大量调整。

点击下载Essential Studio for Xamarin正式版

为了更有效地提供这些效果，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等产品限时放“价”，给你专属宠爱！点击下方图片查看活动详情↓↓↓

标签：

本站文章除注明转载外，均为本站原创或翻译。欢迎任何形式的转载，但请务必注明出处、不得修改原文相关链接，如果存在内容上的异议请邮件反馈至chenjj@capbkgr.cn

文章转载自：

上一篇：FastReport.Net设计器中的“复活节彩蛋”来啦，让创建报表变得更加有趣下一篇：如何制作重复band，以实现在报告中多次显示相同的信息

彩票走势图

在线采购

中文文档库

试用/Demo下载

开发社群