在Flutter中使用Flare构建的动画

综合技术 2018-12-08 阅读原文

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

介绍

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

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

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

在Flutter使用Flare构建的动画

1. 导出Flare构建的动画的文件

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

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

点击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",
      ),
    );
  }

复制代码

6. 总结

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

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

稀土掘金

责编内容by:稀土掘金阅读原文】。感谢您的支持!

您可能感兴趣的

iOS 深拷贝浅拷贝与@property 引用计数关键字Strong,Copy,Weak,Assig... 写在文前 相信现在在写OC @property 的时候特别是对 NSString, 都已经习惯的记住了使用 copy 关键字来进行修饰。 然后我看到有些代码里面对 NSDictionary NSArray等对象却依旧在使用 strong...
IOS Supply Portal for Packet IDs I'm the Team Agent of an iOS Enterprise Program. I'm trying to add a new app id (the new app-id is never used before i...
Starting Programming: The Most Useful Tools And Re... The truth is, programming has become our reality, and it virtually powers everything around us. Regardless of whether yo...
六个方向关于iOS100个面试题,你都会了吗?... 小编这里有个自己的学习交流群681503716(验证编号:大鲨),不管你是大牛还是小白,欢迎入驻一起交流学习,在iOS的道路上我们一起成长!我也会不定时分享一些iOS面试资料和学习资料教程等干货给大家! 常见问...
Jarvis-拍立淘里面的深度学习引擎-之持续优化... 介绍 Jarvis是一款专门为手机端而设计研发的深度学习引擎,它比我们目前已知的所有开源产品都要快。在使用高通芯片的安卓手机上,其他产品在性能上甚至还没有接近于我们的。小小骄傲一下。在最开始的时候,Jarvis was heavily ...