flutter 的Animation简单了解
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简单了解的更多相关文章
- Android动画Animation简单示例
Animation是Android给我们提供的一个可以实现动画效果的API,利用Animation我们可以实现一系列的动画效果,比如缩放动画,透明度动画,旋转动画,位移动画,布局动画,帧动画等等.An ...
- Flutter Plugin开发简单示例
新建Plugin项目: flutter create --template=plugin -i swift -a javahello lib/hello.dart: 插件包的Dart API. and ...
- [C#] Timer + Graphics To Get Simple Animation (简单的源码例子,适合初学者)
>_<" 这是一个非常简单的利用C#的窗口工程创立的程序,用来做一个简单的动画,涉及Timer和Graphics,适合初学者,高手略过~
- css3 动画(animation)-简单入门
css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...
- Flutter 中SimpleDialog简单弹窗使用
import 'package:flutter/material.dart'; import 'dart:async'; enum Option { A, B, C } class SimpleDia ...
- Jaguar_websocket结合Flutter搭建简单聊天室
1.定义消息 在开始建立webSocket之前,我们需要定义消息,如:发送人,发送时间,发送人id等.. import 'dart:convert'; class ChatMessageData { ...
- 转:Flutter动画二
1. 介绍 本文会从代码层面去介绍Flutter动画,因此不会涉及到Flutter动画的具体使用. 1.1 Animation库 Flutter的animation库只依赖两个库,Dart库以及phy ...
- 【Flutter学习】之动画实现原理浅析(二)
1. 介绍 本文会从代码层面去介绍Flutter动画,因此不会涉及到Flutter动画的具体使用. 1.1 Animation库 Flutter的animation库只依赖两个库,Dart库以及phy ...
- Flutter Weekly Issue 52
教程 一个易迁移.兼容性高的 Flutter 富文本方案 复杂业务如何保证Flutter的高性能高流畅度? 插件 flutter_color_models A wrapper for the Dart ...
随机推荐
- 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 ...
- MQ的面试题
MQ的优点和缺点? 优点:解耦 异步,削峰 解耦: 所以需要用来解耦: 异步: 解决方法: 削峰: 解决方法是: 缺点:降低高可用性.增加系统的复杂程度.一致性问题 降低高可用的原因:系统引入的外部依 ...
- 【Java】《Java程序设计基础教程》第四章学习
4.1 类的封装 封装指的是将东西包装在一起,然后以新的完整形式呈现.包含两个意义: 1). 把对象的全部属性和方法结合在一起,形成一个不可分割的独立单位(即对象). 2). 信息隐藏,即尽可能隐藏对 ...
- 什么情况下使用large training data会非常有效
收集大量的数据可能比算法的优劣更重要 Banko和Brill在2001年做了一个研究,是关于在句子中对易混单词进行识别,画出了上图的右边的那个图,这个图显示了对于不同的算法,它们的表现相似,但是随着t ...
- HDFS日志的查看总结
HDFS日志查看的两种方式:HDFS安装目录中的logs中和HDFS WEB UI上 HDFS安装目录中的logs中看日志 我们分别在master.slave1以及slave2上安装了HDFS,只 ...
- Vue 实例成员
Vue 一. 什么是Vue 可以独立完成前后端分离时 Web项目的JavaScript框架 二.为什么学Vue 前端三大主流框架:Angular React Vue Vue结合了其他框架优点.轻量级. ...
- pt100、pt1000,和热电偶
最近温度测试这块,已使用过pt100.pt1000,和热电偶,这里进行大致的总结.1.pt系列pt100和pt1000的精度相比较,1000更加精细,毕竟他的电阻值更加大.两个电阻都是有分度表的,pt ...
- POJ 2778 DNA Sequence (矩阵快速幂 + AC自动鸡)
题目:传送门 题意: 给你m个病毒串,只由(A.G.T.C) 组成, 问你生成一个长度为 n 的 只由 A.C.T.G 构成的,不包含病毒串的序列的方案数. 解: 对 m 个病毒串,建 AC 自动机, ...
- 新建Class文件时,添加作者版权注释声明
以安装路径C盘为例,各版本路径如下: VS2015:C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\ItemTempla ...
- [Shell]利用JS文件反弹Shell
0x01 模拟环境 攻击: kali ip: 192.168.248.132 测试: windows 7 x64 ip: 192.168.248.136 0x02 工具地址 https://githu ...