Flutter - Animation

Flutter - Animation 首页 / Flutter入门教程 / Flutter - Animation

在Flutter中，动画是一个非常强大且重要的概念。当您点击按钮或从一页移动到另一页时，所有动画都是。动画可以增强用户体验，并使应用程序更具交互性。

Flutter为动画提供了出色的支持，可以将动画分为两个主要类别，如下所示：

  • Tween Animation
  • Physics-based Animation

Tween Animation

在补间(Tween)动画中，需要定义动画的起点和终点。这意味着动画从起始值开始，然后经过一系列中间值，最后达到结束值。它还提供了时间线和曲线，它们定义了转换的时间和速度。小部件框架提供了有关如何从起点和终点过渡的计算。

复制代码
ColorTween {
    begin: color.green,
    end: color.blue,
}

Physics-based Animation

这是一种动画类型，可让您使应用程序交互感觉逼真且具有交互性。它可以模拟现实世界中的动画/运动，例如您要为小部件设置动画，例如弹簧，掉落或因重力而摆动。

Flutter提供了两种类型的动画技术。这些技术是:

  1. Implicit Animation
  2. Explicit Animation

下图列出了Flutter中的动画层次，并更清楚地说明了隐式和显式动画。

Flutter 动画片

现在，无涯教程将看到如何在Flutter中创建显式动画。动画主要有以下三个支柱：

  1. Ticker
  2. Animation Class
  3. AnimationController

Ticker

股票行情指示器是一种以规则的时间间隔（即每秒约60次）发送信号的类。您可以通过手表来了解它，它会定期发出声音。在每次滴答时，滴答声提供了一种回调方法，该方法具有自启动后每秒钟第一次滴答起的持续时间。

Animation

Animation类是动画系统的核心构建块。在Flutter中，执行动画的小部件将动画对象作为参数。该Animation对象提供了从中读取动画当前值以及侦听该值更改的信息。动画类包含两个方法addListener()和addStatusListener()。当animation的值更改时，它将通知所有使用addListener()添加的侦听器。同样，当动画的状态更改时，它会通知所有使用addStatusListener()添加的侦听器。

最常见的动画类是：

  • Animation<double>  - 它将在特定持续时间内在两个十进制数字之间插值。
  • Animation<Color>     -  它在两个颜色值之间插值颜色。
  • Animation<Size>        -  它在两个大小值之间插入大小。

Animation Controller

动画控制器是允许无涯教程控制动画的类。例如，它可以控制动画的开始，停止，前进或重复。一旦创建了动画控制器，无涯教程就可以基于它开始构建其他动画，例如反向动画和弯曲动画。

复制代码
animcontroller = CAnimationController(vsync: this, duration: Duration(milliseconds: 2500));

在这里，duration选项控制动画处理的持续时间，而vsync选项用于优化动画中使用的资源。

使用AnimationController的基本步骤如下：

步骤1:首先，使用诸如duration和vsync之类的参数实例化AnimationController。

步骤2:添加addListener()或addstatusListener()等所需的侦听器。

步骤3:启动动画。

步骤4:在侦听器回调方法中执行操作(例如，setState)。

步骤5:最后，处理动画。

让无涯教程看一个简单的动画示例，该示例使用Animation Class和Animation Controller。以下示例显示了Tween Animation，该tween动画给出了动画的开始和终点。打开项目，并在main.dart文件中替换以下代码。

复制代码
import 'package:flutter/animation.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 //这个小部件是您的应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Animation',
      theme: ThemeData(
       //这是您的应用程序的主题。
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatefulWidget {
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<MyHomePage> with SingletickProviderStateMixin {
  Animation<double> animation;
  AnimationController animationController;
  @override
  void initState() {
    super.initState();
    animationController = AnimationController(vsync: this, duration: Duration(milliseconds: 2500));
    animation = Tween<double>(begin: 0.0, end: 1.0).animate(animationController);
    animation.addListener((){
      setState((){
        print (animation.value.toString());
      });
    });
    animation.addStatusListener((status){
      if(status == AnimationStatus.completed){
        animationController.reverse();
      } else if(status == AnimationStatus.dismissed) {
        animationController.forward();
        }
      });
      animationController.forward();
    }
  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedLogo(
        animation: animation,
      )
    );
  }
}
class AnimatedLogo extends AnimatedWidget {
  final Tween<double> _sizeAnimation = Tween<double> (begin: 0.0, end: 500.0);
  AnimatedLogo({Key key, Animation animation}):super(key: key, listenable: animation);
  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = listenable;
    return Transform.scale(
      scale: _sizeAnimation.evaluate(animation),
      child: FlutterLogo(),
    );
  }
}

在Android Studio中运行该应用程序时，将获得输出。在屏幕上，您将看到Flutter徽标正反方向缩放。

Flutter 动画片

Curved Animation

当您需要对动画对象应用非线性曲线时，弯曲动画非常有用。因此，它将动画的进度定义为非线性曲线。

链接：https://www.learnfk.comhttps://www.learnfk.com/flutter/flutter-animation.html

来源：LearnFk无涯教程网

复制代码
CurvedAnimation(parent: animationController, curve: Curves.bounceOut));

让无涯教程通过前面的示例来理解它。要添加曲线，请在android studio中打开以前的应用，然后添加CurvedAnimation而不是animationController。

复制代码
animation = Tween<double>(begin: 0.0, end: 1.0).animate(animationController);

下面的线。

复制代码
animation = Tween<double>(begin: 0.0, end: 1.0).animate(animationController);

现在，当您运行该应用程序时，在正向和反向缩放期间，您将看到带有Flutter徽标的弹跳效果。

Hero Animation

Hero动画是一种动画，当应用程序转到下一页时，其中一个屏幕的元素会飞到新屏幕。无涯教程可以通过下面的示例来理解它，其中动画采用了图标/图像之类的元素，一旦您点击图标，屏幕就会跳到下一页。以下示例对其进行了更清晰的说明。

打开Flutter应用程序并替换 main.dart 文件中的以下代码。

复制代码
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 //这个小部件是您的应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Application',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      home: HeroAnimation(title: 'Hero Animation'),
    );
  }
}

class HeroAnimation extends StatefulWidget {
  HeroAnimation({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _HeroAnimationState createState() => _HeroAnimationState();
}

class _HeroAnimationState extends State<HeroAnimation> {

  Widget _greenRectangle() {
    return Container(
      width: 75,
      height: 75,
      color: Colors.green,
    );
  }

  Widget _detailPageRectangle() {
    return Container(
      width: 150,
      height: 150,
      color: Colors.red,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: buildDemoWidget(context),
    );
  }

  Widget buildDemoWidget(BuildContext context) {
    return Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: 30.0,
          ),
          ListTile(
            leading: GestureDetector(
              child: Hero(
                tag: 'hero-rectangle',
                child: _greenRectangle(),
              ),
              onTap: () => _gotoDetailsPage(context),
            ),
            title: Text('Tap on the green icon rectangle to analyse hero animation transition.'),
          ),
        ],
      ),
    );
  }

  void _gotoDetailsPage(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (ctx) => Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Hero(
                tag: 'hero-rectangle',
                child: _detailPageRectangle(),
              ),
              Text('This is a place where you can see details about the icon tapped at previous page.'),
            ],
          ),
        ),
      ),
    ));
  }
}

在Android Studio中运行应用程序时，您将获得以下屏幕。

Flutter 动画片

要显示Hero动画，请点击绿色图标，它将立即飞到一个新屏幕，您将在其中获得有关所点击项目的详细信息。

Flutter 动画片

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

邱岳的产品手记 -〔邱岳〕

技术领导力实战笔记 -〔TGO鲲鹏会〕

技术管理实战36讲 -〔刘建国〕

如何做好一场技术演讲 -〔极客时间〕

深入浅出计算机组成原理 -〔徐文浩〕

Kafka核心源码解读 -〔胡夕〕

物联网开发实战 -〔郭朝斌〕

Spring Cloud 微服务项目实战 -〔姚秋辰（姚半仙）〕

云原生架构与GitOps实战 -〔王炜〕

好记忆不如烂笔头。留下您的足迹吧 :)
休闲君评测 |  TOOLFK工具网 |  chrome插件网 |  古诗文网 |  良许Linux教程网 |  Python之禅 |  红色石头 |  豪评测 |  入党申请书 | 

© 2020 Hi LearnFk 意见反馈 免责声明 关于我们 桂ICP备11002319号-3 友链&广告位+QQ: 1963612630