flutter 动画_从零开始的 Flutter 动画

最新推荐文章于 2023-06-09 11:54:47 发布
最新推荐文章于 2023-06-09 11:54:47 发布
阅读量150 收藏
点赞数
文章标签： flutter 动画

d8714a9f3f96a655f8a8604e2dae854e.png

前言

动画本质是在一段时间内不断改变屏幕上显示的内容，从而产生视觉暂留现象。

动画一般可分为两类：

「补间动画」：补间动画是一种预先定义物体运动的起点和终点，物体的运动方式，运动时间，时间曲线，然后从起点过渡到终点的动画。

「基于物理的动画」：基于物理的动画是一种模拟现实世界运动的动画，通过建立运动模型来实现。例如一个篮球 从高处落下，需要根据其下落高度，重力加速度，地面反弹力等影响因素来建立运动模型。

Flutter 中的动画

Flutter 中有多种类型的动画，先从一个简单的例子开始，使用一个 AnimatedContainer 控件，然后设置动画时长 duration，最后调用 setState 方法改变需要变化的属性值，一个动画就创建了。

1fc4f0ec2e3060caceab75784f5c32c7.png

代码如下

import 'package:flutter/material.dart';

class AnimatedContainerPage extends StatefulWidget {
  @override
  _AnimatedContainerPageState createState() => _AnimatedContainerPageState();
}

class _AnimatedContainerPageState extends State<AnimatedContainerPage> {
  // 初始的属性值
  double size = 100;
  double raidus = 25;
  Color color = Colors.yellow;

  void _animate() {
    // 改变属性值
    setState(() {
      size = size == 100 ? 200 : 100;
      raidus = raidus == 25 ? 100 : 25;
      color = color == Colors.yellow ? Colors.greenAccent : Colors.yellow;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Animated Container')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 在 AnimatedContainer 上应用属性值
            AnimatedContainer(
              width: size,
              height: size,
              curve: Curves.easeIn,
              padding: const EdgeInsets.all(20.0),
              decoration: BoxDecoration(
                color: color,
                borderRadius: BorderRadius.circular(raidus),
              ),
              duration: Duration(seconds: 1),
              child: FlutterLogo(),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _animate,
        child: Icon(Icons.refresh),
      ),
    );
  }
}

这是一个隐式动画，除此之外还有显式动画，Hreo 动画，交织动画。

基础概念

Flutter 动画是建立在以下的概念之上。

Animation

Flutter 中的动画系统基于 Animation 对象， 它是一个抽象类，保存了当前动画的值和状态（开始、暂停、前进、倒退），但不记录屏幕上显示的内容。UI 元素通过读取 Animation 对象的值和监听状态变化运行 build 函数，然后渲染到屏幕上形成动画效果。

一个 Animation 对象在一段时间内会持续生成介于两个值之间的值，比较常见的类型是 Animation<double>，除 double 类型之外还有 Animation<Color> 或者 Animation<Size> 等。

abstract class Animation<T> extends Listenable implements ValueListenable<T> {
  /// ...
}

AnimationController

带有控制方法的 Animation 对象，用来控制动画的启动，暂停，结束，设定动画运行时间等。

class AnimationController extends Animation<double>
  with AnimationEagerListenerMixin, AnimationLocalListenersMixin, AnimationLocalStatusListenersMixin {
  /// ...
}

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

Tween

用来生成不同类型和范围的动画取值。

class Tween<T extends dynamic> extends Animatable<T> {
  Tween({ this.begin, this.end });
  /// ...
}

// double 类型
Tween<double> tween = Tween<double>(begin: -200, end: 200);

// color 类型
ColorTween colorTween = ColorTween(begin: Colors.blue, end: Colors.yellow);

// border radius 类型
BorderRadiusTween radiusTween = BorderRadiusTween(
  begin: BorderRadius.circular(0.0),
  end: BorderRadius.circular(150.0),
);

Curve

Flutter 动画的默认动画过程是匀速的，使用 CurvedAnimation 可以将时间曲线定义为非线性曲线。

class CurvedAnimation extends Animation<double> with AnimationWithParentMixin<double> {
  /// ...
}

Animation animation = CurvedAnimation(parent: controller, curve: Curves.easeIn);

Ticker

Ticker 用来添加每次屏幕刷新的回调函数 TickerCallback，每次屏幕刷新都会调用。类似于 Web 里面的 requestAnimationFrame 方法。

class Ticker {
  /// ...
}

Ticker ticker = Ticker(callback);

隐式动画

隐式动画使用 Flutter 框架内置的动画部件创建，通过设置动画的起始值和最终值来触发。当使用 setState 方法改变部件的动画属性值时，框架会自动计算出一个从旧值过渡到新值的动画。

比如 AnimatedOpacity 部件，改变它的 opacity 值就可以触发动画。

78c9f590a6f4ab73426f67fd1eac7163.png 
import 'package:flutter/material.dart';

class OpacityChangePage extends StatefulWidget {
  @override
  _OpacityChangePageState createState() => _OpacityChangePageState();
}

class _OpacityChangePageState extends State<OpacityChangePage> {
  double _opacity = 1.0;

  // 改变目标值
  void _toggle() {
    _opacity = _opacity > 0 ? 0.0 : 1.0;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('隐式动画')),
      body: Center(
        child: AnimatedOpacity(
          // 传入目标值
          opacity: _opacity,
          duration: Duration(seconds: 1),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggle,
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

除了 AnimatedOpacity 外，还有其他的内置隐式动画部件如：AnimatedContainer, AnimatedPadding, AnimatedPositioned, AnimatedSwitcher， AnimatedAlign 等。

显式动画

显式动画指的是需要手动设置动画的时间，运动曲线，取值范围的动画。将值传递给动画部件如: RotationTransition，最后使用一个AnimationController 控制动画的开始和结束。

fa4733240b9a86df123d485883634f29.png 
import 'dart:math';
import 'package:flutter/material.dart';

class RotationAinmationPage extends StatefulWidget {
  @override
  _RotationAinmationPageState createState() => _RotationAinmationPageState();
}

class _RotationAinmationPageState extends State<RotationAinmationPage>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _turns;
  bool _playing = false;

  // 控制动画运行状态
  void _toggle() {
    if (_playing) {
      _playing = false;
      _controller.stop();
    } else {
      _controller.forward()..whenComplete(() => _controller.reverse());
      _playing = true;
    }
    setState(() {});
  }

  @override
  void initState() {
    super.initState();
    // 初始化动画控制器，设置动画时间
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 10),
    );

    // 设置动画取值范围和时间曲线
    _turns = Tween(begin: 0.0, end: pi * 2).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeIn),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('显示动画')),
      body: Center(
        child: RotationTransition(
          // 传入动画值
          turns: _turns,
          child: Container(
            width: 200,
            height: 200,
            child: Image.asset(
              'assets/images/fan.png',
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggle,
        child: Icon(_playing ? Icons.pause : Icons.play_arrow),
      ),
    );
  }
}

除了 RotationTransition 外，还有其他的显示动画部件如：FadeTransition, ScaleTransition, SizeTransition, SlideTransition 等。

Hero 动画

Hero 动画指的是在页面切换时一个元素从旧页面运动到新页面的动画。Hero 动画需要使用两个 Hero 控件实现：一个用来在旧页面中，另一个在新页面。两个 Hero 控件需要使用相同的 tag 属性，并且不能与其他tag重复。

2122c6d1ea1de6b50d2877dbfcea6c99.png 
// 页面 1
import 'package:flutter/material.dart';

import 'hero_animation_page2.dart';

String cake1 = 'assets/images/cake01.jpg';
String cake2 = 'assets/images/cake02.jpg';

class HeroAnimationPage1 extends StatelessWidget {
  GestureDetector buildRowItem(context, String image) {
    return GestureDetector(
      onTap: () {
        // 跳转到页面 2
        Navigator.of(context).push(
          MaterialPageRoute(builder: (ctx) {
            return HeroAnimationPage2(image: image);
          }),
        );
      },
      child: Container(
        width: 100,
        height: 100,
        child: Hero(
          // 设置 Hero 的 tag 属性
          tag: image,
          child: ClipOval(child: Image.asset(image)),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('页面 1')),
      body: Column(
        children: <Widget>[
          SizedBox(height: 40.0),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              buildRowItem(context, cake1),
              buildRowItem(context, cake2),
            ],
          ),
        ],
      ),
    );
  }
}

// 页面 2
import 'package:flutter/material.dart';

class HeroAnimationPage2 extends StatelessWidget {
  final String image;

  const HeroAnimationPage2({@required this.image});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: 400.0,
            title: Text('页面 2'),
            backgroundColor: Colors.grey[200],
            flexibleSpace: FlexibleSpaceBar(
              collapseMode: CollapseMode.parallax,
              background: Hero(
                // 使用从页面 1 传入的 tag 值
                tag: image,
                child: Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: AssetImage(image),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              <Widget>[
                Container(height: 600.0, color: Colors.grey[200]),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

交织动画

交织动画是由一系列的小动画组成的动画。每个小动画可以是连续或间断的，也可以相互重叠。其关键点在于使用 Interval 部件给每个小动画设置一个时间间隔，以及为每个动画的设置一个取值范围 Tween，最后使用一个 AnimationController 控制总体的动画状态。

Interval 继承至 Curve 类，通过设置属性 begin 和 end 来确定这个小动画的运行范围。

class Interval extends Curve {
  /// 动画起始点
  final double begin;
  /// 动画结束点
  final double end;
  /// 动画缓动曲线
  final Curve curve;

  /// ...
}

9b476e0bfbe205279ba54d807b2fdab1.gif

这是一个由 5 个小动画组成的交织动画，宽度，高度，颜色，圆角，边框，每个动画都有自己的动画区间。

186059b1467e2ae265910c7b006b1196.png 
import 'package:flutter/material.dart';

class StaggeredAnimationPage extends StatefulWidget {
  @override
  _StaggeredAnimationPageState createState() => _StaggeredAnimationPageState();
}

class _StaggeredAnimationPageState extends State<StaggeredAnimationPage>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> _width;
  Animation<double> _height;
  Animation<Color> _color;
  Animation<double> _border;
  Animation<BorderRadius> _borderRadius;

  void _play() {
    if (_controller.isCompleted) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
  }

  @override
  void initState() {
    super.initState();

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

    _width = Tween<double>(
      begin: 100,
      end: 300,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.0,
          0.2,
          curve: Curves.ease,
        ),
      ),
    );

    _height = Tween<double>(
      begin: 100,
      end: 300,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.2,
          0.4,
          curve: Curves.ease,
        ),
      ),
    );

    _color = ColorTween(
      begin: Colors.blue,
      end: Colors.yellow,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.4,
          0.6,
          curve: Curves.ease,
        ),
      ),
    );

    _borderRadius = BorderRadiusTween(
      begin: BorderRadius.circular(0.0),
      end: BorderRadius.circular(150.0),
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(
          0.6,
          0.8,
          curve: Curves.ease,
        ),
      ),
    );

    _border = Tween<double>(
      begin: 0,
      end: 25,
    ).animate(
      CurvedAnimation(
        parent: _controller,
        curve: Interval(0.8, 1.0),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('交织动画')),
      body: Center(
        child: AnimatedBuilder(
          animation: _controller,
          builder: (BuildContext context, Widget child) {
            return Container(
              width: _width.value,
              height: _height.value,
              decoration: BoxDecoration(
                color: _color.value,
                borderRadius: _borderRadius.value,
                border: Border.all(
                  width: _border.value,
                  color: Colors.orange,
                ),
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _play,
        child: Icon(Icons.refresh),
      ),
    );
  }
}

物理动画

物理动画是一种模拟现实世界物体运动的动画。需要建立物体的运动模型，以一个物体下落为例，这个运动受到物体的下落高度，重力加速度，地面的反作用力等因素的影响。

0ce7c7910d24ed320a510811d4ec4470.png 
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

class ThrowAnimationPage extends StatefulWidget {
  @override
  _ThrowAnimationPageState createState() => _ThrowAnimationPageState();
}

class _ThrowAnimationPageState extends State<ThrowAnimationPage> {
  // 球心高度
  double y = 70.0;
  // Y 轴速度
  double vy = -10.0;
  // 重力
  double gravity = 0.1;
  // 地面反弹力
  double bounce = -0.5;
  // 球的半径
  double radius = 50.0;
  // 地面高度
  final double height = 700;

  // 下落方法
  void _fall(_) {
    y += vy;
    vy += gravity;

    // 如果球体接触到地面，根据地面反弹力改变球体的 Y 轴速度
    if (y + radius > height) {
      y = height - radius;
      vy *= bounce;
    } else if (y - radius < 0) {
      y = 0 + radius;
      vy *= bounce;
    }

    setState(() {});
  }

  @override
  void initState() {
    super.initState();
    // 使用一个 Ticker 在每次更新界面时运行球体下落方法
    Ticker(_fall)..start();
  }

  @override
  Widget build(BuildContext context) {
    double screenWidth = MediaQuery.of(context).size.width;

    return Scaffold(
      appBar: AppBar(title: Text('物理动画')),
      body: Column(
        children: <Widget>[
          Container(
            height: height,
            child: Stack(
              children: <Widget>[
                Positioned(
                  top: y - radius,
                  left: screenWidth / 2 - radius,
                  child: Container(
                    width: radius * 2,
                    height: radius * 2,
                    decoration: BoxDecoration(
                      color: Colors.blue,
                      shape: BoxShape.circle,
                    ),
                  ),
                ),
              ],
            ),
          ),
          Expanded(child: Container(color: Colors.blue)),
        ],
      ),
    );
  }
}

总结

本文介绍了 Flutter 中多种类型的动画，分别是

  • 隐式动画
  • 显式动画
  • Hero 动画
  • 交织动画
  • 基于物理的动画

Flutter 动画基于类型化的 Animation 对象，Widgets 通过读取动画对象的当前值和监听状态变化重新运行 build 函数，不断变化 UI 形成动画效果。

一个动画的主要因素有

  • Animation 动画对象
  • AnimationController 动画控制器
  • Tween 动画取值范围
  • Curve 动画运动曲线

参考

Flutter animation basics with implicit animations​medium.com Directional animations with built-in explicit animations​medium.com 动画效果介绍​flutter.cn
9ae80bc0c5972e25e97fe7c7ccc86bca.png
9.1：Flutter动画简介 · 《Flutter实战》​book.flutterchina.club 教程 | 在 Flutter 应用里实现动画效果​flutter.cn
9ae80bc0c5972e25e97fe7c7ccc86bca.png
weixin_39558317
关注
Flutter动画揭秘：从零搭建计时器动画，让界面动起来
奇妙的Bug之旅
05-31 88
通过这篇文章，您应该已经掌握了在Flutter中利用Ticker创建动画的基础知识。继续实践，探索更多动画技巧，让您的应用在视觉体验上更上一层楼！
Flutter 动画
moyuxueyi的专栏
01-14 145
Animation Animation是一个抽象类，本身和UI渲染无关，只负责保存动画的插值和状态，widget可以在build函数中读取Animation对象的当前值。Animation对象是一个在一段时间内依次生成一个区间（Tween）之间值的类。Animation对象的输出可以是线性、曲线、一个步进函数或任何其他可以设计的映射，这由Curve决定。 Curve Curve定义常用动画曲线的数组，描述动画过程（动画效果可点击跳转链接），可以通过CurveAnimation指定动画的曲线。以..
flutter 动画
weixin_59424057的博客
08-11 233
简单控制一个AnimatedContainer变大变小；还有其他的动画示例后期还会继续添加。
Flutter-动画
Emperor_huanzi 的博客
11-07 345
flutter 动画前言 今天对Flutter动画进行一次突击，这篇文章是我对Flutter动画的使用和理解，有可能有不对的地方，欢迎大家给我指正 重要的类 Animation< double > 在Flutter中，Animation对象本身和UI渲染没有任何关系。Animation是一个抽象类，它拥有其当前值和状态（完成或停止）。其中一个比较常用的Animation类是Anima...
Flutter_beautiful_popup.zip
07-08
这个资源包包含了一系列预设的弹出窗口样式，例如：圆形、矩形、半透明、带动画效果等，使得开发者无需从零开始编写复杂的布局和动画代码，就可以快速实现富有吸引力的弹出窗口。这些弹窗不仅可以用于展示信息，还...
flutter_travel_ui:https
04-30
Flutter Travel UI 是一个基于 Flutter 框架构建的示例项目，旨在帮助开发者从零开始学习如何设计和开发具有专业外观和用户体验的移动应用程序。Flutter 是 Google 推出的开源 UI 工具包，使用 Dart 语言编写，支持...
Flutter完整开发实战详解 PDF
09-29
【 Flutter完整开发实战详解 PDF 】是一本详细指导Flutter应用开发的书籍，涵盖了从基础知识到高级实践的全方位内容。以下是本书的主要知识点： 一、Dart语言和Flutter基础 1. Dart语言是Flutter的编程语言，它具有...
flutter_in_action:颤抖实战
03-26
通过以上知识点的学习和实践，开发者将能够从零开始构建出功能丰富的、具有出色用户体验的移动应用。《Flutter in Action: 颤抖实战》不仅覆盖了Flutter的基础，也包含了许多高级主题，适合各种水平的开发者进行深入...
Flutter Animation 动画
10-11
https://blog.csdn.net/ruoshui_t/article/details/93393583
flutter动画
qq_30005223的博客
04-22 2478
Animation：Flutter动画中的核心类，此类是抽象类，通常情况下使用其子类：AnimationController，可以获取当前动画的状态和值，也可以添加其状态变化监听和值变化监听。 Curve：决定动画执行的曲线，和Android中的Interpolator（差值器）是一样的，负责控制动画变化的速率，系统已经封装了10多种动画曲线，详见Curves类。差值器 AnimationController：动画控制器，控制动画的开始、停止。继承自Animation。 Tween：映射生成不同范围的值，.
Flutter的动画
luoyanda的博客
07-27 191
1.Animation的状态有四种，使用枚举AnimationStatus 表示 enum AnimationStatus { /// The animation is stopped at the beginning. //如果动画是reverse()返向执行，执行结束后就是dismissed dismissed, /// The animation is running from beginning to end. //动画开始正向执行，此时也会调用addStatusListene
Flutter：动画
最新发布
weixin_41897680的博客
06-09 1758
Flutter：动画
Flutter 动画（一）
K_Hello的博客
03-25 516
Flutter 动画 文章目录Flutter 动画准备AnimationControllerTicker providers生命周期TweenSampleFlutterLogo从30-50的放大动画CurvedAnimationInterval 准备 void main() { runApp(MyWidget()); } class MyWidget extends StatelessWidget { @override Widget build(BuildContext context) {
Flutter 动画1
weixin_45425105的博客
01-07 334
写代码就希望写出来的东西是可以动的，所以，最近分享一点动画的代码一起学习呀~ 觉得有用的话，记得收藏一波~ 以下所有的代码，可以直接复制进去main.dart文件里面，就可以运行出这个效果啦~ （一）效果图 这个效果是当你一开始运行，这个小方块就会开始从左上角沿着对角线运动到右下角 （一）代码 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessW
Flutter中的动画
梁婉玲krysliang的博客
08-12 1949
今天来学习一下Flutter中的动画。我们在js+css中，已经习惯用css3中的animation，transform，transition这三个加在一起去做。 我们像前端那样，先从静态的变换中谈论。 一、变换组件 在css中如果要先让一个元素发生平移，使用的是transform：translate，那么在flutter中，已经封装起组件进行使用，只用填入平移的位置就可以。 1、平移 ​ Transform.translate( offset: Offset(...
Flutter 动画篇
hongxue8888的博客
07-10 3018
文章目录1 概述2 Animation3 AnimationController4 Curve5 Tween 1 概述 Flutter中的动画分为补间(Tween)动画和基于物理(Physics-based)的动画。 在补间动画中，定义了开始点和结束点、时间线以及定义转换时间和速度的曲线，然后由框架自动计算如何从开始点过渡到结束点。 在基于物理的动画(遵循物理学定律)中，运动被模拟为与真实世界...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值