目录
1、iOS中GUI(Graphical User Interface 图形用户界面)
2、渲染
3、Lottie动画
1、戴明博客:https://ming1016.github.io
1、iOS中GUI(Graphical User Interface 图形用户界面)
框架对比1、现在流行的 GUI 框架除了 Cocoa Touch 外,还有 WebKit、Flutter、Texture(原名 AsyncDisplayKit)、Blink、Android GUI 等。其中,WebKit、Flutter、Texture 可以用于 iOS 开发。接下来,我就和你说说这三款 GUI 框架。
webKit框架深度介绍:https://ming1016.github.io/2017/10/11/deeply-analyse-webkit/
2、Flutter 是 Google 公司于 2017 年推出的一个移动应用开发的 GUI 框架,使用 Dart 语言编写程序,一套代码可以同时运行在 iOS 和 Android 平台。
3、Texture 框架的基本单元,是基于 UIView 抽象的节点 ASDisplayNode。和 UIView 不同的是 ,ASDisplayNode 是线程安全的,可以在后台线程上并行实例化和配置整个层级结构。Texture 框架的开发语言,使用的是苹果公司自家的 Objective-C 和 Swift。
总结对比:Texture 和其他 GUI 框架一样都是使用的应用更加广泛的 FlexBox 布局。使用 FlexBox 布局的好处是,可以让 iOS 开发者用到前端先进的 W3C 标准响应式布局。目前, FlexBox 已经是布局的趋势,连 iOS 新推出的 UIStackView 布局方式,也是按照 FlexBox 布局思路来设计的。另外,Texture 是这些框架中唯一使用异步节点计算的框架。使用异步节点计算,可以提高主线程的响应速度。所以,Texture 在节点计算上的效率要比其他框架高。
2、渲染
1、GUI 框架中的渲染,一般都会经过布局、渲染、合成这三个阶段。布局阶段要完成的主要工作,是依据渲染树计算出控件的大小和位置。WebKit 用 CSS 来布局,CSS 会提供 Frame 布局和 FlexBox 布局;Flutter 也支持 Frame 布局和 FlexBox 布局;Cocoa Touch 框架本身不支持 FlexBox 布局,但是通过 Facebook 的 Yoga https://yogalayout.com库也能够使用 FlexBox 布局。
3、Lottie动画 (官方框架链接 http://airbnb.io/lottie/#/)
首先,你可以通过 CocoaPods 集成 Lottie 框架到你工程中。Lottie iOS 框架的 GitHub 地址是https://github.com/airbnb/lottie-ios/,官方也提供了可供学习的示例。
多平台支持Lottie 支持多平台,除了 支持iOS,还支持 Android 、React Native和Flutter。除了官方维护的这些平台外,Lottie 还支持Windows、Qt、Skia 。陈卿还实现了 React、Vue和Angular对 Lottie 的支持,并已将代码放到了 GitHub 上。
1> Lottie 框架就很好地解决了动画制作与开发隔离,以及多平台统一的问题。Lottie 是 Airbnb 开源的一个动画框架。Lottie 这个名字来自于一名德国导演洛特·赖尼格尔(Lotte Reiniger),她最著名的电影叫作“阿赫迈德王子历险记(The Adventures of Prince Achmed)”。
这个框架和其他的动画框架不太一样,动画的编写和维护将由动画设计师完成,完全无需开发者操心。动画设计师做好动画以后,可以使用 【After Effects将动画导出成 JSON 文件】https://www.adobe.com/products/aftereffects.html,然后由 Lottie 加载和渲染这个 JSON 文件,并转换成对应的动画代码。由于是 JSON 格式,文件也会很小,可以减少 App 包大小。运行时还可以通过代码控制更改动画,比如更改颜色、位置以及任何关键值。另外,Lottie 还支持页面切换的过场动画(UIViewController Transitions)。
2> 使用After Effects 创作,然后使用 Bodymovin进行导出的,开发者完全不用做什么额外的代码工作,就能够使用原生方式将其渲染出来。Bodymovin 是 Hernan Torrisi 做的一个 After Effects 的插件,起初导出的 JSON 文件只是通过 JavaScript 在网页中进行动画的播放,后来才将 JSON 文件的解析渲染应用到了其他平台上。
3> 如何使用 Bodymovin 呢?
Bodymovin你需要先到Adobe 官网下载 Bodymovin 插件,并在 After Effects 中安装。使用 After Effects 制作完动画后,选择 Windows 菜单,找到 Extensions 的 Bodymovin 项,在菜单中选择 Render 按钮就可以输出 JSON 文件了。
LottieFiles网站还是一个动画设计师分享作品的平台,每个动画效果的 JSON 文件都可下载使用。所以,如果你现在没有动画设计师配合的话,可以到这个网站去查找并下载一个 Bodymovin 生成的 JSON 文件,然后运用到工程中去试试效果。
4> Lottie 实现原理实际上,Lottie iOS在 iOS 内做的事情就是将 After Effects 编辑的动画内容,通过 JSON 文件这个中间媒介,一一映射到 iOS 的 LayerModel、Keyframe、ShapeItem、DashElement、Marker、Mask、Transform 这些类的属性中并保存了下来,接下来再通过 CoreAnimation 进行渲染。这就和你手动写动画代码的实现是一样的,只不过这个过程的精准描述,全部由动画设计师通过 JSON 文件输入进来了。Lottie iOS 使用系统自带的 Codable 协议来解析 JSON 文件,这样就可以享受系统升级带来性能提升的便利。
网友评论