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 ...
随机推荐
- Ffmpeg常用转码命令
H264视频转ts视频流 ffmpeg -i test.h264 -vcodec copy -f mpegts test.ts H264视频转mp4 ffmpeg -i test.h264 -vcod ...
- awk命令笔记
awk是啥? awk(奥克)是linux中一个强大的分析工具,linux面试必考 [root@rainbol ~]# awk Usage: awk [POSIX or GNU style option ...
- tcp三次握手,四次挥手的形象类比图
- Hibernate框架的查询方式
技术分析之Hibernate框架的查询方式 1. 唯一标识OID的检索方式 * session.get(对象.class,OID) 2. 对象的导航的方式 ...
- 08 node.js 的使用
创建包 目录结构 cmd cd 到当前目录: \ 执行 npm init //创建一个包 1 2. 3. 4.包的安装 npm install jquery --save npm install ...
- 非自增编号字段,避免生成重复编号(以pdfNo编号为例)RedisLock/ReadLock
非自增编号字段,避免生成重复编号(以pdfNo编号为例) 有个场景,用户查询延误航班信息,然后生产一个编号,默认第一个编号是1000001,其后新增的编号默认自增加1.每次有人来查延误信息,如果延误信 ...
- [NgRx] Optimistically Editing Entity Data
First thing first, let's define a action to update entity: import { createAction, props } from " ...
- IDEA快速实现接口快捷方式
IDEA快速实现接口快捷方式 ALT +INSERT
- 常见的div布局
1.一列固定宽度且居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- editplus 支持lua语言语法高亮显示
找到自己的安装目录 建一个这个名字的文件 里面写上 #TITLE=LUA ; LUA syntax file written by ES-Computing. ; This file is requi ...