Xamarin.Forms 第26局：动画

目录 - 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