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. IDEA实用教程(十)—— 配置Maven的全局设置

    使用之前需要提前安装好Maven 第一步 第二步

  2. Java精通并发-自旋对于synchronized关键字的底层意义与价值分析以及互斥锁属性详解与Monitor对象特性解说【纯理论】

    自旋对于synchronized关键字的底层意义与价值分析: 对于synchronized关键字的底层意义和价值分析,下面用纯理论的方式来对它进行阐述,自旋这个概念就会应运而生,还是很重要的,下面阐述 ...

  3. Vuex基础 -01 -实现简易计数器 -支持 加数/ 减数/ 奇数再加/ 异步加法(setTimeout 1000ms) -单组件演示语法

    Vuex 的结构图 工程组织 Vuex的核心管理程序 store.js /* vuex的核心管理程序 */ import Vue from 'vue' import Vuex from 'vuex' ...

  4. maven中profile的使用

    转载:https://blog.csdn.net/java_collect/article/details/83870215 前言       在开发过程中,我们的项目会存在不同的运行环境,比如开发环 ...

  5. webpack起服务器报JavaScript heap out of memory

    配置如下: { "scripts": { "start": "node --max_old_space_size=4096 node_modules/ ...

  6. python - 栈与队列(只有代码)

    1. 栈: - 后进先出 class Stack(object): def __init__(self): self.stack = [] def peek(self): return self.st ...

  7. QGraphicsView,QGraphicsScene,QGraphicsItem

    参考:Qt4 开发实践第八章 图形视图QGraphicsView #ifndef DRIVEDGRAPH_H #define DRIVEDGRAPH_H #include <QObject> ...

  8. Servlet实现注册

    1.Servlet实现注册的思路: 2.工程结构 3.功能实现: (1)html实现对数据的收集: <body bgcolor="aqua"> <center&g ...

  9. 使用状态文件+vigil 监控系统状态

    vigil 是一个不错的系统可用性报告系统,具有还不错的ui 界面,同时也有通知配置,以下是一个简单的 demo 使用状态文件,以及http body 匹配的模式进行web 应用状态的监控,只是简单的 ...

  10. Problem 2 线段树

    $des$ 一个无限长的 01 序列,初始全为 0,每次选择一个区间 [l,r] 进行操作,有三种操作:1. l r 将 [l,r] 中所有元素变成 1.2. l r 将 [l,r] 中所有元素变成 ...