微信号:DianrongMafia

介绍:点融黑帮——一个充满激情和梦想的技术团队,吸引了来自金融及信息科技领域的顶尖人才.我们正在用技术创新改变传统金融.

AE能做的动效,都能在App中实现了?

2017-10-15 19:00 董浩龙


我们总是能在dribble等网站看到一大堆酷炫吊炸天的动效。而在现实的App中却很难看到。除了它们都有些过度设计的倾向之外,最后没有在App上出现的很大一个原因是因为做不出来。


现在很多小公司的实际情况是,你能想出100种动效方案,工程师就能给你说出101种做不出来的原因。


至于这101种做不出来的原因里,一大部分原因是动效真的很难写。为了写个动效,用上几百行代码也是常有的事。如果你还不说清楚动效的具体原理,直接扔个视频给工程师,然他看着办。那么就是写出来了,十有八九也不是你想要的效果。弄到最后只能用GIF,而GIF对使用的场景又有着极大的限制。 


图片来自:https://dribbble.com/shots/3281246-Airplane-Animation


如上面的飞机尾焰,是整个设计的最大亮点。如果你是用了AE里内置的一些特效做出来的,也就是说你也不能很清楚的描述飞机尾焰产生的具体原理,那你在和工程师沟通时会显得特别困难,毕竟你总不能让工程师在开发的时候调用AE里面的功能吧。


一年前,Airbnb着手准备解决这个动效做不出来的难题。现在他们给出的解决方案是Lottie,并已将它开源。


Airbnb是这么介绍Lottie的:

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.


大概意思就是说它是一个第三方library,可以实时渲染After Effect里做出来的动画,用起来就像调用切图一样方便。这里可能会有一个误区,它并不是直接将AE里的动画转换成iOS或者Android的代码,然后工程师直接复制进去就可以了。 


动画转换原理


以iOS 为例,首先你需要通过第三方AE插件Bodymovin将你的动画导出成JSON格式的数据,然后再在iOS 开发的时候使用Lottiet将JSON格式的数据转换成原生动画。

下面就举一个具体的列子来说明下如何使用Lottie。 



首先我在AE里面做了这样一个动画。


第一步使用Bodymovin,将动画转换成JSON格式的。这个AE插件其实是为了将动画转成Web格式的,转好以后其实已经可以放到Web上去了。 


导出的JSON文件


我们的目标是让动画在原生的环境下播放,这个时候就该Lottie出场了。


————-  以下内容会出现少量代码,会感到不适者可快速通过  —————-


首先在你原有的iOS 项目里面加入Lottie,同时将你之前导出的JSON文件也加进去。


然后在自己的项目里import Lottie 。


接下来只需要创建一个LOTAnimationView就可行了,你可以简单将它理解为是一个放图片的容器,正常情况下我们使用的是一个imageView作为容器,并将设计师提供的切图放在里面。而这个LOTAnimationView里面放的则是我之前导出的动画。



let animationView = LOTAnimationView.animationNamed(“demo")



上面的”demo”就是AE里导出的JSON文件的名字,接下来只需调用一下播放就能开始播放动画了。


animationView?.play


————-   代码部分结束,可以睁眼了  —————-


iOS 下运行的效果


可以看到这个动画和AE里的有些区别,最后炸开的效果没有了。炸开的效果我是用Repeater做的,实际上只是做了一个,其它的都是重复这一个的效果。显然Lottie并不支持Repeater。Airbnb说他们会尽量让Lottie支持更多AE里面的功能(想了解支持的AE里的功能可以看这里:https://github.com/airbnb/lottie-ios)。虽然现在并不能做到只要你能在AE里做出来的,就能转成原生动画,不过个人认为,现在支持的功能也够用了。


既然最后炸开的效果不能用Repeater做了,那就老老实实自己一个个复制出来后再调整。调整好后重新导出JSON文件,放到iOS项目里,这次就可以正常播放了。


那么Lottie到底支持对动画进行哪些操作呢。我暂时还没有在官网找到详细的API说明,根据我实际的试用和一些介绍,大致找到了这些主要功能:


play/pause  暂停/播放。

resize  缩放。因为整个图都是根据代码生成的,所以不存在放大失真的问题,可以任意缩放。并支持aspectFit, aspectFill scaleFill缩放模式。

loop 循环,可以让动画循环播放。

Duration 动画时长,对的,即使AE里导出的文件已经包含时长了,但是你还是可以通过代码重新调整时长。

speed up/slowed down 加速/减速 可以控制动画的播放速度。

Progress 动画进度,数值为0-1,这个相当于是动画的进度条,你可以通过手势等一系列方式来控制动画的进度。 


Lottie 主要功能


通过试用,大概可以把Lottie理解为一个动画播放器。和我们常用播放器一样,你可以播放,快进,拖动进度条等。而从AE里面导出来的JSON 文件就是播放的内容。

了解了上面这些东西,就可以分析一下Lottie的使用场景了。


尽管Lottie提供了很多种控制方式,但是却不能改变播放的内容。回到文章开头的飞行动效,能否使用Lottie来实现呢?答案似乎是否决的,即使可实现Calgary到Moscow这条飞行路线,一旦换一下地点,Lottie就无能为力了,毕竟动画的内容里只有这一条路线。


总结:Lottie能让AE里的动画在原生环境下播放,同时还支持对动画的一些交互,大大地节省了开发的时间。即使它并不支持AE里所有的功能,但是对于App的动效来说也是足够用了。Lottie并不支持修改动画里面的内容,对于内容会变化的动效,Lottie并不适用。Lottie最合适的使用场景是做动态图标,引导页面等内容相对独立的动效。





文章转载自:点融设计中心DDC

DDC隶属于点融技术部—点融黑帮



点击回顾往期精彩内容


监测数组变动的两种实现

React 中使用context实现数据穿越

帮助你发现问题核心本质的简易方法

Python3异步编程

python音频库dejavu原理浅析

视错觉与UI元素间的可能

今天我们来聊聊公司估值

那些工程师们玩的聚会桌游

从Java看字符编码

浅析Spring AOP

香港金融科技周即将开启,点融成为钻石赞助商

Vue世界中的Redux——Vuex

点融荣登“中国网贷先锋榜”

Affordance杂谈

浅谈金融类APP测试

今天我们来谈谈信息收集这件小事

用Django编写后端任务流程



想了解更多请关注我们



 
点融黑帮 更多文章 监测数组变动的两种实现 React 中使用context实现数据穿越 帮助你发现问题核心本质的简易方法 Python3异步编程 如何利用大数据来解决中国的巨大的信贷差距问题
猜您喜欢 你为什么跳槽?真正原因找到了吗? 手把手教你用上微信小程序,看完必懂! 滴滴、大疆、美团等独角兽公司的11个共性【九合分享】 2016 FreeBuf互联网安全创新大会 | Hack Demo环节征集【进行时】 Rails中如何使用jsonp实现跨域访问