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 ...
随机推荐
- test20190504 行走
行走(walk.cpp/c/pas) 题目描述 "我有个愿望,我希望走到你身边." 这是个奇异的世界,世界上的 n-1 条路联结起来形成一棵树,每条路有一个对应的权值 ci. 现在 ...
- HashMap的个别方法
static final int DEFAULT_INITIAL_CAPACITY = 1 << 4; // 16 默认初始容量 16 static final int MAXIMUM_C ...
- Python如何实现doc文件转换为docx文件?
Python如何实现doc文件转换为docx文件? 在开发过程中遇到一个关于读写doc和docx的问题: 一个文件夹中有两种文件, 一种为doc结尾, 一种为docx结尾, 需要将这些文件全部重命名. ...
- centos 环境下安装maven
安装Maven Maven的下载地址:http://maven.apache.org/download.cgi这里以最新的3.2.3版本为例进行安装,在这之前需要确保机器上已经安装了JDK. 首先下载 ...
- 使用fastjson 进行jsonObject转实体类对象
使用fastjson 进行jsonObject转实体类对象 1 <dependency> 2 <groupId>com.alibaba</groupId> 3 ...
- NoSql数据库使用半年后在设计上面的一些心得 (转载)
NoSql数据库这个概念听闻许久了,也陆续看到很多公司和产品都在使用,优缺点似乎都被分析的清清楚楚.但我心里一直存有一个疑惑,它的出现究竟是为了解决什么问题? 这个疑惑非常大,为此我看了很多分析文章, ...
- web场景的监控
在一台可以连外网的主机上创建web场景, 添加步骤,zabbix可以步骤化web页面,例如,登陆操作,正常操作是要先验证用户获取token,step1就可以是先访问token页面,获取到返回的toke ...
- SaltStack 在 Windows 上的操作基础
SaltStack 在 windows上的操作基础 1.删除文件: salt '172.16.3.11' file.remove 'D:\downup\111.msu' 2.删除文件夹 salt '1 ...
- matlab 万能实用的非线性曲线拟合方法
——转载网络 在科学计算和工程应用中,经常会遇到需要拟合一系列的离散数据,最近找了很多相关的文章方法,在这里进行总结一下其中最完整.几乎能解决所有离散参数非线性拟合的方法 第一步:得到散点数据 根据你 ...
- redis系列(五):搭建redis-cluster集群
1.为什么要用redis-cluster a.并发要求 redis官方声称可以达到10万每秒,但是如果业务需要每秒100万条呢?b.数据量太大 一台服务器的内存正常是16-256G,如果业务需要500 ...