有点意思,

import 'package:flutter/material.dart';
import 'package:rxdart/rxdart.dart'; main()=>runApp(MaterialApp(
home: MyApp(),
)); class MyApp extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return MyAppState();
}
} class MyAppState extends State<MyApp> with TickerProviderStateMixin{
GameController gameController;
AnimationController animationController;
List bricks = <Brick>[]; @override
void initState() {
super.initState();
animationController = AnimationController(vsync: this, duration: Duration(seconds: 2));
gameController = GameController(animationController);
}
@override
Widget build(BuildContext context) {
return SafeArea(child:Scaffold(
body:Container(
width: double.infinity,
height: double.infinity,
child: Column(
children: <Widget>[
Container(child: RaisedButton(child: Text('BTN'),onPressed: (){
gameController.addData();
}),),
StreamBuilder(
stream: gameController.dataBloc.dataBloc.stream,
builder: (context, snapshot){
if(snapshot.hasData){
List dataList = snapshot.data;
bricks = <Brick>[];
dataList.forEach((brickModel){
bricks.add(Brick(brickModel: brickModel,));
});
return Container(
width:350, height:400,
child: Stack(
children: bricks,
),); }else{
return Center(child: CircularProgressIndicator(),);
}
},
),
],
),
)));
}
} class Brick extends StatelessWidget {
Brick({this.brickModel});
BrickModel brickModel;
@override
Widget build(BuildContext context) {
print('$hashCode, x: ${brickModel.x}, y: ${brickModel.y}');
return Positioned(
left: brickModel.addressX, top: brickModel.addressY,
// left: 100, top: 100,
child: Container(color: Colors.red,child: Text('${brickModel.x}'),),
);
}
} class GameController {
GameController(animationController){
this.animationController = animationController;
this.animationController.addListener((){
brickModels.forEach((brickAddress){
brickAddress.update();
});
dataBloc.dataBloc.add(brickModels);
});
this.animationController.addStatusListener((status){
print('status: $status');
});
} AnimationController animationController;
Animation xAnimation;
DataBloc dataBloc = DataBloc();
List brickModels = <BrickModel>[]; addData(){
brickModels.add(BrickModel(x: 120, y: 130, oldX: 30, oldY: 30,addressX: 50, addressY: 50, animationController: animationController));
brickModels.add(BrickModel(x: 200, y: 40, oldX: 130, oldY: 60,addressX: 50, addressY: 50, animationController: animationController)); brickModels.forEach((brickAnimation){
brickAnimation..createAnimation();
});
animationController.forward();
}
} class BrickModel {
double x, y, oldX, oldY, addressX, addressY;
Animation xAnimation, yAnimation;
AnimationController animationController;
createAnimation(){
if(x!=oldX || y!=oldY){
xAnimation = Tween(begin: oldX, end: x).animate(animationController);
yAnimation = Tween(begin: oldY, end: y).animate(animationController);
}
} update(){
if(x!=oldX || y!=oldY){
addressX = xAnimation.value;
addressY = yAnimation.value;
print('updating: x: $x, y: $y');
}else{
print('no need to updated x:$x, y:$y, oldX:$oldX, oldY:$oldY');
}
}
BrickModel({this.x, this.y, this.oldX, this.oldY, this.addressX, this.addressY, this.animationController});
} class DataBloc {
ReplaySubject dataBloc = ReplaySubject();
}

  

练习bloc , 动画的更多相关文章

  1. Flutter 状态管理之BLoC

    在正式介绍 BLoC之前, 为什么我们需要状态管理.如果你已经对此十分清楚,那么建议直接跳过这一节.如果我们的应用足够简单,Flutter 作为一个声明式框架,你或许只需要将 数据 映射成 视图 就可 ...

  2. 动画requestAnimationFrame

    前言 在研究canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval 但是jQuery中还是采用了s ...

  3. 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  4. CSS 3学习——animation动画

    以下内容根据官方文档翻译以及自己的理解整理. 1.  介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...

  5. javascript动画系列第三篇——碰撞检测

    前面的话 前面分别介绍了拖拽模拟和磁性吸附,当可视区域内存在多个可拖拽元素,就出现碰撞检测的问题,这也是javascript动画的一个经典问题.本篇将详细介绍碰撞检测 原理介绍 碰撞检测的方法有很多, ...

  6. 虾扯蛋:Android View动画 Animation不完全解析

    本文结合一些周知的概念和源码片段,对View动画的工作原理进行挖掘和分析.以下不是对源码一丝不苟的分析过程,只是以搞清楚Animation的执行过程.如何被周期性调用为目标粗略分析下相关方法的执行细节 ...

  7. Visaul Studio 常用快捷键的动画演示

    从本篇文章开始,我将会陆续介绍提高 VS 开发效率的文章,欢迎大家补充~ 在进行代码开发的时候,我们往往会频繁的使用键盘.鼠标进行协作,但是切换使用两种工具会影响到我们的开发速度,如果所有的操作都可以 ...

  8. transtion:过渡动画

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #4f5d66 } p.p2 { margin: 0.0px 0 ...

  9. 再谈CAAnimation动画

    CAAnimaton动画分为CABasicAnimation & CAKeyframeAnimation CABasicAnimation动画, 顾名思义就是最基本的动画, 老规矩先上代码: ...

随机推荐

  1. 冰多多团队-第三次Scrum会议

    冰多多团队-第三次Scrum会议 会议基本情况 会议时间:4月9日 21:30 - 21:45 会议地点:新主楼F座2楼沙发休息处 工作情况 团队成员 已完成任务 待完成任务 zpj 接入Action ...

  2. dubbo连接过程

    场景1 启动时 dubbo服务提供端在Zookeeper上注册的节点目录:假设接口名称是:com.bob.dubbo.service.CityDubboService dubbo服务提供端连接到注册中 ...

  3. Centos7.6使用yum安装PHP7.2

    Centos7.6使用yum安装PHP7.2 1.安装源 安装php72w,是需要配置额外的yum源地址的,否则会报错不能找到相关软件包. php高版本的yum源地址,有两部分,其中一部分是epel- ...

  4. Angular4.0 探索子路由和懒加载 loadChildren

    参考文章: Angular4路由快速入门  http://www.jianshu.com/p/e72c79c6968e Angular2文档学习的知识点摘要——Angular模块(NgModule)h ...

  5. Synchronize深入

    前言:    synchronize会使用,但是对于深层次的知识,不是很清楚,故整理一篇博客. 简介:   能够保证在同一时刻,最多只有一个线程执行该端代码,以达到保证并发安全效果. 两种用法: 对象 ...

  6. mysql 得到指定时间段的日期

    set @startDate='2019-01-01'; set @endDate='2019-04-01'; DAY) AS DAY FROM ( SELECT a.a ) AS a ) AS b ...

  7. 使用VEGAS2(Versatile Gene-based Association Study)进行gene based的关联分析研究

    gene-based关联分析研究是SNP-based关联分析研究的一个补充. 目前有很多工具支持gene-based关联分析研究,比如GCTA,VEGAS2等. 下面主要介绍一下怎么用VEGAS2做g ...

  8. PAT 甲级 1020 Tree Traversals (25分)(后序中序链表建树,求层序)***重点复习

    1020 Tree Traversals (25分)   Suppose that all the keys in a binary tree are distinct positive intege ...

  9. java导出pdf功能记录

    这几天已在做处理导出pdf文件的功能,摸索了几天总算可以了.记录下这几天遇到的问题. 1.网上基本都是基于Itext5和Itext7来处理的.我最终是在Itext5上成功了,itext7应该是模板出问 ...

  10. element ui 下拉框绑定对象并且change传多个参数

    废话不说直接上代码说明真相. <template> <div class="hello"> <span>可以设置的属性 value-key=&q ...