王学岗flutter动画

已于 2023-02-27 20:19:36 修改
阅读量171 收藏
点赞数
分类专栏： flutter 文章标签： flutter android 动画
于 2023-02-26 18:39:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qczg_wxg/article/details/129229702
版权
本文介绍了Flutter中两种主要的动画类型：补间动画和基于物理的动画。通过示例代码详细展示了如何创建字体变大、缓动、遮罩、数字变化以及图表和渐隐渐现的动画效果。同时，讲解了AnimationController、Tween和CurvedAnimation等关键概念的使用。
摘要由CSDN通过智能技术生成

动画简介

FLutter中的动画分为两类：补间(tween)动画和基于物理的动画
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
注意Duration(动画持续的时间)的单位是毫秒，2000毫秒就是2秒。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
bounch弹簧效果 ease抖动效果
在这里插入图片描述
注意animate()返回的是一个Animation，而不是一个Animatable
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

代码(一) 字体变大动画

class MMM extends StatefulWidget {
  const MMM({Key? key}) : super(key: key);

  @override
  State<MMM> createState() => _MMMState();
}

class _MMMState extends State<MMM> with SingleTickerProviderStateMixin {
  late Animation<double> tween;
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 4000), vsync: this);
    tween = Tween(begin: 0.0, end: 1.0).animate(controller)
      ..addListener(() {
        setState(() {
          print(tween.value);
        });
      });
    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('动画'),
      ),
      body: GestureDetector(
        onTap: () {
          setState(() {
            controller.forward(from: 0.0);
          });
        },
        child: Center(
          child: Text(
            '字体放大',
            style: TextStyle(fontSize: 60 * controller.value),
          ),
        ),
      ),
    );
  }
}

代码二 缓动动画

在这里插入图片描述
Curveds.fastOutSlowIn 快出慢进
AnimatedBuilder是一个中间件，将Animation和要作用的Widget关联起来。

class MMM extends StatefulWidget {
  const MMM({Key? key}) : super(key: key);

  @override
  State<MMM> createState() => _MMMState();
}

class _MMMState extends State<MMM> with SingleTickerProviderStateMixin {
  late Animation animation; //这里不指定泛型
  late AnimationController controller;
  // 定义时函数类型可以省略 （不建议省略）
  //在 dart 里，被省略的函数返回值不是 void，dart 可以允许你不写函数的返回值，编译器会自动帮助你返回 null
  handler(status) {
    if (status == AnimationStatus.completed) {//监听动画完成状态
      animation.removeStatusListener(handler);//移除监听
      controller.reset();//重置controller
      animation = Tween(begin: 0.0, end: 1.0).animate(
        //使用非线性动画，也就是所谓的插值器，Tween是估值器
          CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn))
        ..addStatusListener((status) {
          if (status == AnimationStatus.completed) {
            print("两个动画都执行完了");
          }
        });
      controller.forward();//执行第二个动画
    }
  }

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(duration: const Duration(seconds: 4), vsync: this);
    animation = Tween(begin: -1.0, end: 0.0).animate(
      //使用非线性动画，也就是所谓的插值器，Tween是估值器
        CurvedAnimation(parent: controller, curve: Curves.fastOutSlowIn))
      ..addStatusListener(handler);
  }

  @override
  Widget build(BuildContext context) {
    //计算屏幕的宽度
    final double width = MediaQuery.of(context).size.width;
    controller.forward();
    return Scaffold(
        appBar: AppBar(
          title: const Text('动画'),
        ),
        body: AnimatedBuilder(
          animation: controller,
          builder: (context, child) {
            return Transform(//矩阵转换的方式移动控件
              transform:
              //参数是x,y,z
                  Matrix4.translationValues(animation.value * width, 0, 0),
              //矩阵包裹的内容
              child: Center(
                child: Container(
                  width: 200.0,
                  height: 200.0,
                  color: Colors.green,
                ),
              ),
            );
          },
        ));
  }
  @override
  void dispose() {
    super.dispose();
    //销毁动画
    controller.dispose();
  }
}

代码三遮罩动画

一个容器遮住另一个容器，使用动画叠加

import 'package:flutter/material.dart';

class MaskAnimation extends StatefulWidget {
  _MaskAnimation createState() => _MaskAnimation();
}

class _MaskAnimation extends State<MaskAnimation> with SingleTickerProviderStateMixin {

  AnimationController _controller;
  //需要两个补间对象
  Animation<double> transitionTween;
  Animation<BorderRadius> borderRadius;//给BorderRadius做补间

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

    _controller = AnimationController(vsync: this, duration: const Duration(seconds: 10),)
              ..addStatusListener((status){//针对controller做监听
                if(status == AnimationStatus.completed){
                  Navigator.pop(context);
                }
              });



    transitionTween = Tween<double>(begin: 50,end: 200).animate(
        CurvedAnimation(
            parent: _controller,
            curve: Curves.ease//
        ),
    );

//一种特殊的tween
    borderRadius = BorderRadiusTween(
        begin: BorderRadius.circular(75.0),
        end: BorderRadius.circular(0.0),
    ).animate(
      CurvedAnimation(
          parent: _controller,
          curve: Curves.ease
      ),
    );
    _controller.forward();

  }



  @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;
    _controller.forward();
	//AnimatedBuilder放到最外围
    return AnimatedBuilder(
        animation: _controller,
        builder: (context,child){
        return Scaffold(
          appBar: AppBar(
            title: Text('遮罩动画'),
          ),
          body: Center(
            child: Stack(//放上下两层
              children: <Widget>[
                Center(
                  child: Container(
                    width: 200.0,
                    height: 200.0,
                    color: Colors.black12,
                  ),
                ),
                Center(
                  child: Container(
                    alignment: Alignment.bottomCenter,
                    width: transitionTween.value,
                    height:transitionTween.value,
                    decoration: BoxDecoration(
                      color: Colors.black12,
                      borderRadius: borderRadius.value,
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
    });

  }

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

}

代码三 数字值变化

import 'package:flutter/material.dart';

class ValueAnimation extends StatefulWidget {
  _ValueAnimation createState() => _ValueAnimation();
}

class _ValueAnimation extends State<ValueAnimation> with SingleTickerProviderStateMixin {

  AnimationController controller;
  Animation animation;

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

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


    final Animation curve = CurvedAnimation(parent: controller, curve: Curves.easeOut);

    animation = IntTween(begin: 0,end: 10).animate(curve)..addStatusListener((status){
      if(status == AnimationStatus.completed){
        controller.reverse();//完成后反转
      }
      if(status == AnimationStatus.dismissed){
        Navigator.pop(context);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    controller.forward();
    return AnimatedBuilder(
        animation: controller,
        builder: (context,child){
          return Scaffold(
            appBar: AppBar(
              title: Text('数字变化动画'),
            ),
            body: Center(
              child: Text(animation.value.toString(),style: TextStyle(fontSize: 48.0),),
            ),
          );
    });

  }

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

}

代码4图表动画

import 'package:flutter/material.dart';

class ChartsAnimation extends StatefulWidget {
  _ChartsAnimation createState() => _ChartsAnimation();
}
//不需要with了，因为我们使用了AnimatedContainer，不是自定义
class _ChartsAnimation extends State<ChartsAnimation>{

  var height = 100.0;
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('图表动画'),
      ),
      body: Center(
        child: Container(
          height: 400,
		  //放在底部
          alignment: AlignmentDirectional.bottomStart,
		  //InkWell带有点击效果
          child: InkWell(
            onTap: (){
              setState(() {
                height = 320;
              });
            },
			//放柱状图
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                AnimatedContainer(
                  duration: Duration(seconds: 1),
                  width: 40.0,
                  height: height - 40,
                  color: Colors.greenAccent,
                ),
                AnimatedContainer(
                  margin: EdgeInsets.only(left: 10.0),
                  duration: Duration(seconds: 2),
                  width: 40.0,
                  height: height - 10,
                  color: Colors.yellow,
                ),
                AnimatedContainer(
                  margin: EdgeInsets.only(left: 10.0),
                  duration: Duration(seconds: 3),
                  width: 40.0,
                  height: height - 60,
                  color: Colors.red,
                ),
                AnimatedContainer(
                  margin: EdgeInsets.only(left: 10.0),
                  duration: Duration(seconds: 2),
                  width: 40.0,
                  height: height - 50,
                  color: Colors.blue,
                ),
              ],
            ),
          ),
        ),
      ),
    );

  }


}

代码5 渐隐渐显的动画效果

import 'package:flutter/material.dart';

class OpacityAnimation extends StatefulWidget {
  _OpacityAnimation createState() => _OpacityAnimation();
}

class _OpacityAnimation extends State<OpacityAnimation> {
  bool _visible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('淡入淡出动画'),
      ),
      body: Center(
        child: AnimatedOpacity(
          opacity: _visible ? 1.0 : 0.0,//显示与隐藏，中间的过渡效果由AnimatedOpacity控制。
          duration: Duration(milliseconds: 1000),
          child: Container(
            width: 300.0,
            height: 300.0,
            color: Colors.deepPurple,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(
            () {
              _visible = !_visible;
            },
          );
        },
        tooltip: '显示隐藏',
        child: Icon(Icons.add),
      ),
    );
  }
}

页面切换动画效果

import 'package:flutter/material.dart';


class HeroAnimation extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('页面切换动画图一'),
      ),
      body: GestureDetector(
        child: Hero(//使用Hero包裹
          tag: '第一张图片',
          child: Image.network(
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541753399410&di=05760e1c65686b018cf28d440a6ddf5c&imgtype=0&src=http%3A%2F%2Fimg1.cache.netease.com%2Fcatchpic%2FD%2FD7%2FD7D7640C07A00D831EFD2AC270ED7FA7.jpg",
          ),
        ),
        onTap: (){
          Navigator.push(context, MaterialPageRoute(builder: (_){
            return DesinationPage();
          }));
        },
      ),

    );
  }
}


class DesinationPage extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('页面切换动画图二'),
      ),
      body: GestureDetector(
        child: Hero(
          tag: '第二张图片',
          child: Image.network(
              "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1541753302014&di=9edfe992f8b9d395134fd977dbfeab28&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F2f738bd4b31c870143a3a1dc2c7f9e2f0708fff7.jpg",
          ),
        ),
        onTap: (){
          Navigator.pop(context);
        },
      ),

    );
  }
}
qczg_wxg
关注
专栏目录
Flutter 旋转动画 — RotationTransition
xhuww的博客
06-18 1万+
RotationTransition 继承于AnimatedWidget，是一个提供旋转功能的Widget。本文讲解实现线性、非线性旋转动画，手动控制动画旋转以及动画延时重复播放。
Flutter - 弹跳按钮动画
NotesChapter
02-10 2050
Flutter - 弹跳按钮动画
史上最详细Flutter 动画讲解
wuxiaopengnihao1的博客
11-10 4165
动画对于App来说，非常的重要。很多App，正是因为有了动画，所以才会觉得炫酷。移动端的动画库有非常的多，例如iOS上的Pop、web端的animate.css、Android端的AndroidViewAnimations、跨平台的Lottie等。正是因为有了这些封装好的动画库，我们制作酷炫的效果方便了不少。当然了，这些库都是基于各平台基础的动画API实现的，笔者今天要聊的，也就是基础的动画及背后的原理。本文会从代码层面去介绍Flutter动画，因此不会涉及到Flutter动画的具体使用。
Flutter 动画容器 AnimatedContainer
我很好
11-12 3188
Flutter 常用布局之Container具有指定宽度、高度、背景颜色、外边距和边框等属性的 widget。 为了实现简单的动画效果，AnimatedContainer也可以设置它的宽度、高度以及背景颜色等等。 隐式动画：AnimatedContainer在使用新属性进行重建时，将会自动在旧值和新值之间生成动画。 ...
flutter 页面跳转动画 SlideTransition
Z20210224的博客
11-28 1540
flutter 页面跳转动画 SlideTransition
Flutter 微信语音消息播放动画
鲨鱼不会飞的博客
07-19 2163
flutter 实现微信语音消息播放动画
flutter ScaleTransition实现缩放动画
代码小疯子
07-10 1万+
更多文章请查看 flutter从入门 到精通 flutter 动画状态监听器 AnimationController //动画控制器 AnimationController controller; //AnimationController是一个特殊的Animation对象，在屏幕刷新的每一帧，就会生成一个新的值， // 默认情况下，AnimationContro...
Flutter 水波纹动画效果实现
qq_35297511的博客
03-01 3230
Flutter 水波纹动画效果实现1. 先上效果图：2. 实现2.1 尺寸渐变结合透明度渐变2.2 多个基本动画效果叠加3. 总结 1. 先上效果图： 2. 实现 我们将该动画拆成三部分来实现就比较容易了，分别是尺寸大小渐变动画、透明度渐变动画和叠加组合动画。 尺寸变换数值由补间动画Tween填补，辅以线性变换；这里圆形的大小变化我设置的是50~290范围，当然你可以设置其他范围： var animation = Tween(begin: 50.0, end: 290.0) .anim
flutter RotationTransition实现旋转动画
热门推荐
代码小疯子
07-10 1万+
更多文章请查看 flutter从入门 到精通 flutter 动画状态监听器 AnimationController //动画控制器 AnimationController controller; //AnimationController是一个特殊的Animation对象，在屏幕刷新的每一帧，就会生成一个新的值， // 默认情况下，AnimationContro...
Flutter实现购物车动画
bb3413830的博客
05-29 2635
最近项目中有一个类似购物车的动画，然后我用android实现之后就想到自己再学flutter，就写了一个flutter的版本，效果上跟原生差不多，如图 因为有了android实现思路的支持，我就想到用同样的思路来实现，但是上来就遇到了一个问题，在android中咱们可以创建一个那个移动的view动态的添加到父布局中，然后开始执行动画，但是flutter我不知道怎么用父widget动态的添加w...
Flutter Animation动画开发之——repeat循环播放
01-20
在Flutter开发中，动画是构建用户界面的重要组成部分，它能够为应用增添动态效果，提高用户体验。本篇文章将深入探讨如何使用`AnimationController`实现动画的循环播放。 在Flutter中，`AnimationController`是控制...
flutter 微信语音消息动画
07-19
在本文中，我们将深入探讨如何使用Flutter框架来实现微信风格的语音消息播放动画。Flutter是Google推出的一个开源UI工具包，用于构建高性能、高保真度的原生移动应用程序，适用于Android和iOS平台。微信语音消息动画...
Flutter动画explorer
08-10
Flutter动画Explorer是一款专为Flutter开发者设计的工具，用于探索和学习Flutter框架中的各种动画效果。Flutter，由Google开发，是一个开放源代码的UI软件开发工具包，它允许开发者使用单个代码库创建跨平台的应用...
Flutter动画基础教程
06-15
本次课程包含以下内容：动画基本概念动画的本质帧与FPS插值器/估值器动画类型动画相关核心类Animation介绍AnimationController动画管理类CurvedAnimation非线性动画Tween补间值生成类动画事件监听及控制流程...
Flutter 简述(1)
起司锅仔的博客
11-02 515
Flutter是Google开源的应用框架，只要一套代码兼顾Android、iOS、Web、Windows、macOS和Linux六个平台，它的设计思路可以说更加先进，不像ReactNative每个组件都需要有对应的原生组件实现，而是通过skia或者其他的渲染引擎来直接渲染画面，Flutter使用dart虚拟机来实现跨平台管理UI。
新建Flutter工程
qq_21434809的博客
11-01 378
当前为写文章时的最新版本，添加了阿里云镜像地址，同样budil.gradle文件下也需要添加镜像地址；1.使用Android studio新建New Flutter project；2.最新版本兼容性配置。
Flutter&鸿蒙next中封装一个列表组件
最新发布
小淼淼的博客
11-04 456
在这个示例中，我们创建了一个简单的播客应用，封装了一个播客列表组件，并在主页面中使用它。列表组件使用来动态生成列表项，展示播客的标题和描述。
极简实现酷炫动效：Flutter隐式动画指南第三篇自定义Flutter隐式动画
我叫柱子哥
11-02 858
上两节博客分别介绍了Flutter中的隐式动画的基础知识以及使用隐式动画实现的一些动画效果。当系统提供的隐式动画不能满足我们的需求的时候，我们还可以通过TweenAnimationBuilder 自定义我们的隐式动画。下面进入正题，我们了解下TweenAnimationBuilder的一些知识。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值