Xamarin.Forms 第26局:动画

96
dotNET之家 Excellent
3.7 2019.03.05 07:18 字数 624

目录 - Xamarin.Forms


前言

本文介绍动画:
一、简单动画
二、自定义动画

环境

1.Visual Studio 2019
2.Xamarin.Froms 4.0.0.169046-pre5
3.Android 5.0(API 21)或更高版本
4.约定:XF代表Xamarin.Forms

内容

主要通过ViewExtensions类提供的动画扩展方法实现动画效果。其方法如下:

  • CancelAnimations 取消动画;
  • FadeTo 淡入淡出;
  • TranslateTo 平移;
  • RotateTo 旋转;
  • ScaleTo 缩放;
  • RelScaleTo 相对缩放;
  • RelRotateTo 相对旋转;
  • RotateXTo 绕X轴旋转;
  • RotateYTo 绕Y轴旋转;

一、简单动画

1.平移

实现效果
实现方式

1.TranslateTo主要参数如下:

  • x:x坐标;
  • y:y坐标;
  • length:动画持续时间,默认为250毫秒。本例为1000毫秒,即在1000毫秒内完成动画;
  • easing:缓动函数,用于控制动画的缓动效果。比如,匀速、加速、减速、先加速后减速,先减速后加速等。

2.简单列举几个Easing类提供的缓动函数:

  • Linear 匀速动画。
  • BounceIn 以弹跳动画开始。
  • BounceOut 以弹跳动画结束。
  • CubicIn 加速动画。
  • CubicInOut 开始时动画加速,结束时减速的动画。
  • CubicOut 减速动画。

2.旋转

实现效果
实现方式

RotateTo主要参数如下:

  • rotation:旋转角度;
  • length:动画持续时间;
  • easing:缓动函数。

3.缩放

实现效果
实现方式

ScaleTo主要参数如下:

  • scale:缩放值;
  • length:动画持续时间;
  • easing:缓动函数。

4.淡入淡出

实现效果
实现方式

FadeTo主要参数如下:

  • opacity:透明度;
  • length:动画持续时间;
  • easing:缓动函数。

5.复合动画

复合动画就是将多个动画同时运行。本例是依次点击平移、旋转、缩放、淡入淡出按钮实现的复合动画,若用代码实现,依次调用这些动画方法即可。

5.取消动画

调用此方法可以立即取消控件上运行的所有动画。

6.重置位置

如果不希望用动画,可以直接设置控件上的相关属性。

二、自定义动画

实现效果

简单实现红绿灯动画效果。

实现方式

后语

下篇介绍弹出窗口,待续...


目录 - Xamarin.Forms

学海无涯 - Xamarin.Forms
Web note ad 1