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

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

概述:本文主要介绍了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程序员节DevExpressMyEclipseAxure RPAsposeFastReport等产品限时放“价”,给你专属宠爱!点击下方图片查看活动详情↓↓↓

QQ截图20191008171313.png



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:Syncfusion https://www.syncfusion.com/blogs/post/introducing-the-effects-view-control-for-xamarin-forms.aspx

登录 慧都网发表评论


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
Essential Studio for Xamarin

全面的Xamarin.iOS、Xamarin.Android和Xamarin.Forms组件套包,包含最快的图表和网格。

在线
客服
在线
QQ
电话
咨询
400-700-1020
购物车 反馈 返回
顶部
在线客服系统
live chat