未加星标

在Flutter中使用Flare构建的动画

字体大小 | |
[数据库(综合) 所属分类 数据库(综合) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

在看Flutter Live的时候,Flare演示看起来很牛逼,而且挺好玩的(对于一个不会设计的程序猿),所以就撸了个demo玩玩。

介绍

在Flutter Live,2Dimensions宣布即将推出Flare,这是一款非凡的新工具,可供设计师创建矢量动画,可直接嵌入到Flutter应用程序中并使用代码进行操作。


在Flutter中使用Flare构建的动画

使用Flare构建的动画可以作为窗口小部件嵌入到现有的Flutter应用程序中,允许它们参与完整的合成器并与其他文本,图形图层甚至UI小部件重叠。以这种方式集成可以将动画从其他体系结构的“黑盒子”限制中解放出来,并允许设计人员和开发人员之间的持续协作直到应用程序完成。Flutter和Flare之间的这种紧密集成为想要创造高度完美的移动体验的数字设计师和动画师提供了独特的引人注目的产品。

比较大的一个优势:Flare消除了在一个应用程序中设计,在另一个应用程序中设置动画,然后将所有这些转换为特定于设备的资产和代码的需要。

在Flutter使用Flare构建的动画 1. 导出Flare构建的动画的文件

www.2dimensions.com/explore/pop… 网站上面已经有很多现成的动画实例,可以直接拿来用就行。

点击其中的一个动画,然后页面右上角的OPEN IN NIMA.


在Flutter中使用Flare构建的动画
在Flutter中使用Flare构建的动画

点击Animate页面,就可以看到左下角,会显示所拥有的动画Animations

在Export to Engine菜单中,选择Generic作为引擎选项。将其他设置保留为默认值,然后按导出。这将生成并下载带有Robot.nima文件和Robot.png文件的zip文件。

2. 在pubspec.yaml中添加Nima的依赖项 dependencies: flutter: sdk: flutter nima: ^1.0.0 复制代码 3. 将下载的动画文件添加到assets文件夹里面,并在pubspec.yaml中声明文件 assets: - assets/ - assets/robot.nima - assets/robot.png 复制代码 4. NimaActor的用法 class NimaActor extends LeafRenderObjectWidget{ final String filename;//动画文件的路径 final BoxFit fit;//设置填充的模式 final Alignment alignment;//设置对齐方式 final String animation;/*按我理解,就是一个动画文件,可能会包含多个动画状态,每个动画状态对应唯一的一个字符串。 根据传进去的Animation的名字,播放对应的动画。就比如一个人形动画,有跳的动画,有走的动画, 根据所传的animation的名字,播放对应的动画 */ final double mixSeconds;//从一个动画切换到另一个动画之间的时间 final bool paused;//是否暂停动画 final NimaAnimationCompleted completed;//动画完成时提供的回调 final NimaController controller;//控制器 } 复制代码 5. 在Flutter中显示Flare构建的动画

首先是导入nima_actor.dart,这样只后就可以使用用来显示动画的NimaActor小部件

import 'package:nima/nima_actor.dart'; //省略部分代码 @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text(widget.title), ), body: new NimaActor("assets/robot", alignment: Alignment.center, fit: BoxFit.contain, animation: "Flight", ), ); } 复制代码
在Flutter中使用Flare构建的动画
6. 总结

优势就是那样咯,Flare消除了在一个应用程序中设计,在另一个应用程序中设置动画,然后将所有这些转换为特定于设备的资产和代码的需要。

动画设计果然还是得设计师来搞,然后我们之间导出来到Flutter中使用就可以来。看起来挺好玩的,有空的时候大家可以撸个动画demo玩玩.

本文数据库(综合)相关术语:系统安全软件

代码区博客精选文章
分页:12
转载请注明
本文标题:在Flutter中使用Flare构建的动画
本站链接:https://www.codesec.net/view/621290.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 数据库(综合) | 评论(0) | 阅读(132)