【Flutter】动画介绍&隐式动画

于 2024-05-28 14:00:00 发布
阅读量1.2k 收藏 12
点赞数 26
分类专栏： Flutter学习 文章标签： flutter android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62511863/article/details/139220881
版权

🔥 本文由 程序喵正在路上 原创，CSDN首发！
💖 系列专栏：Flutter学习
🌠 首发时间：2024年5月28日
🦋 欢迎关注🖱点赞👍收藏🌟留言🐾

目录

动画基本原理

在任何系统的UI框架中，动画实现的原理都是相同的，即：在一段时间内，快速地多次改变UI外观；由于人眼会产生视觉暂留，所以最终看到的就是一个“连续”的动画，这和电影的原理是一样的。

我们将UI的一次改变称为一个动画帧，对应一次屏幕刷新，而决定动画流畅度的一个重要指标就是帧率FPS（Frame Per Second），即每秒的动画帧数。很明显，帧率越高则动画就会越流畅！一般情况下，对于人眼来说，动画帧率超过16 FPS，就基本能看了，超过 32 FPS就会感觉相对平滑，而超过 32FPS，大多数人基本上就感受不到差别了。

由于动画的每一帧都是要改变UI输出，所以在一个时间段内连续的改变UI输出是比较耗资源的，对设备的软硬件系统要求都较高，所以在UI系统中，动画的平均帧率是重要的性能指标，而在Flutter中，理想情况下是可以实现 60FPS 的，这和原生应用能达到的帧率是基本是持平的。

Flutter动画简介

FLutter 中的动画主要分为：隐式动画、显式动画、自定义隐式动画、自定义显式动画和 Hero 动画。

隐式动画

通过几行代码就可以实现隐式动画，由于隐式动画背后的实现原理和繁琐的操作细节都被隐去了，所以叫隐式动画，FLutter 中提供的 AnimatedContainer、AnimatedPadding、AnimatedPositioned、
AnimatedOpacity、AnimatedDefaultTextStyle、AnimatedSwitcher 都属于隐式动画。

隐式动画中可以通过 duration 来配置动画时长，通过 curve （曲线）来配置动画过程，这两个属性在上述组件中都是存在的。

curve

在 Flutter 中，Curves 类提供了一系列预定义的曲线，用于控制动画的速度变化。以下是一些常用的 Curves 组件的值及简单解释：

  1. Curves.linear：

    • 线性曲线，动画以恒定的速度进行，没有加速或减速。

  2. Curves.decelerate：

    • 减速曲线，动画开始时速度较快，然后逐渐减速。

  3. Curves.ease：

    • 标准的加速减速曲线，动画开始和结束时速度较慢，中间时速度较快。

  4. Curves.easeIn：

    • 加速曲线，动画开始时速度较慢，然后逐渐加速。

  5. Curves.easeOut：

    • 减速曲线，动画开始时速度较快，然后逐渐减速。

  6. Curves.easeInOut：

    • 加速减速曲线，动画开始和结束时速度较慢，中间时速度较快，类似于Curves.ease。

  7. Curves.fastOutSlowIn：

    • 快出慢入曲线，动画开始时速度较快，然后逐渐减速到结束。

  8. Curves.bounceIn：

    • 弹簧效果曲线，动画开始时速度为0，然后加速进入动画，到达最大速度后反弹一次。

  9. Curves.elasticIn：

    • 弹性效果曲线，动画开始时速度为0，然后加速进入动画，到达最大速度后会有一些超过目标值的回弹效果。

这些是常用的一些Curves组件的值，通过选择合适的曲线，可以控制动画的速度变化，从而实现不同的动画效果。

AnimatedContainer

AnimatedContainer 的属性和 Container 属性基本是一样的，不同的地方是，当 AnimatedContainer 属性改变的时候会触发动画。

下面的程序中，我们通过浮动按钮来改变 AnimatedContainer 中 transform 的值，以触发动画。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedContainer'),
      ),
      body: Center(
        child: AnimatedContainer(
          duration: const Duration(seconds: 1, milliseconds: 100),
          width: 200,
          height: 200,
          transform: flag
              ? Matrix4.translationValues(0, 0, 0)
              : Matrix4.translationValues(-100, 0, 0),
          color: Colors.blue,
        ),
      ),
    );
  }
}

AnimatedPadding

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedPadding'),
      ),
      body: AnimatedPadding(
        curve: Curves.linear,
        padding: EdgeInsets.fromLTRB(10, flag ? 10 : 200, 0, 0),
        duration: const Duration(seconds: 2),
        child: Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
      ),
    );
  }
}

AnimatedPositioned

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedPositioned'),
      ),
      body: Stack(
        children: [
          ListView(
            children: const [
              ListTile(
                title: Text("我是一个列表"),
              ),
              ListTile(
                title: Text("我是一个列表"),
              ),
              ListTile(
                title: Text("我是一个列表"),
              ),
              ListTile(
                title: Text("我是一个列表"),
              ),
              ListTile(
                title: Text("我是一个列表"),
              ),
              ListTile(
                title: Text("我是一个列表"),
              ),
            ],
          ),
          AnimatedPositioned(
              curve: Curves.linear,
              right: flag ? 10 : 300,
              top: flag ? 10 : 560,
              duration: const Duration(seconds: 1, milliseconds: 500),
              child: Container(
                width: 60,
                height: 60,
                color: Colors.blue,
              )),
        ],
      ),
    );
  }
}

AnimatedOpacity

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedOpacity'),
      ),
      body: Center(
        child: AnimatedOpacity(
          opacity: flag ? 0.2 : 1,
          duration: const Duration(seconds: 1),
          curve: Curves.easeIn,
          child: Container(
            width: 200,
            height: 200,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}

AnimatedDefaultTextStyle

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedDefaultTextStyle'),
      ),
      body: Center(
        child: Container(
          alignment: Alignment.center,
          width: 300,
          height: 300,
          color: Colors.blue,
          child: AnimatedDefaultTextStyle(
            duration: const Duration(seconds: 1),
            style: TextStyle(fontSize: flag ? 20 : 50, color: Colors.white),
            child: const Text("你好Flutter"),
          ),
        ),
      ),
    );
  }
}

AnimatedSwitcher

Flutter 中的 AnimatedSwitcher 是一个用于在切换子元素时执行动画效果的预置组件。它允许你在切换子元素时使用自定义的过渡效果，从而实现平滑的切换体验。

AnimatedSwitcher 通常用于在切换应用程序界面的不同部分或内容时提供动画效果。例如，当用户点击按钮切换页面或者切换视图时，可以使用 AnimatedSwitcher 来实现页面间的过渡动画。

在使用 AnimatedSwitcher 时，你需要提供新旧子元素，并指定一个过渡效果。当新的子元素被提供时，AnimatedSwitcher 将会在旧的子元素和新的子元素之间执行过渡动画。

要使用 AnimatedSwitcher，通常需要指定以下几个关键属性：

  • child：当前的子元素，即将要显示的子元素。
  • duration：动画的持续时间，用于控制过渡动画的速度。
  • transitionBuilder：一个回调函数，用于定义子元素切换时的过渡效果。该回调函数接受当前子元素和动画对象，并返回一个 Widget，用于实现过渡效果。

通过这些属性，你可以轻松地在 Flutter 应用程序中添加动画效果，从而提升用户体验并增加应用的交互性。AnimatedSwitcher 是 Flutter 框架中 Material 组件库的一部分，因此可以与其他 Material 风格的组件无缝集成。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedSwitcher'),
      ),
      body: Center(
        child: Container(
            alignment: Alignment.center,
            width: 300,
            height: 220,
            color: Colors.orange,
            child: AnimatedSwitcher(
                //当子元素改变的时候会触发动画
                duration: const Duration(seconds: 1),
                child: flag
                    ? const CircularProgressIndicator()
                    : Image.network(
                        "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/5.jpg",
                        fit: BoxFit.cover,
                      ))),
      ),
    );
  }
}

Flutter 中的 CircularProgressIndicator 是一个用于显示循环进度的预置组件。它通常用于在应用程序加载数据、执行长时间任务或执行任何需要显示进度的操作时显示一个圆形的进度条。

CircularProgressIndicator 可以以不同的方式进行定制，包括更改颜色、大小和动画。它是 Flutter 框架中 Material 组件库的一部分，因此在使用 MaterialApp 或 Scaffold 等 Material 风格的组件时很常见。

你可以通过简单的代码来创建一个 CircularProgressIndicator，然后将其放置在应用程序的合适位置。在加载数据或执行任务时，CircularProgressIndicator 将显示一个圆形进度条，直到任务完成为止。

修改 AnimatedSwitcher 的动画效果

通过 AnimatedSwitcher 中的 transitionBuilder 参数可以修改其动画效果。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedSwitcher'),
      ),
      body: Center(
        child: Container(
            alignment: Alignment.center,
            width: 300,
            height: 220,
            color: Colors.orange,
            child: AnimatedSwitcher(
                transitionBuilder: ((child, animation) {
                  //可以改变动画效果
                  return ScaleTransition(
                    scale: animation,
                    child: FadeTransition(
                      opacity: animation,
                      child: child,
                    ),
                  );
                }),
                duration: const Duration(seconds: 1),
                //当子元素改变的时候会触发动画
                child: flag
                    ? const CircularProgressIndicator()
                    : Image.network(
                        "https://xixi-web-tlias.oss-cn-guangzhou.aliyuncs.com/5.jpg",
                        fit: BoxFit.cover,
                      ))),
      ),
    );
  }
}

在上面的代码中，transitionBuilder 参数是用于定义 AnimatedSwitcher 在切换子元素时所使用的过渡效果的回调函数。这个回调函数接受两个参数：

  1. child：当前子元素（即将要切换的元素）。
  2. animation：表示当前切换的动画。在这里，animation 是一个 Animation<double> 类型的对象，它描述了从0到1的动画值。

transitionBuilder 回调函数应该返回一个 Widget，这个 Widget 将作为子元素在切换时的动画效果。在上面的代码中，回调函数使用了两种过渡效果：

  1. ScaleTransition：它通过对子元素进行缩放来实现动画效果，缩放的比例由动画值 animation 控制，从而实现子元素的逐渐放大或缩小的效果。
  2. FadeTransition：它通过改变子元素的不透明度来实现淡入淡出的效果，不透明度的变化由动画值 animation 控制，从而实现子元素的逐渐显现或消失的效果。

通过结合使用 ScaleTransition 和 FadeTransition，可以实现更加丰富的过渡效果，使切换子元素时更加平滑和动态。

子组件相同的AnimatedSwitcher

我们知道，AnimatedSwitcher 只有在其子元素发生改变时才会触发动画，那么当子元素不变时，比如子元素为一个 Text 组件，我们只修改里面的内容，不改变组件类型，在这种情况下又该如何触发动画呢？

很简单，我们只要设置一下子元素的 key 值为 UniqueKey()，就可以让 AnimatedSwitcher 认为子元素已经改变。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.refresh),
        onPressed: () {
          setState(() {
            flag = !flag;
          });
        },
      ),
      appBar: AppBar(
        title: const Text('AnimatedSwitcher'),
      ),
      body: Center(
          child: Container(
        alignment: Alignment.center,
        width: 300,
        height: 220,
        color: Colors.blue,
        child: AnimatedSwitcher(
            transitionBuilder: ((child, animation) {
              //可以改变动画效果
              return ScaleTransition(
                scale: animation,
                child: FadeTransition(
                  opacity: animation,
                  child: child,
                ),
              );
            }),
            duration: const Duration(seconds: 1),
            //当子元素改变的时候会触发动画
            child: Text(
              key: UniqueKey(),
              flag ? "凡所过往" : "皆为序章",
              style: Theme.of(context).textTheme.headlineLarge,
            )),
      )),
    );
  }
}
程序喵正在路上
关注
专栏目录
flutter 隐式动画
智玲君
02-13 481
前言 隐式动画简单来说就是用 setState 就能呼唤出来的动画。对于实现了隐式动画的组件，只要Widget被更新，那么一个过渡动画就会自动产生并且播放。 Flutter已经内置了很多已经实现了隐式动画的组件，这些组件大多数以Anminated..开头，例如：AnimatedSwitcher，AnimatedContainer，AnimatedAlign，AnimatedPositioned，AnimatedOpacity，AnimatedPadding等，当我们在使用setState改变这些组件的参数的
Flutter 动画（显式动画、隐式动画、Hero动画、页面转场动画、交错动画）
最新发布
Lan_Se_Tian_Ma的博客
02-16 1841
当前案例 Flutter SDK版本：3.13.2。
flutter 中的动画详解 全网最全 动画一篇搞定 一万四千字
半身风雪
08-16 3298
学习 Flutter 中的动画和过渡是构建流畅用户界面的关键部分之一。这里我整理了一个主要的学习路径，可以帮助你逐步掌握 Flutter 中的动画和过渡技术，希望能够帮助到你自定义动画（Custom Animations）是指通过自定义代码来实现特定的动画效果，以满足特定的设计需求。在 Flutter 中，你可以使用来绘制自定义的图形，或使用封装动画逻辑，从而创建高度自定义的动画效果。使用可以绘制自定义的图形和动画。你需要实现类并重写paint方法，在其中定义绘制逻辑。@override。
flutter 点击旋转动画_让动画实现更简单，Flutter 动画简易教程！
weixin_39630048的博客
02-06 1017
Flutter中的动画功能强大且易于使用。接下来通过一个具体的实例，您将学到关于 Flutter 动画的一切。难度：中级今天，我们无法想象移动应用程序里面没有任何动画，当您从一页跳转到另一页时，或者点击一个按钮(如 InkWell)... 都会有一个动画。动画无处不在。Flutter 使动画非常易于实现。简而言之，这篇文章就是讨论这个话题的，尽管之前只有专家才能谈论，为了让这篇文章显得更有吸引力，...
Flutter 动画
moyuxueyi的专栏
01-14 148
Animation Animation是一个抽象类，本身和UI渲染无关，只负责保存动画的插值和状态，widget可以在build函数中读取Animation对象的当前值。Animation对象是一个在一段时间内依次生成一个区间（Tween）之间值的类。Animation对象的输出可以是线性、曲线、一个步进函数或任何其他可以设计的映射，这由Curve决定。 Curve Curve定义常用动画曲线的数组，描述动画过程（动画效果可点击跳转链接），可以通过CurveAnimation指定动画的曲线。以..
极简实现酷炫动效：Flutter隐式动画指南第一篇之隐式动画的简介
我叫柱子哥
03-05 1247
Flutter提供了许多实现动画的API,利用这些API,我们可以制作各种酷炫的动画效果，这篇文章就是讲Flutter中动画的使用。
flutter动画
qq_30005223的博客
04-22 2479
Animation：Flutter动画中的核心类，此类是抽象类，通常情况下使用其子类：AnimationController，可以获取当前动画的状态和值，也可以添加其状态变化监听和值变化监听。 Curve：决定动画执行的曲线，和Android中的Interpolator（差值器）是一样的，负责控制动画变化的速率，系统已经封装了10多种动画曲线，详见Curves类。差值器 AnimationController：动画控制器，控制动画的开始、停止。继承自Animation。 Tween：映射生成不同范围的值，.
史上最全的Flutter 隐式动画源代码
07-15
在本文中，我们将深入探讨 Flutter 的隐式动画，这是一个强大的工具，可以为用户界面增添流畅性和生动性。根据提供的文件名，我们可以看到一系列的演示示例，这些示例涵盖了 Flutter 中各种类型的隐式动画。我们将...
Flutter实现轮播图动画的隐式动画控件步骤
在Flutter中实现轮播图效果通常涉及对动画组件的巧妙运用，特别是隐式动画和显式动画。本文将重点讲解如何使用隐式动画控件，如AnimatedOpacity，来创建一个具有FadeIn/FadeOut效果的轮播图。 首先，了解Flutter的...
Flutter Animation 动画
10-11
https://blog.csdn.net/ruoshui_t/article/details/93393583
使用Flutter隐式动画实现轮播图效果
"这篇教程将介绍如何在Flutter中实现轮播图效果，主要涉及Flutter的动画组件，包括隐式和显式动画控件，并通过一个具体的示例——使用隐式动画控件 AnimatedOpacity 实现轮播图的FadeIn/FadeOut效果。" 在Flutter...
Flutter-动画
Chuck Chan的专栏
06-03 507
参考：https://flutter.io/docs/development/ui/animations 一、动画类型 动画分为两类：基于tween或基于物理的。 1）补间(Tween)动画 “介于两者之间”的简称。在补间动画中，定义了开始点和结束点、时间线以及定义转换时间和速度的曲线。然后由框架计算如何从开始点过渡到结束点。 2）基于物理的动画 在基于物理的动画中，运动被模拟为与真实...
Flutter 动画详解（一）
weixin_34162228的博客
10-08 355
本文主要介绍了动画的原理相关概念，对其他平台的动画做了一个简要的梳理，并简要的介绍了Flutter动画的一些知识。 1. 动画介绍 动画对于App来说，非常的重要。很多App，正是因为有了动画，所以才会觉得炫酷。移动端的动画库有非常的多，例如iOS上的Pop、web端的animate.css、Android端的AndroidViewAnimations、跨平台的Lottie等。正是因为有了这些...
Flutter 动画使用
wc0000000的博客
07-30 570
&#13; 旋转动画  透明度变换动画  在Android中，可以通过View.animate()对视图进行动画处理，那在Flutter中怎样才能对Widget进行处理 在Flutter中，可以通过动画库给widget添加动画。 在Android中，您可以通过XML创建动画或在视图上调用.animate()。在Flutter中，您可以将widget包装到Animation中。...
Flutter中的动画
梁婉玲krysliang的博客
08-12 1956
今天来学习一下Flutter中的动画。我们在js+css中，已经习惯用css3中的animation，transform，transition这三个加在一起去做。 我们像前端那样，先从静态的变换中谈论。 一、变换组件 在css中如果要先让一个元素发生平移，使用的是transform：translate，那么在flutter中，已经封装起组件进行使用，只用填入平移的位置就可以。 1、平移 ​ Transform.translate( offset: Offset(...
Flutter动画(全)
Stay hungry, stay foolish!!
09-05 8467
Flutter动画 1.Flutter Api自带的动画部件。 2.自定义动画。 3.结合自定义手势和自定义绘制来搞出各种炫酷的需求。 一 Flutter Api提供了用户足够操作的动画部件。我们可以通过这些部件来达到几乎所有的动画效果。常见的动画部件有一下: (1)AnimatedContainer (2)AnimatedCrossFade (3)Hero (4)AnimatedBui...
Flutter 动画篇
hongxue8888的博客
07-10 3024
文章目录1 概述2 Animation3 AnimationController4 Curve5 Tween 1 概述 Flutter中的动画分为补间(Tween)动画和基于物理(Physics-based)的动画。 在补间动画中，定义了开始点和结束点、时间线以及定义转换时间和速度的曲线，然后由框架自动计算如何从开始点过渡到结束点。 在基于物理的动画(遵循物理学定律)中，运动被模拟为与真实世界...
Flutter Animation动画
大灰狼的小绵羊哥哥的博客
11-30 2222
一，概述　　　 　　Flutter动画库的核心类是Animation对象，它生成指导动画的值，Animation对象指导动画的当前状态(例如，是开始、停止还是向前或者向后移动)，但它不知道屏幕上显示的内容。动画类型分为两类： 补简动画(Tween)，定义了开始点和结束点、时间线以及定义转换时间和速度的曲线。然后由框架计算如何从开始点过渡到结束点。Tween是一个无状态(stateless)对象，需要begin和end值。Tween的唯一职责就是定义从输入范围到输出范围的映射。输入范围通常为0.0到1.0
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序喵正在路上

你的鼓励是我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值