1. import 'package:flutter/material.dart';
  2.  
  3. class AnimationDemo extends StatelessWidget {
  4. @override
  5. Widget build(BuildContext context) {
  6. return Scaffold(
  7. appBar: AppBar(
  8. title: Text('AnimationDemo'),
  9. elevation: 0.0,
  10. ),
  11. body: AnimationDemoHome());
  12. }
  13. }
  14.  
  15. class AnimationDemoHome extends StatefulWidget {
  16. @override
  17. _AnimationDemoHomeState createState() => _AnimationDemoHomeState();
  18. }
  19.  
  20. class _AnimationDemoHomeState extends State<AnimationDemoHome>
  21. with TickerProviderStateMixin {
  22. AnimationController animationDemoController;
  23. Animation animation;
  24. Animation animationColor;
  25. CurvedAnimation curve;
  26.  
  27. @override
  28. void initState() {
  29. super.initState();
  30.  
  31. animationDemoController = AnimationController(
  32. // value: 32.0,
  33. // lowerBound: 32.0,
  34. // upperBound: 100.0,
  35. duration: Duration(milliseconds: 1000),
  36. vsync: this,
  37. );
  38.  
  39. curve = CurvedAnimation(
  40. parent: animationDemoController, curve: Curves.bounceOut);
  41.  
  42. animation = Tween(begin: 32.0, end: 100.0).animate(curve);
  43. animationColor =
  44. ColorTween(begin: Colors.red, end: Colors.red[900]).animate(curve);
  45.  
  46. // animationDemoController.addListener(() {
  47. // // print('${animationDemoController.value}');
  48. // setState(() {});
  49. // });
  50.  
  51. animationDemoController.addStatusListener((AnimationStatus status) {
  52. print(status);
  53. });
  54.  
  55. // animationDemoController.forward();
  56. }
  57.  
  58. @override
  59. void dispose() {
  60. super.dispose();
  61.  
  62. animationDemoController.dispose();
  63. }
  64.  
  65. @override
  66. Widget build(BuildContext context) {
  67. return Center(
  68. child: AnimatedHeart(
  69. animations: [
  70. animation,
  71. animationColor,
  72. ],
  73. controller: animationDemoController,
  74. ),
  75. );
  76. }
  77. }
  78.  
  79. class AnimatedHeart extends AnimatedWidget {
  80. final List animations;
  81. final AnimationController controller;
  82.  
  83. AnimatedHeart({
  84. this.animations,
  85. this.controller,
  86. }) : super(listenable: controller);
  87.  
  88. @override
  89. Widget build(BuildContext context) {
  90. return IconButton(
  91. icon: Icon(Icons.favorite),
  92. iconSize: animations[0].value,
  93. color: animations[1].value,
  94. onPressed: () {
  95. switch (controller.status) {
  96. case AnimationStatus.completed:
  97. controller.reverse();
  98. break;
  99. default:
  100. controller.forward();
  101. }
  102. },
  103. );
  104. }
  105. }

效果:

flutter 的Animation简单了解的更多相关文章

  1. Android动画Animation简单示例

    Animation是Android给我们提供的一个可以实现动画效果的API,利用Animation我们可以实现一系列的动画效果,比如缩放动画,透明度动画,旋转动画,位移动画,布局动画,帧动画等等.An ...

  2. Flutter Plugin开发简单示例

    新建Plugin项目: flutter create --template=plugin -i swift -a javahello lib/hello.dart: 插件包的Dart API. and ...

  3. [C#] Timer + Graphics To Get Simple Animation (简单的源码例子,适合初学者)

    >_<" 这是一个非常简单的利用C#的窗口工程创立的程序,用来做一个简单的动画,涉及Timer和Graphics,适合初学者,高手略过~

  4. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  5. Flutter 中SimpleDialog简单弹窗使用

    import 'package:flutter/material.dart'; import 'dart:async'; enum Option { A, B, C } class SimpleDia ...

  6. Jaguar_websocket结合Flutter搭建简单聊天室

    1.定义消息 在开始建立webSocket之前,我们需要定义消息,如:发送人,发送时间,发送人id等.. import 'dart:convert'; class ChatMessageData { ...

  7. 转:Flutter动画二

    1. 介绍 本文会从代码层面去介绍Flutter动画,因此不会涉及到Flutter动画的具体使用. 1.1 Animation库 Flutter的animation库只依赖两个库,Dart库以及phy ...

  8. 【Flutter学习】之动画实现原理浅析(二)

    1. 介绍 本文会从代码层面去介绍Flutter动画,因此不会涉及到Flutter动画的具体使用. 1.1 Animation库 Flutter的animation库只依赖两个库,Dart库以及phy ...

  9. Flutter Weekly Issue 52

    教程 一个易迁移.兼容性高的 Flutter 富文本方案 复杂业务如何保证Flutter的高性能高流畅度? 插件 flutter_color_models A wrapper for the Dart ...

随机推荐

  1. jmeter + ant + jenkins 自动化集成环境搭建

    所需工具 一.jmeter 工具下载 https://jmeter.apache.org/  配置环境JDK等及各种插件 二.Ant安装(http://ant.apache.org/) 安装Ant是为 ...

  2. visual studio故障修复

    如果没有安装程序,直接在控制面板——>程序和功能,在列表中找到您安装的vs,右键选择更改,然后程序会启动,做一些准备.然后又三个选项,可以选择修复.

  3. nodejs模块化标准

    commonjs 导出一个 a.js function add(a, b){ return a+b; } module.exports = add; b.js const add = require( ...

  4. [software test - 001] Why we need software test?

    /*  This is a conclusion about the software testing job. */ /*  Scope: middle level software tasks,  ...

  5. 爬虫(二)-创建项目&应用

    一.回顾 上篇已经讲解了python-django的环境搭建,本次将继续上次的课程,开始创建项目及应用. 上篇的验证结果为: 本次将加上创建应用之后浏览器打开演示~ 二.创建项目 1)使用django ...

  6. vim、gvim 在 windows 下中文乱码的终极解决方案

    vim.gvim 在 windows 下中文乱码的终极解决方案 vim ~/.vimrc 然后加入: " Gvim中文菜单乱码解决方案 " 设置文件编码格式 set encodin ...

  7. pyspark minHash LSH 查找相似度

    先看看官方文档: MinHash for Jaccard Distance MinHash is an LSH family for Jaccard distance where input feat ...

  8. 使用vue打包,vendor文件过大,或者是app.js文件很大

    我的解决办法: 1.把不常改变的库放到index.html中,通过cdn引入,比如下面这样: 然后找到build/webpack.base.conf.js文件,在 module.exports = { ...

  9. Docker初识笔记

    Docker docker说白了就是:环境打包 我们能用docker什么? 1.如果配置好本地的linux环境交接给其他人,很麻烦,交接时要告诉他,装这个装那个,还可能出现问题,那我直接把这个环境放到 ...

  10. 样条插值法(Java)--在本地执行

    该程序主要实现样条插值的目的,为本地执行java文件 该程序包含:样条插值法.读取文件,写入文件,字符型转double型方法等: 适合初学Java的人学习: 首次使用eclipse打jar包,中间很曲 ...