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. web workers 实例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. LeetCode - 206、反转链表

    反转一个单链表. 示例: 输入: 1->2->3->4->5->NULL 输出: 5->4->3->2->1->NULL /** * 列表定 ...

  3. 结构型模式(一) 适配器模式(Adapter)

    一.动机(Motivation) 在软件系统中,由于应用环境的变化,常常需要将"一些现存的对象"放在新的环境中应用,但是新环境要求的接口是这些现存对象所不满足的. 如何应对这种&q ...

  4. Redis面试基本问题

    Redis有哪些数据结构? 字符串String.字典Hash.列表List.集合Set.有序集合SortedSet.如果你是Redis中高级用户,还需要加上下面几种数据结构HyperLogLog.Ge ...

  5. arp和rarp协议

    ARP与RARP详细解析 原创zlnnjit 发布于2016-04-03 15:12:15 阅读数 9544 收藏 展开 地址解析协议 ARP和逆地址解析协议RARP 1.基本关系: ​ 2.地址解析 ...

  6. js大文件分块上传断点续传demo

    文件夹上传:从前端到后端 文件上传是 Web 开发肯定会碰到的问题,而文件夹上传则更加难缠.网上关于文件夹上传的资料多集中在前端,缺少对于后端的关注,然后讲某个后端框架文件上传的文章又不会涉及文件夹. ...

  7. 网路流 uoj 168 元旦老人与丛林

    http://uoj.ac/problem/168 没想到是网络流 官方题解地址 http://jiry-2.blog.uoj.ac/blog/1115 subtask2告诉我们度数为012的点对答案 ...

  8. 【概率论】5-8:Beta分布(The Beta Distributions)

    title: [概率论]5-8:Beta分布(The Beta Distributions) categories: - Mathematic - Probability keywords: - Th ...

  9. 《挑战30天C++入门极限》C++面向对象编程入门:类(class)

        C++面向对象编程入门:类(class) 上两篇内容我们着重说了结构体相关知识的操作. 以后的内容我们将逐步完全以c++作为主体了,这也意味着我们的教程正式进入面向对象的编程了. 前面的教程我 ...

  10. MySQL 获得 当前日期时间 函数

    mysql> select now(); 输出 -- :: 例子 mysql> ), now(); +---------------------+----------+---------- ...