微信小程序源码阅读笔记1
OC开发中的异常(Excepti
Feb
8
最近，Airbnb正式在github上发布了酷炫狂拽屌炸天的移动应用库Lottie(http://airbnb.design/lottie/)。这个库的作用是在应用中native的渲染AE动画的导出（导出依赖的是bodymovin库），同时支持android，iOS和RN3个端/平台。由于AE是业界做酷炫狂拽屌炸天的动效的行业标准软件之一，如果可以直接导出的话，UE就不用啰啰嗦嗦的给FE分解动画了，FE也不用费超级大的劲儿去手动实现复杂的动画了。看这发布了10天，3个库加起来有1w4的star了，就知道大家是多么的激动～。那么这个东西到底能带给我们怎么样的体验呢，我们来尝试一下。
Hello AE
准备工作：首先我们需要把完整的工具链扒下来。除了安卓iOS开发需要的依赖库，在AE上，我们需要bodymovin提供的AE动画导出插件(htts://github.com/bodymovin/bodymovin/blob/master/build/extension/bodymovin.zxp)，并安装在AE上。如果安装成功了，我们可以看到这样一个工具：
然后我们随意新建一个合成，做一个随意的移动动画，通过这个窗口选择合成，渲染RENDER!浏览PREVIEW!没问题，同时也得到一个输出的json文件:hello-ae.json保存到本地。这样，这个工具在AE侧的操作就简单的完成了。
回到应用中，我们这里使用的是安卓，跟随教程，一个最最最基础的Hello项目改起来简直小学生都会，只需要3步：
1.配置依赖：compile 'com.airbnb.android:lottie:1.0.1'
2.把lottie渲染界面塞入布局文件中：
3.把需要使用的hello-ae.json文件挪动到app资源文件夹src/main/assets/中
就可以允许了。要注意的是，如果找不到json文件，程序会抛出异常发生崩溃，而如果无法正确解释json中描述的动画，将什么都不显示。
还好我们用于hello-ae多半都很简单，显示基本上不会出错。但是如果多试几个常用的AE功能，就发现gg了。
支持功能
因此仔细看一下Lottie的说明，我们会发现Lottie支持的功能并不是很丰富，很容易就踩到坑。那么总结一下常用功能中Lottie到底支持一些什么和不支持些什么呢：
1.图层：支持固态层和形状图层。 那么一目了然的，无法插入位图资源了（当然视频就更别想了）。同时，还不支持文本图层，还好文本图层可以通过“从文字创建形状”功能来转换为形状图层。然后其他功能，包括摄像机灯光图层(涉及3d功能)，调整图层(颜色滤镜)之类的都无法使用。
2.基本变换：五种基本变换属性，即铆点，位置，缩放，旋转，透明度都是支持的。 但是同时注意到，仅仅支持的是二维的变换，三维功能现在是完全不支持的。考虑到现在大部分AE玩家都是不3D会死星人，这个特性的缺失还是非常遗憾的。
3.其他图形属性：图层遮罩蒙板是支持的，包括蒙板的透明度设置和高端的alpha蒙板。也支持图层父子关系设置与嵌套。
4.针对形状图层：形状部分支持基本变换，分组的变换，路径变换，同时支持预订的矩形和圆形。 也就是说圆角啊多边形啊不能使用，同时那一堆非常非常好用的形状变换器也没提。
另外，形状的填充和边缘线的各种基本设置也是支持的，边缘线还专门支持了修剪路径的功能。但是实践的时候注意到，多分组的图形的时候，无法在图像叠加处挖洞，直接导致大部分文字转换的形状无法使用，不确定是否是个bug。
5.动画：以上所有的属性和特性都是为了做动画，否则就没有意义。所以动画部分支持时间和空间线性插值(默认)和贝塞尔插值和空间贝塞尔插值，当然定格插值也有。同时也支持漂浮穿梭时间功能。总之都是基本动画插值，也算是够用了。比较可惜的是没有自定义的曲线插值可以用。
文档中所列出的Lottie现在支持的功能就是这些，有点少得可怜，但是用这些也可以完成非常酷炫的效果啊。参看github页面上帖的gif上的效果，熟悉制作方式的人很快就能意识到，这些效果基本相同：
1.不需要位图素材与特殊变换，纯粹的形状图层。就像一个拥有大量动画的svg一样。
2.除了基本变换和颜色改变，其他动画都是依赖形状点的变化完成的。
确实，只要有丰富的想象力和足够的耐心，这些就足够设计出非常精美的扁平风格的动效了。因此这也应该是Lottie这个首版重点支持的内容。
另外，虽然支持功能少，生成动画类型的插件和工具完全不受影响。比如用大名鼎鼎的AE插件牛顿2生成的效果就是全部由基本变换组成的，所以可以非常方便的使用在Lottie中(不过实测导出的数据有点大)。
程序控制
回到代码层面，Lottie支持的动画控制相关功能就十分简单了：
1.动画加载：支持从资源文件，json文本和网络加载。
2.动画属性：播放进度，播放速度和是否循环播放。
3.界面：安卓iOS和RN均主要是提供的View进行渲染。其中安卓还提供Drawable可以使用。
4.事件监听：动画完成的监听(animationFinishedListener)和动画每一帧渲染的监听(animatorUpdateListener)
毕竟只用作一下简单的基本控制，实际动画按照AE导出的渲染就没问题了。如果还在这里搞花花样儿就小题大做了。
OC中头文件如下：
总结
1. Lottie功能非常专一，并且实现大家梦寐以求的功能，一万个赞！
2. Lottie虽然支持的特性较少，有一些bug。但是，a.移动应用中动效往往不需要复杂的渲染效果，现在支持的特性已经可以满足日常需求并且运行性能非常赞。b.AE中有大量的生成系插件可以将复杂的效果生成为基本动画，Lottie也可以使用。c.Lottie现在只是第一个正式版，我们其他它继续添加新的特性支持。
3. Lottie看起来更适用的场景是logo，图标，页面切换等比较轻量级，并且不需要用户交互的场景。需要交互的动画往往需要拆解分段，没法用一段动画简单的描述出来。
4. Lottie只是工具，最需要的还是UE精美且富有创意的效果设计和他们辛苦的实现工作。毕竟，AE玩家都知道，做动画真的很累！
Hello AE
准备工作：首先我们需要把完整的工具链扒下来。除了安卓iOS开发需要的依赖库，在AE上，我们需要bodymovin提供的AE动画导出插件(htts://github.com/bodymovin/bodymovin/blob/master/build/extension/bodymovin.zxp)，并安装在AE上。如果安装成功了，我们可以看到这样一个工具：
然后我们随意新建一个合成，做一个随意的移动动画，通过这个窗口选择合成，渲染RENDER!浏览PREVIEW!没问题，同时也得到一个输出的json文件:hello-ae.json保存到本地。这样，这个工具在AE侧的操作就简单的完成了。
回到应用中，我们这里使用的是安卓，跟随教程，一个最最最基础的Hello项目改起来简直小学生都会，只需要3步：
1.配置依赖：compile 'com.airbnb.android:lottie:1.0.1'
2.把lottie渲染界面塞入布局文件中：
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:lottie_fileName="hello-ae.json"
app:lottie_loop="true"
app:lottie_autoPlay="true" />3.把需要使用的hello-ae.json文件挪动到app资源文件夹src/main/assets/中
就可以允许了。要注意的是，如果找不到json文件，程序会抛出异常发生崩溃，而如果无法正确解释json中描述的动画，将什么都不显示。
还好我们用于hello-ae多半都很简单，显示基本上不会出错。但是如果多试几个常用的AE功能，就发现gg了。
支持功能
因此仔细看一下Lottie的说明，我们会发现Lottie支持的功能并不是很丰富，很容易就踩到坑。那么总结一下常用功能中Lottie到底支持一些什么和不支持些什么呢：
1.图层：支持固态层和形状图层。 那么一目了然的，无法插入位图资源了（当然视频就更别想了）。同时，还不支持文本图层，还好文本图层可以通过“从文字创建形状”功能来转换为形状图层。然后其他功能，包括摄像机灯光图层(涉及3d功能)，调整图层(颜色滤镜)之类的都无法使用。
2.基本变换：五种基本变换属性，即铆点，位置，缩放，旋转，透明度都是支持的。 但是同时注意到，仅仅支持的是二维的变换，三维功能现在是完全不支持的。考虑到现在大部分AE玩家都是不3D会死星人，这个特性的缺失还是非常遗憾的。
3.其他图形属性：图层遮罩蒙板是支持的，包括蒙板的透明度设置和高端的alpha蒙板。也支持图层父子关系设置与嵌套。
4.针对形状图层：形状部分支持基本变换，分组的变换，路径变换，同时支持预订的矩形和圆形。 也就是说圆角啊多边形啊不能使用，同时那一堆非常非常好用的形状变换器也没提。
另外，形状的填充和边缘线的各种基本设置也是支持的，边缘线还专门支持了修剪路径的功能。但是实践的时候注意到，多分组的图形的时候，无法在图像叠加处挖洞，直接导致大部分文字转换的形状无法使用，不确定是否是个bug。
5.动画：以上所有的属性和特性都是为了做动画，否则就没有意义。所以动画部分支持时间和空间线性插值(默认)和贝塞尔插值和空间贝塞尔插值，当然定格插值也有。同时也支持漂浮穿梭时间功能。总之都是基本动画插值，也算是够用了。比较可惜的是没有自定义的曲线插值可以用。
文档中所列出的Lottie现在支持的功能就是这些，有点少得可怜，但是用这些也可以完成非常酷炫的效果啊。参看github页面上帖的gif上的效果，熟悉制作方式的人很快就能意识到，这些效果基本相同：
1.不需要位图素材与特殊变换，纯粹的形状图层。就像一个拥有大量动画的svg一样。
2.除了基本变换和颜色改变，其他动画都是依赖形状点的变化完成的。
确实，只要有丰富的想象力和足够的耐心，这些就足够设计出非常精美的扁平风格的动效了。因此这也应该是Lottie这个首版重点支持的内容。
另外，虽然支持功能少，生成动画类型的插件和工具完全不受影响。比如用大名鼎鼎的AE插件牛顿2生成的效果就是全部由基本变换组成的，所以可以非常方便的使用在Lottie中(不过实测导出的数据有点大)。
程序控制
回到代码层面，Lottie支持的动画控制相关功能就十分简单了：
1.动画加载：支持从资源文件，json文本和网络加载。
2.动画属性：播放进度，播放速度和是否循环播放。
3.界面：安卓iOS和RN均主要是提供的View进行渲染。其中安卓还提供Drawable可以使用。
4.事件监听：动画完成的监听(animationFinishedListener)和动画每一帧渲染的监听(animatorUpdateListener)
毕竟只用作一下简单的基本控制，实际动画按照AE导出的渲染就没问题了。如果还在这里搞花花样儿就小题大做了。
OC中头文件如下：
typedef void (^LAAnimationCompletionBlock)(BOOL animationFinished);
@interface LAAnimationView : UIView
+ (instancetype)animationNamed:(NSString *)animationName;
+ (instancetype)animationFromJSON:(NSDictionary *)animationJSON;
- (instancetype)initWithContentsOfURL:(NSURL *)url;
@property (nonatomic, readonly) BOOL isAnimationPlaying;
@property (nonatomic, assign) BOOL loopAnimation;
@property (nonatomic, assign) CGFloat animationProgress;
@property (nonatomic, assign) CGFloat animationSpeed;
@property (nonatomic, readonly) CGFloat animationDuration;
- (void)playWithCompletion:(LAAnimationCompletionBlock)completion;
- (void)play;
- (void)pause;
- (void)addSubview:(UIView *)view
toLayerNamed:(NSString *)layer;
@end总结
1. Lottie功能非常专一，并且实现大家梦寐以求的功能，一万个赞！
2. Lottie虽然支持的特性较少，有一些bug。但是，a.移动应用中动效往往不需要复杂的渲染效果，现在支持的特性已经可以满足日常需求并且运行性能非常赞。b.AE中有大量的生成系插件可以将复杂的效果生成为基本动画，Lottie也可以使用。c.Lottie现在只是第一个正式版，我们其他它继续添加新的特性支持。
3. Lottie看起来更适用的场景是logo，图标，页面切换等比较轻量级，并且不需要用户交互的场景。需要交互的动画往往需要拆解分段，没法用一段动画简单的描述出来。
4. Lottie只是工具，最需要的还是UE精美且富有创意的效果设计和他们辛苦的实现工作。毕竟，AE玩家都知道，做动画真的很累！
渝公网安备 