Feb 8

酷炫狂拽屌炸天的Lottie库初探

Lrdcq , 2017/02/08 14:07 , 程序 , 閱讀(7168) , Via 本站原創
最近,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渲染界面塞入布局文件中:
<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玩家都知道,做动画真的很累!
关键词:lottie , 动画 , aftereffect
logo