Flutter中的动画小部件

最新推荐文章于 2022-11-23 10:48:23 发布

dfsgwe1231

最新推荐文章于 2022-11-23 10:48:23 发布

阅读量165

点赞数

文章标签：移动开发

Flutter是Google的移动应用SDK，可在创纪录的时间内在iOS和Android上制作高质量的本机界面。 Flutter的动画支持使实现各种动画类型变得容易。本文介绍如何在Flutter中为小部件制作动画。

动画类型

补间动画

在补间动画中，我们必须定义动画，时间线和曲线的起点和终点，以定义过渡的时间和速度。框架计算从起点到终点的中间值。

基于物理的动画

在基于物理的动画中，运动类似于现实世界的行为。当我们将球与地面倾斜时，它会跟随弹丸运动。所有计算，例如飞行时间和行进距离，都将根据物理定律进行计算。

准备动画课程

我们创建一个小部件，并在特定时间间隔重复更新其状态以对其进行动画处理。

要创建一个小部件，我们编写一个扩展StatefulWidget类并覆盖其createState（）方法的类。此方法返回一个State实例。

与我们的有状态窗口小部件关联的状态对象必须扩展State类，并且还必须使用一个称为SingleTickerProviderStateMixin的混合对象。我们将覆盖将要创建动画的小部件对象的构建方法。

创建补间动画

在补间动画中，我们需要提供两个不同的值：开始值和结束值。然后Flutter将自动生成一组中间值。我们将这些中间值应用于窗口小部件的任何属性以对其进行动画处理。

让我们创建一个简单的补间动画，该控件将小部件从屏幕的左边缘移动到屏幕的右边缘。为此，我们必须为小部件的left属性设置动画。所有中间值都分配给窗口小部件的左属性。

要创建和控制动画，我们需要一个Animation对象和一个AnimationController对象。

Animation<double> animation ; AnimationController controller ;

在我们类的initState方法中，我们使用AnimationController 。它期望将TickerProvider对象作为其输入之一。由于我们的类使用SingleTickerProviderStateMixi混入，我们可以通过这个给它。其他参数是duration属性，用于指定动画的持续时间。

controller = new AnimationController(vsync: this , duration: new Duration(seconds: 5));

创建一个Tween对象，指定动画的开始和结束值。

Tween tween = new Tween<double>(begin: 0.0, end: 400.0);

使用补间对象创建Animation对象。

animation = tween.animate( controller );

动画对象为股票行情中的每个报价都生成一个动画事件。为了处理事件，我们使用addListener（）方法。在事件处理程序中，调用setState（）方法来更新小部件的状态并重绘它。

animation .addListener(() { setState(() { }); });

要开始动画，我们调用动画控制器的forward（）方法。如果我们希望动画重复播放，可以调用repeat（）方法。

controller.repeat();

现在动画已准备就绪。我们可以将其应用于任何小部件。

将动画应用于小部件

现在，我们创建一个小部件并将动画值应用于其属性之一。

child: new Stack( children: <Widget>[ new Positioned( child: FlutterLogo(), height: 100.0, width: 100.0, left: animation . value , top: 100.0 ) ])

在这里，我们为小部件的left属性分配了动画值。

动画效果

在应用程序的任何屏幕中添加此小部件。外观如下：

完整的代码

import 'package:flutter/animation.dart' ; import 'package:flutter/material.dart' ;

class AnimationApp extends StatefulWidget { @override State<StatefulWidget> createState() { return new AnimationState(); } }

class AnimationApp extends StatefulWidget { @override State<StatefulWidget> createState() { return new AnimationState(); } }

class AnimationState extends State<AnimationApp> with SingleTickerProviderStateMixin { Animation<double> animation ; AnimationController controller ; class AnimationState extends State<AnimationApp> with SingleTickerProviderStateMixin { Animation<double> animation ; AnimationController controller ; Animation<double> animation ; AnimationController controller ;

@override Widget build(BuildContext context) { return new Container( color: Colors. white , child: new Stack( children: <Widget>[ new Positioned( child: FlutterLogo(), height: 100.0, width: 100.0, left: animation . value , top: 100.0 ) ]) ); }

@override Widget build(BuildContext context) { return new Container( color: Colors. white , child: new Stack( children: <Widget>[ new Positioned( child: FlutterLogo(), height: 100.0, width: 100.0, left: animation . value , top: 100.0 ) ]) ); }

@override void initState() { super .initState(); controller = new AnimationController(vsync: this , duration: new Duration(seconds: 4));

@override void initState() { super .initState(); controller = new AnimationController(vsync: this , duration: new Duration(seconds: 4));

Tween tween = new Tween<double>(begin: 0.0, end: 400.0); animation = tween.animate( controller ); animation .addListener(() { setState(() { }); }); controller .repeat(); } }

谢谢阅读。 如果您喜欢这篇文章，请随时单击该鼓掌按钮👏，以帮助其他人找到它。

本文是与移动技术相关的系列文章的一部分。 如果您正在寻找移动应用程序开发团队，请通过 info@47billion.com 与我们联系 。