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 ...
随机推荐
- jmeter + ant + jenkins 自动化集成环境搭建
所需工具 一.jmeter 工具下载 https://jmeter.apache.org/ 配置环境JDK等及各种插件 二.Ant安装(http://ant.apache.org/) 安装Ant是为 ...
- visual studio故障修复
如果没有安装程序,直接在控制面板——>程序和功能,在列表中找到您安装的vs,右键选择更改,然后程序会启动,做一些准备.然后又三个选项,可以选择修复.
- nodejs模块化标准
commonjs 导出一个 a.js function add(a, b){ return a+b; } module.exports = add; b.js const add = require( ...
- [software test - 001] Why we need software test?
/* This is a conclusion about the software testing job. */ /* Scope: middle level software tasks, ...
- 爬虫(二)-创建项目&应用
一.回顾 上篇已经讲解了python-django的环境搭建,本次将继续上次的课程,开始创建项目及应用. 上篇的验证结果为: 本次将加上创建应用之后浏览器打开演示~ 二.创建项目 1)使用django ...
- vim、gvim 在 windows 下中文乱码的终极解决方案
vim.gvim 在 windows 下中文乱码的终极解决方案 vim ~/.vimrc 然后加入: " Gvim中文菜单乱码解决方案 " 设置文件编码格式 set encodin ...
- pyspark minHash LSH 查找相似度
先看看官方文档: MinHash for Jaccard Distance MinHash is an LSH family for Jaccard distance where input feat ...
- 使用vue打包,vendor文件过大,或者是app.js文件很大
我的解决办法: 1.把不常改变的库放到index.html中,通过cdn引入,比如下面这样: 然后找到build/webpack.base.conf.js文件,在 module.exports = { ...
- Docker初识笔记
Docker docker说白了就是:环境打包 我们能用docker什么? 1.如果配置好本地的linux环境交接给其他人,很麻烦,交接时要告诉他,装这个装那个,还可能出现问题,那我直接把这个环境放到 ...
- 样条插值法(Java)--在本地执行
该程序主要实现样条插值的目的,为本地执行java文件 该程序包含:样条插值法.读取文件,写入文件,字符型转double型方法等: 适合初学Java的人学习: 首次使用eclipse打jar包,中间很曲 ...