Lottie 是Airbnb开源的一个面向 iOS、Android、Re-act Native 的动画库，能分析 Adobe After Effects 导出的动画。
不仅使用简单，还能很好地实现动效设计师设计的动画效果。
使用原生代码在各平台实现复杂的动效是一件性价比较低的事，还要考虑到适配不同屏幕尺寸。无论对设计师还是开发人员都是比较繁琐的。而使用了lottie之后，可以做到同一个文件能应用到不同的平台，还能极大地减少开发成本。
而怎样才能将设计师在AE里制作好的较为复杂的动画转换成lottie？
就是这个叫Bodymovin的AE插件，是一个可以把动效设计师在AE里做好的动画导出为json格式，然后以Android/iOS原生动画的形式在移动设备上渲染播放。能帮助设计同学很容易的将AE动画导出成代码文件提供给开发同学使用。
在21世纪初，当flash还是网页动画之王时, 每个设计师都在释放他们的创意。那时候网上炫酷炸裂的网站随处可见, 只要你装了flash播放器, 就可以正常浏览。其中有些看起来更像游戏，当时还没有像现在这么多规范约束，做的都比较随意。如果我们现在来分析它们，其中很多可能都没有符合用户体验设计原则。
随着flash的消失，HTML成为使用标准以及用户体验的规范化，那些网站消失了。现在我们浏览的大多数网站都很容易使用，阅读体验也很好……但它们看起来也很普通和相似。
在网页上落地一个动画所付出的努力和工作实在是太高了，设计师做出的动画给到开发，能实现的效果非常有限。除了成本高和繁琐外，从头开始用代码创建动画也会导致与设计稿相差甚远。直到Lottie出现，才迎来了转机。
Hernan Torrisi在2015年提出了在AE中导出动画的想法，使用他创建的一个叫Bodymovin的插件，能够导出JSON描述的动画。
他还发布了史上第一个支持该格式的渲染器，并为浏览器提供了一个基于JS的播放器。
在2017年，Airbnb的工程师看到了基于JSON的动画潜力, 编写了可以渲染JSON文件的iOS和Android库，他们称之为「Lottie」。
Airbnb的开发者将其作为一个开源平台，不仅是为了免费发布，也是为了打造一个社区。他们创建了一个github地址（https://github.com/lottiefiles）来与设计师和开发进行交流。这是一个与时俱进的好主意，使得Lottie得到快速发展。
LottieFiles（https://lottiefiles.com/）是一个独立于Airbnb的平台，设计师可以在上面「上传，测试，购买和下载动画」, 而这些只需要你有一个免费的账号。LottieFiles同时也是一个AE的插件跟Bodymoving类似，只是功能更加丰富，允许我们「预览」动画，「上传到」LottieFiles平台，保存到我们的电脑上，等等。
作为插件的时候其实是比Bodymoving功能更为丰富一些，但实际测试的时候发现，可能会由于网络问题导致刷新预览不及时的问题，这个大家可以在用的时候留意下。
①.首先确认你电脑上的AE版本，需要安装AE CC2014或更高版本。以AE CC2017为例：
②.安装Bodymovin插件
1）到Bodymovin的GitHub首页（链接：https://github.com/airbnb/lottie-web）克隆项目到本地，或者下载.zip包。
2）在项目目录的“/build/extension”目录下找到 “bodymovin.zxp” 文件，这个就是插件包了。
3）下载安装ZXP Installer（链接：https://aescripts.com/learn/zxp-installer/），打开软件，点击“File”>“Open”菜单项载入上述.zxp插件包，ZXP Installer会自动开始安装。安装完成后的软件主页面如下图所示，表示插件已成功安装。
①.打开AE，点击“编辑”>“首选项”>“常规”菜单项，选中“允许脚本写入文件和访问网络”，点击确定。
②.点击“窗口”>“扩展”>“Bodymovin”菜单项, 就可以打开Bodymovin的界面使用插件了。
③.我们在空的AE项目里，新建一个名为“合成1”的合成，并制作一段简单的动画：
④.打开Bodymovin插件窗口，可以发现“合成1”出现在了下面的列表中。选中“合成1”，设置好json文件输出位置，点击“Render”。
⑤.Bodymovin还为生成出的json文件提供了预览功能，点击插件界面上的“Preview”按钮，点击“Browse”载入刚刚生成的json文件，就会看到，动画被原汁原味地导出了：
⑥. 如果想要在web端或者手机上预览动画。你可以用浏览器打开https://lottiefiles.com/preview，拖入JASON文件即可预览动画。点击顶部右边的handoff按钮可以扫码在手机上展示（需要先在手机上安装lottie files）
①. Lottie支持的AE属性：
Lottie虽然能够满足多种场景需要，但是并非支持所有的 AE 效果。设计制作时，需要考虑该效果是否支持。否则，会导致出错或者所用效果无法生效。(注：lottie不支持AE表达式)
②. 保持简单：JSON文件应该尽可能的简洁和保持小的体积。
③. 利用好AE的能力尽可能的减少额外的关键帧，例如多使用子父级方式而不是在每一个层上都添加一遍关键帧
④. 避免使用路径关键帧，因为它们会创建一个非常大的文档，会从路径上转换所有的顶点
⑤. 避免使用Wiggle表达式和自动追踪等技术，这些技术会产生大量的关键帧，做出这么大的文件可能会使用JSON文件变得非常大，从而对性能产生大的负面影响。
⑥. 在AE中需要将任何Ai，EPS，SVG或PDF图层转换为形状图层，否则会产生错误。
⑦. 导出文件时，以1倍图导出，图形上的每个像素都将转换成iOS和Android的点单位。
⑧. 蒙版或者alpha蒙版应该尽可能的小，它们的大小将影响Lottie的性能，所以最好避免出现它们或保持它们最小。
⑨. 混合模式，如叠加，屏幕，相加还不支持。
⑩. 空图层可以使用，但为了让它正常工作，我们需要将可见打开，并将透明度设置为0。
将原本“渐变填充”的 标签 改为 "Gradient"（不带引号），然后直接导出 json。（注意：如果渐变还是黑白的话，请保存好 AE 工程文件，然后完全关闭 AE，再打开渲染一次）
当动效中含有位图时，导出的动效文件就会多出一个imags 文件夹，用于存放图片资源。导出之前可以在 bodymovin 的设置选项内可以进行相应的设置。
1). 可以通过设置项来压缩图片资源，也可以导出图片后再用压缩工具压缩。
2). 将图片转为 base64 编码并放进 JSON 文件里。这样就不用导出 images 文件夹了。但是图片转为base64 后体积会增加，并且目前只有最新版的web 和安卓端支持带 base64 的 JSON 文件的播放，iOS 以后才会加入。
这里额外需要注意的是，images 文件夹的名称和内部图片名称不可随意更改，不然 json 文件就无法调用资源，导致图片资源加载出错。
我们日常导出动效资源的时候默认生成的图片资源命名都是 ima_0 这种格式的。但是在实际使用中会调用很多个 json 文件，如果每次生成的图片名称都一样会导致加载错乱，所以需要提前规避。一种方法是让开发人员去规避，另一方面就是我们在设计之初就做好命名。
如果导入素材之前就已经命名好了就无需调整了，只需在 bodymovin 的「设置-图片资源设置里勾选保留图片名称」。导出的图片资源即可按照命名导出。
如果需要在 AE 内部修改，务必要在项目中修改素材名称，在合成里修改的只是图层名称，这样是不生效的。
我们实际工作中，经常会需要增加或者调整素材。overlord可以无缝衔接 AI 与 AE ，不仅可以将 AI 中的元素一键导入到 AE 中，还可以将 AE 中的文件导入 AI。
Overlord 具有全面而强大的, 能够满足我们导入文件的各种需要：
日常使用过程中我们只需在导出选项中，选择分层导入所选元素，即可快速将所选内容快速原位复制到AE合成中（需要 AI 画布与 AE 合成大小相同）。
当我们需要将几个部分导出为一个图层时，只需关闭分层导出，再将几个元素选中以后，点击导出即可。
综合对比以上几种方式，Overlord 对我们日常导入和编辑素材来说更加方便快捷，当然不同的方式也有不同的应用场景。大家按需使用。
其实 lottie 调用的 json 动画文件是可交互的。lottie本身会提供一个 progress 的参数，相当于动画的进度条，这个数值是可以用代码来控制的，能和手势等各种操作绑定，做到直接控制动画的播放进度。比如下拉刷新动画就可以通过 lottie 实现。
调节 lottie 动画的速度，也就相当于调节动画完成的时间，所以你可以坐在开发旁边慢慢的调节动画直到你满意为止。
调节动画的大小：宽度和高度，同理你也可以让开发给你调节动画的大小，还是让你满意为止。
通过lottie来创建动画的方法是非常令人兴奋的，因为它保持了很高的质量，易于实现，并给我们创造亮点的产品提供了条件。
因为我们是为页面打造的动画形式，而不是做一个动画视频，这里面需要适应和理解新媒体，我们需要清楚能做什么以及限制是什么。
我相信在未来，我们将能够添加更多的特性到动画里，但就目前而言，最好保持简单。要记住一个设计原则，在很多情况下，少即是多。
相关学习链接
Lottie官方：https://airbnb.design/lottie/#get-started
bodymovin：https://github.com/airbnb/lottie-web
lottie-ios：https://github.com/airbnb/lottie-ios#
lottie-for-ios-macos-and-android-and-react-native
lottie-android：https://github.com/airbnb/lottie-android
如何在buildr项目中使用Ruby？我在很多不同的项目中使用过Ruby、JRuby、Java和Clojure。我目前正在使用我的标准Ruby开发一个模拟应用程序，我想尝试使用Clojure后端(我确实喜欢功能代码)以及JRubygui和测试套件。我还可以看到在未来的不同项目中使用Scala作为后端。我想我要为我的项目尝试一下buildr(http://buildr.apache.org/)，但我注意到buildr似乎没有设置为在项目中使用JRuby代码本身!这看起来有点傻，因为该工具旨在统一通用的JVM语言并且是在ruby中构建的。除了将输出的jar包含在一个独特的、仅限ruby
在rails源中:https://github.com/rails/rails/blob/master/activesupport/lib/active_support/lazy_load_hooks.rb可以看到以下内容@load_hooks=Hash.new{|h,k|h[k]=[]}在IRB中，它只是初始化一个空哈希。和做有什么区别@load_hooks=Hash.new 最佳答案 查看rubydocumentationforHashnew→new_hashclicktotogglesourcenew(obj)→new_has
我的主要目标是能够完全理解我正在使用的库/gem。我尝试在Github上从头到尾阅读源代码，但这真的很难。我认为更有趣、更温和的踏脚石就是在使用时阅读每个库/gem方法的源代码。例如，我想知道RubyonRails中的redirect_to方法是如何工作的:如何查找redirect_to方法的源代码？我知道在pry中我可以执行类似show-methodmethod的操作，但我如何才能对Rails框架中的方法执行此操作？您对我如何更好地理解Gem及其API有什么建议吗？仅仅阅读源代码似乎真的很难，尤其是对于框架。谢谢! 最佳答案 Ru
我的假设是moduleAmoduleBendend和moduleA::Bend是一样的。我能够从thisblog找到解决方案,thisSOthread和andthisSOthread.为什么以及什么时候应该更喜欢紧凑语法A::B而不是另一个，因为它显然有一个缺点？我有一种直觉，它可能与性能有关，因为在更多命名空间中查找常量需要更多计算。但是我无法通过对普通类进行基准测试来验证这一点。 最佳答案 这两种写作方法经常被混淆。首先要说的是，据我所知，没有可衡量的性能差异。(在下面的书面示例中不断查找)最明显的区别，可能也是最著名的，是你的
几个月前，我读了一篇关于rubygem的博客文章，它可以通过阅读代码本身来确定编程语言。对于我的生活，我不记得博客或gem的名称。谷歌搜索“ruby编程语言猜测”及其变体也无济于事。有人碰巧知道相关gem的名称吗？ 最佳答案 是这个吗:http://github.com/chrislo/sourceclassifier/tree/master 关于ruby-寻找通过阅读代码确定编程语言的rubygem？，我们在StackOverflow上找到一个类似的问题：
我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态，而无需发出第二个请求。有没有办法用另一种方法做到这一点？我一直在查看文档，但似乎找不到我要找的东西。 最佳答案 在我看来，除非您需要一些真正的低级访问或控制，否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur
前言作为一名程序员，自己的本质工作就是做程序开发，那么程序开发的时候最直接的体现就是代码，检验一个程序员技术水平的一个核心环节就是开发时候的代码能力。众所周知，程序开发的水平提升是一个循序渐进的过程，每一位程序员都是从“菜鸟”变成“大神”的，所以程序员在程序开发过程中的代码能力也是根据平时开发中的业务实践来积累和提升的。提高代码能力核心要素程序员要想提高自身代码能力，尤其是新晋程序员的代码能力有很大的提升空间的时候，需要针对性的去提高自己的代码能力。提高代码能力其实有几个比较关键的点，只要把握住这些方面，就能很好的、快速的提高自己的一部分代码能力。1、多去阅读开源项目，如有机会可以亲自参与开源
嗨~大家好，这里是可莉！今天给大家带来的是7个C语言的经典基础代码~那一起往下看下去把【程序一】打印100到200之间的素数#includeintmain(){ inti; for(i=100;i 【程序二】输出乘法口诀表#includeintmain(){inti;for(i=1;i 【程序三】判断1000年---2000年之间的闰年#includeintmain(){intyear;for(year=1000;year 【程序四】给定两个整形变量的值，将两个值的内容进行交换。这里提供两种方法来进行交换，第一种为创建临时变量来进行交换，第二种是不创建临时变量而直接进行交换。1.创建临时变量来
Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u
文章目录git常用命令（简介，详细参数往下看）Git提交代码步骤gitpullgitstatusgitaddgitcommitgitpushgit代码冲突合并问题方法一：放弃本地代码方法二：合并代码常用命令以及详细参数gitadd将文件添加到仓库：gitdiff比较文件异同gitlog查看历史记录gitreset代码回滚版本库相关操作远程仓库相关操作分支相关操作创建分支查看分支：gitbranch合并分支：gitmerge删除分支：gitbranch-ddev查看分支合并图：gitlog–graph–pretty=oneline–abbrev-commit撤消某次提交git用户名密码相关配置g
