lottie动画素材网站-Lottie - 让动画的实现变得如此简单

正好最近发现一个很好玩的组件,就和大家分享一下。

这是一个动画库,由Airbnb产品,对,就是那个宣布放弃使用React Native的Airbnb,这让我一个用RN做APP的很是尴尬。但是这个动画库还是很好用的,名字叫Lottie,反正就是个名字,也不知道什么意思,估计Airbnb的设计师叫Lottie吧。

这个东西本来是用在Android/ios的,Airbnb还特意做了个RN版本,不过本质上也是用的原生,所以差不多。其实流程很简单,就是用AE做出动画,用bodymovin插件把动画导出成json,Lottie会解析这个json并且渲染出来。看个官方的例子吧:

效果还是蛮不错的,使用起来也很简单,具体可以去看官方文档。

地址:

好,那么问题来了,一个直男程序员,根本不懂设计,该怎么办?去哪找个设计师帮忙做这个?要是能找到愿意帮忙做动画的设计师,还能没有女朋友?还用独自一人gay里gay气的望穿秋水吗?

作为一个开源的组件,秉持着开源的精神,总有设计师们愿意分享自己的设计。所以,记住这个网站,不一定有用~

地址:

/

当然,也许设计师做出来的东西的颜色不如你意,但那个json文件你还不会改,没关系,记住这个地址,你可以随便改颜色。

地址:

/

最后,秉持着实践出真知的原则,我随手做了个Toast组件,放在了我的github上,有兴趣的童鞋可以去看看,请多指教~

地址:

疫情期间,在线生活迎来爆发 ,视频行业成了广大网民放松娱乐和了解疫情、学习防护知识的重要平台。

短视频行业的日活用户规模较平日增加 16.7%,日人均使用时长较平日增加 9.3%。长视频成为很多网友在家消磨时间的方式。腾讯视频独播剧《三生三世枕上书》和芒果TV 独播剧《下一站是幸福》,更是让平台日活分别增加 22% 和 26%。

可以说,视频行业的利好趋势,基本上不受疫情影响。短期内疫情会带来较大增幅,但是疫情过去之后还会保持自己的增长节奏。

这几年也积累了一些关于视频编辑和相关产品的经验。今天来介绍一款可以将AE(Adobe Effect)文件导出json格式的工具,名叫lottie。

第一次接触它是在3年前,做视频社交的时候,需要做视频编辑功能,后来因为产品方向的变革,没有使用成功,但第一次的接触让阁主认识到这个软件的存在。

最近又在做视频模板相关的需求,做一个可编辑的视频模板,用户只需要在模板填充内容,就可以使用已有的酷炫视频资源,于是又接触到Lottie 。

当时遇到一个什么样的问题呢,设计师可以用AE(Adobe Effect)设计出各种酷炫的视频效果,但开发真的要将设计师所做的效果显现出来并适配各个系统和各种大小的屏幕,会耗费很大的工程量,成本比较大,为了尽量缩小开发成本,于是引用了lottie。

ottie最大的好处,就是

可以将做好的AE文件,直接导出json文件,让开发直接运用

,基本上实现了0成本的开发量,真是太棒了,大大减少了设计师和开发之间的沟通成本。

1. 先安装Adobe Effect,划重点,最好是安装英文版本的。

lottie是由Airbnb团队研发出来的,因为是国外的公司,所以汉化版本,或多或少会出现各种兼容的问题,阁主在这个上面是吃了很多亏的。

但别担心,各个设计软件的界面长得都差不多,基本能猜到各个图标是干什么,以及相应的操作提示是什么意思,哪怕有一两个单次不认识,网上翻一下也就都懂了,界面英文不会太难。

2.在公众号后台回复“Lottie”,即可得到相应的安装文件文件。

安装文件也是英文版本,解压后有2个文件,1个是

ZXP Installer

,另一个是

,先安装ZXP Installer,安装好了之后打开,会出现如下界面。bodymovin是设计师用的插件,lottie是开发侧要用的文件json文件,一般对外将两者形成的系统称为lottie。

然后将拖到界面去就完成了安装。

1.设置AE脚本权限。

路径为在【 AE-首选项-常规 】中勾选 【允许脚本写入文件和访问网络】,英文路径就是【Adobe Effects】-【Preferences】-【Scripting&Expressions】-勾选【Allow Scripts to Write Files and Access Network】,如下图

2.先用AE做好你想要的视频,这一步按各自的想要做的内容来;

3.导出。导出路径为【Windows】-【Extensions】-【Bodymovin】,如下图

4.选择相应要导出的文件,以及选择导出的路径,如下图

5.做好Bodymovin的设置,设置项如下图

6.点击绿色按钮

“Render”

就大功告成了。

如果出现如下图的现象,插件卡在某个图片上,导不出来,可以尝试以下几个方法:

1.在使用bodymovin的时候

将电脑的语言系统也换成英文

,如果不习惯,不用的时候再换回来中文。系统语言有时候也会影响导出的成功率,阁主用的是正版AE2020会遇见语言问题,用2017英文版就不会,也跟AE软件本身版本相关。

2.导出json的路径如果含有空格,也可能导致不能导出,

直接导出到桌面

是最直接的。

3.太复杂的动画可能导出会有问题,简单的遮罩是支持的,

建议不要用太复杂的逻辑做动效

。

最后,总结一下,为了跟上时代的潮流,拓展自己的技能,可以尝试下视频相关的设计需求。而Lottie是其中能帮助团队节省开发效率,让设计师专心设计动效掌握主动权的工具。

如想尝试,可在公众号后台回复

“Lottie”

,即可得到相应的安装文件文件。

往期精彩文章

《关于交互设计的思维抽象》

《在家办公是要写日报的》

《B端设计之导航》

引入lottie库 ( >.< )

在vue中引入lottie非常非常简单

1.安装vue-lottie包

npm install --save vue-lottie

2.全局引入vue-lottie

在引入并注册全局组件即可

import lottie from 'vue-lottie';

('lottie', lottie)

当然你也可以局部引入 ~ o ~

3.引入你的lottie资源

在文中顶部lottie资源网站可以下载相应的资源,下载下来的文件保存到项目的文件夹下

// 第一步:script中引入资源

import * as animationData from "../assets/lottie/";

// 第二步:使用组件

<lottie :options="defaultOptions" :height="200" :width="200" v-on:animCreated="handleAnimation" />

// 第三步:data里面添加相应属性

data(){

return {

defaultOptions: { animationData: animationData },

animationSpeed: 1,

anim: {}

}

}

//第四步:定义方法

methods: {

handleAnimation: function(anim) {

= anim;

(anim); //这里可以看到 lottie 对象的全部属性

},

}

最后贴上vue-lottie作者的github地址

vue-lottie

总结

以上所述是小编给大家介绍的在vue里添加好看的lottie动画,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!