import 'package:flutter/material.dart';

class AnimationDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('AnimationDemo'),
elevation: 0.0,
),
body: AnimationDemoHome());
}
} class AnimationDemoHome extends StatefulWidget {
@override
_AnimationDemoHomeState createState() => _AnimationDemoHomeState();
} class _AnimationDemoHomeState extends State<AnimationDemoHome>
with TickerProviderStateMixin {
AnimationController animationDemoController;
Animation animation;
Animation animationColor;
CurvedAnimation curve; @override
void initState() {
super.initState(); animationDemoController = AnimationController(
// value: 32.0,
// lowerBound: 32.0,
// upperBound: 100.0,
duration: Duration(milliseconds: 1000),
vsync: this,
); curve = CurvedAnimation(
parent: animationDemoController, curve: Curves.bounceOut); animation = Tween(begin: 32.0, end: 100.0).animate(curve);
animationColor =
ColorTween(begin: Colors.red, end: Colors.red[900]).animate(curve); // animationDemoController.addListener(() {
// // print('${animationDemoController.value}');
// setState(() {});
// }); animationDemoController.addStatusListener((AnimationStatus status) {
print(status);
}); // animationDemoController.forward();
} @override
void dispose() {
super.dispose(); animationDemoController.dispose();
} @override
Widget build(BuildContext context) {
return Center(
child: AnimatedHeart(
animations: [
animation,
animationColor,
],
controller: animationDemoController,
),
);
}
} class AnimatedHeart extends AnimatedWidget {
final List animations;
final AnimationController controller; AnimatedHeart({
this.animations,
this.controller,
}) : super(listenable: controller); @override
Widget build(BuildContext context) {
return IconButton(
icon: Icon(Icons.favorite),
iconSize: animations[0].value,
color: animations[1].value,
onPressed: () {
switch (controller.status) {
case AnimationStatus.completed:
controller.reverse();
break;
default:
controller.forward();
}
},
);
}
}

效果:

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. javax.servlet.ServletException: Circular view path [index]: would dispatch back to the current handler URL [/pay/index] again. Check your ViewResolver setup!

    2019-08-08 17:12:03.544 ERROR 13748 --- [nio-8080-exec-2] o.a.c.c.C.[.[.[/].[dispatcherServlet] : Se ...

  2. MQ的面试题

    MQ的优点和缺点? 优点:解耦 异步,削峰 解耦: 所以需要用来解耦: 异步: 解决方法: 削峰: 解决方法是: 缺点:降低高可用性.增加系统的复杂程度.一致性问题 降低高可用的原因:系统引入的外部依 ...

  3. 【Java】《Java程序设计基础教程》第四章学习

    4.1 类的封装 封装指的是将东西包装在一起,然后以新的完整形式呈现.包含两个意义: 1). 把对象的全部属性和方法结合在一起,形成一个不可分割的独立单位(即对象). 2). 信息隐藏,即尽可能隐藏对 ...

  4. 什么情况下使用large training data会非常有效

    收集大量的数据可能比算法的优劣更重要 Banko和Brill在2001年做了一个研究,是关于在句子中对易混单词进行识别,画出了上图的右边的那个图,这个图显示了对于不同的算法,它们的表现相似,但是随着t ...

  5. HDFS日志的查看总结

    HDFS日志查看的两种方式:HDFS安装目录中的logs中和HDFS WEB UI上 HDFS安装目录中的logs中看日志   我们分别在master.slave1以及slave2上安装了HDFS,只 ...

  6. Vue 实例成员

    Vue 一. 什么是Vue 可以独立完成前后端分离时 Web项目的JavaScript框架 二.为什么学Vue 前端三大主流框架:Angular React Vue Vue结合了其他框架优点.轻量级. ...

  7. pt100、pt1000,和热电偶

    最近温度测试这块,已使用过pt100.pt1000,和热电偶,这里进行大致的总结.1.pt系列pt100和pt1000的精度相比较,1000更加精细,毕竟他的电阻值更加大.两个电阻都是有分度表的,pt ...

  8. POJ 2778 DNA Sequence (矩阵快速幂 + AC自动鸡)

    题目:传送门 题意: 给你m个病毒串,只由(A.G.T.C) 组成, 问你生成一个长度为 n 的 只由 A.C.T.G 构成的,不包含病毒串的序列的方案数. 解: 对 m 个病毒串,建 AC 自动机, ...

  9. 新建Class文件时,添加作者版权注释声明

    以安装路径C盘为例,各版本路径如下: VS2015:C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\ItemTempla ...

  10. [Shell]利用JS文件反弹Shell

    0x01 模拟环境 攻击: kali ip: 192.168.248.132 测试: windows 7 x64 ip: 192.168.248.136 0x02 工具地址 https://githu ...