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. WebAssembly(wasm)是什么?——学习

    WebAssembly 是一种可以使用非 JavaScript 编程语言编写代码并且能在浏览器上运行的技术方案. 参考文章标题:几张图让你看懂WebAssembly 参考地址:https://www. ...

  2. redis开发相关

    1.为什么要用缓存,缓存的使用场景2.redis数据存储类型 string/list/set/hash/sort set(zset)3.redis的常用数据类型,使用方式4.redis实现的跳跃表是什 ...

  3. 使用Restful风格中的post使用过遇到前端数据传送不到后端

    问题描述:使用postman进行请求时候,前端的数据,一直在后端接收不到,找了好多资料,竟然是因为一个注解的原因. 后端接收设置:@RequestParam@ReqeustBody设置的原因 因为sp ...

  4. 题解 洛谷P2503 【[HAOI2006]均分数据】

    看了眼题目和数据范围\(n \leq 20,k \leq 6\)自然想到了\(dfs\)分组求解,主要是被这道题坑自闭过. 然而硬来\(dfs\)肯定会被蜜汁\(T\)掉,因为暴力\(n\)个数所在集 ...

  5. 原生js获取display属性注意事项

    原生js获取diaplay属性需要在标签上写行间样式style='display:none/block;' <div style="display:block;">&l ...

  6. shellshock溢出攻击

    实验背景 2014年9月24日,Bash中发现了一个严重漏洞shellshock,该漏洞可用于许多系统,并且既可以远程也可以在本地触发.在本实验中,需要亲手重现攻击来理解该漏洞,并回答一些问题. 什么 ...

  7. python - django authenticate 返回结果一直是None

    # 不论怎么测试 authenticate 返回结果一直是None,查了查原因好像是 django 2.1 版本的问题 ( 我用的是 2.1.7) 解决方法: 1. 先导入 from django.c ...

  8. 集成腾讯Bugly日志- Android(1)

    Bugly 是腾讯公司为移动开发者开放的服务之一,这里主要指 Crash 监控.崩溃分析等质量跟踪服务. 一.登录BUGLY官网 1.登录BUGLY官网以后,选择新建产品,选择IOS或ADNROID平 ...

  9. CocoaPods加载第三方库

    http://code4app.com/article/cocoapods-install-usage

  10. ES 调优查询亿级数据毫秒级返回!怎么做到的?--文件系统缓存

    一道面试题的引入: 如果面试的时候碰到这样一个面试题:ElasticSearch(以下简称ES) 在数据量很大的情况下(数十亿级别)如何提高查询效率? 这个问题说白了,就是看你有没有实际用过 ES,因 ...