[-Flutter趣玩篇-] 出神入化的Align+动画
龙少:上一个Align玩的出神入化。现在有个需求,让一个组件以某个函数图像动起来。你说咱们要不先去找块砖头再和设计谈谈。
- | - |
---|---|
捷特: 别激动,都是成年人。多大点事,有哥在。
龙少:有什么好主意。
捷特: Align。
龙少:神TM又Align,能让你水两篇文章,这么厉害?
捷特:当然Animation也是本文的要点
代码实现
捷特噼里啪啦三分钟搞定:实现好了sin运动,自自己封装一下
龙少:少侠请留步,这是你的文章好吧,我是导演叫来打酱油的。
捷特:想偷个懒都不行,哎。
class MathRunner extends StatefulWidget {MathRunner({Key key,}) : super(key: key);@override_MathRunnerState createState() => _MathRunnerState();
}class _MathRunnerState extends State<MathRunner>with SingleTickerProviderStateMixin {AnimationController _controller;Animation animationX;double _x = -1.0;double _y = 0;@overridevoid initState() {_controller =AnimationController(vsync: this, duration: Duration(seconds: 3));animationX = Tween(begin: -1.0, end: 1.0).animate(_controller)..addListener(() {setState(() {_x = animationX.value;_y = f(_x);});});super.initState();}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return GestureDetector(onTap: () {_controller.repeat(reverse: true);},child: Container(width: 300,color: Colors.grey.withAlpha(33),height: 150,child: Align(alignment: Alignment(_x, _y),child: CircleAvatar(backgroundImage: AssetImage("images/icon_head.png"),),),),);}double f(double x) {double y = sin(pi * x);return y;}
}
复制代码
实现思路
捷特:用一个AnimationController作为0~1的动画器,再使用Tween给这个动画器加buff,使其在-1 ~ 1间运动,成为animationX。 上一篇也说了Align的出神入化之处 现在只需要通过
_y = f(_x);
动态修改位置即可。
简单封装
typedef FunNum1=Function(double t );
class MathRunner extends StatefulWidget {MathRunner({Key key, this.child, this.f, this.g,this.reverse=true}) : super(key: key);final Widget child;final FunNum1 f;final FunNum1 g;final bool reverse;@override_MathRunnerState createState() => _MathRunnerState();
}class _MathRunnerState extends State<MathRunner>with SingleTickerProviderStateMixin {AnimationController _controller;Animation animationX;double _x = -1.0;double _y = 0;@overridevoid initState() {_controller =AnimationController(vsync: this, duration: Duration(seconds: 3));animationX = Tween(begin: -1.0, end: 1.0).animate(_controller)..addListener(() {setState(() {_x = widget.f(animationX.value);_y = widget.g(animationX.value);});});super.initState();}@overridevoid dispose() {_controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return GestureDetector(onTap: () {_controller.repeat(reverse: widget.reverse);},child: Container(child: Align(alignment: Alignment(_x, _y),child: widget.child,),),);}
}
复制代码
捷特:sin运动,简单
Container(width: 150,height: 150,child: MathRunner(f: (t)=>t,g: (t)=>sin(t*pi),child:CircleAvatar(backgroundImage: AssetImage("images/icon_head.png"),)));
复制代码
捷特:圆形旋转,走你
var circle=Container(width: 150,height: 150,child: MathRunner(reverse: false,f: (t)=>cos(t*pi),g: (t)=>sin(t*pi),child: CircleAvatar(backgroundImage: AssetImage("images/icon_head.png"),),));
复制代码
椭圆运动:so easy (下面是四个倾斜的椭圆环绕)
Container(width: 150,height: 150,child: MathRunner(reverse: false,f: (t)=>cos(t*pi),g: (t)=>0.6*sin(t*pi),child:CircleAvatar(backgroundImage: AssetImage("images/icon_head.png"),
)));
复制代码
纯真的笛卡尔心形线,拿去:
var love=Container(width: 100,height: 100,child: MathRunner(reverse: false,f: (t)=>1*(2*cos(t*pi)-cos(2*t*pi)),g: (t)=>1*(2*sin(t*pi)-sin(2*t*pi)),child:Ball(color: Colors.red,)));
复制代码
龙少:其实这个需求不是设计提的,只是我想做个心形线给巫缨,兄弟却之不恭
捷特: ....
龙少: 昨天我从小学一年级的数学看到六年级。感觉真是温故而知新啊,站在如今的角度重新审视知识,会有完全不一样的想法。等我今天看完初中数学,应该也能和你一样厉害。
捷特: 啧啧,虽然至今为止没有超过初中数学知识
。不过,看来不让你体验一下离散数学
的恐怖,你还真就小瞧了我。
本文到此接近尾声了,如果想快速尝鲜Flutter,《Flutter七日》会是你的必备佳品;如果想细细探究它,那就跟随我的脚步,完成一次Flutter之旅。
另外本人有一个Flutter微信交流群,欢迎小伙伴加入,共同探讨Flutter的问题,本人微信号:zdl1994328
,期待与你的交流与切磋。
满纸荒唐言,一把辛酸泪。都言作者痴,谁解其中味。
[-Flutter趣玩篇-] 出神入化的Align+动画相关推荐
- [-Flutter 自组篇-] 蛛网图+绘制+动画实践
在Android的时候自定义过蛛网图,花了半天时间.复刻到Flutter只用了不到20分钟 不得不说Flutter中的Canvas对安卓玩家还是非常友好的,越来越觉得Flutter非常有趣. 在视图方 ...
- 第二十篇玩转【斗鱼直播APP】系列之“趣玩”界面展示
趣玩界面展示 展示效果 效果展示 效果分析 该界面就是一个UICollectionView,并且使用CollectionNormalCell展示内容即可 因为之前已经抽取了BaseAnchorView ...
- 趣玩算法--OpenCV华容道AI自动解题
学更好的别人,做更好的自己.--<微卡智享> 前言 上一期<整活!我是如何用OpenCV做了数字华容道游戏!(附源码)>实现数字华容道游戏的制作,相对来说也比较简单,所以本篇是 ...
- 开启Fluter基础之旅三-------Material Design风格组件、Cupertino风格组件、Flutter页面布局篇...
Material Design风格组件: 继续接着上一次https://www.cnblogs.com/webor2006/p/12545701.html的Material Design进行学习. A ...
- 燕雀安知鸿蒙之志,笔点酷玩 篇一百零三:燕雀焉知鸿鹄之志:华为智慧屏V65开箱初体验...
笔点酷玩 篇一百零三:燕雀焉知鸿鹄之志:华为智慧屏V65开箱初体验 2019-12-30 23:12:00 23点赞 17收藏 42评论 随着手机等智能设备的崛起,电视机已经从90年代的"家 ...
- 不用 H5,闲鱼 Flutter 如何玩转小游戏?
简介: 最近APP游戏化成为了一个新的风口,把在游戏中一些好玩的.能吸引用户的娱乐方式或场景应用在应用当中,以达到增加用户粘性,提升DAU的效果,成本较低.同时在一些需要对用户有引导性的场景,游戏化还 ...
- flutter能开发游戏吗_不用 H5,闲鱼 Flutter 如何玩转小游戏?-阿里云开发者社区...
什么是Candy引擎? Candy 是闲鱼技术团队设计开发的一款引擎: APP嵌入式的.轻量级的.易于开发.性能稳定的互动引擎: 绘制系统高度融合Flutter体系,游戏场景和Flutter UI支持 ...
- 2022按键精灵内存逆向新教程:乐玩篇:1-10课更新试看
大家好,我是类人猿!之前帖子是关于图文,可能很多同学看起来费劲.下面我用乐玩插件内存汇编命令给大家做一期视频关于内存逆向讲解教学.主要是针对我们主流游戏的内存读写和汇编call.hook等演示试看.内 ...
- 甄嬛传趣玩系统数据可视化分析
文章目录 前言 一.角色情况基本概览 二.1723-1730年大事件统计 三.主要角色事件统计分析 四.发生事件频繁角色统计 总结 前言 本文在完成SQL Server和vb.net结合创建的甄嬛传趣 ...
最新文章
- call_once/once_flag
- Intellij IDEA Debug 调试技巧
- What Is Text Mining?
- 第四章 Lua模块开发
- 域名授权系统源码 网站源码授权系统_单域名授权系统
- 视频 | MIT计算机科学速成课
- 平板竖屏_朱海舟吐槽iPad办公体验:大量竖屏应用缺乏适配
- matlab牛顿差值法函数,matlab牛顿插值函数
- ROW_NUMBER() OVER()函数用法;(分组,排序),partition by (转)
- 华为s5700交换机使用配置
- android axis2 webservice实例,Axis2创建WebService实例.doc
- 如何写软件概要设计?
- 浅析融媒体的发展现状和未来前景
- PassMark PerformanceTest v10.1.1004 电脑性能测试工具直装版
- 系统与漏洞的风云人物
- 在Java中使用@Scheduled定时器的时间设置。
- 上市公司广告宣传推广费-含沪深A股主板、中小企业板等(2011-2020年)
- Java的图书商城项目如何添加商品到购物车
- C\C++中getchar()函数
- oracle utl_file fcopy,ORACLE之UTL_FILE包详解