• <div id="imyhx"></div>
  • <div id="imyhx"></div>
  • 您的意见是我们 UI 中国进步的动力!
    点击立即反馈按钮,发表您的意见!
    立即反馈
    QQ群反馈
    您?#37096;?#20197;加入UI中国官方反馈群进行反馈!
    群号:302892100
    备注:反馈问题后@管理员能让我们及时了解您的意见

    成长值达到300分以上才可以发?#21152;矗

    收集成长值 先看看别人的即刻>

    设计师轻松实现动效转lottie神器-AE插件Bodymov

    原创文章 分类: 经验/观点 版权:
    9727 528 230 20
    2019-04-19
    101.3
    首页推荐


    使用原生代码在各平台实现复杂的动效是一件性价比较低的事,还要考虑到适配不同屏幕尺寸。无论对设计师还是开发人员都是比较繁琐的。

    而使用了lottie之后,可以做到同一个文件能应用到不同的平台,还能极大地减少开发成本。


    一:什么是lottie

    Lottie 是Airbnb开源的一个面向 iOS、Android、React Native 的动画库,能分析 Adobe After Effects 导出的动画。

    不仅使用简单,还能很好地实现动效设计师设计的动画效果。

    而怎样?#25293;?#23558;设计师在AE里制作好的较为复杂的动画转换成lottie?

    这时候今天的主角Bodymovin就要出场啦~~

    就是这个叫Bodymovin的AE插件,是一个可以把动效设计师在AE里做好的动画导出为json格式,然后以Android/iOS原生动画的形式在移动设备上渲染播放。

    能帮助设计同学很容易的将AE动画导出成代码文件提供给开发同学使用。

    现在我用工作中使用到的案例给大家分享Bodymovin这个插件具体的应用。


    二:Bodymovin导出案例

    针对设计师在AE里做动画会遇到用到外部?#35745;?#32032;材和完全只使用图形层制作动画的两?#26234;?#20917;,?#30452;?#20998;享这两?#26234;?#20917;的区别。

    1.有用到外部?#35745;?#32032;材制作动画

    设计师在制作动画的过程中有时候不可避免会遇到用到?#35745;?#32032;材的情况(个人建议尽可能少的去使用?#35745;?#32032;材,后面会讲到具体原因)

    我用腾讯动漫APP里的下拉刷新动效为例:

    动画预览:


    Image title



    制作这个动画的时候,动画里只有黑子眼睛和飞碟下面的线条做了细节动画,所以其余不用做细节动画的部分我用到了其他设计师提供的素材图去制作。

    AE里的截图如下:


    Image title


    检查好动画无误后即可使用Bodymovin插件进行导出。

    (导出方法后面会有具体阐述~)

    这时候需要注意,由于用到了?#35745;?#32032;材,导出来的结果除了json文件还会多一个名字为“images” 的文件夹。如下图所示:


    Image title




    这个文件夹就是用?#21019;娣拍?#22312;AE里所使用的?#35745;?#32032;材,你所使用到的?#35745;?#20250;被命名为“img_0”


    Image title



    是不是已经猜到了,如果我用了两张,三张,四张…….?#35745;?/p>

    那么在导出的json文件夹里就会出现“img_1” “img_2” “img_3”……?#28304;?#31867;推。

    这就是我刚刚说为什么要尽量控制使用外部?#35745;?#32032;材,用了更多的?#35745;?#23601;会增加导出json文件的体积,给开发造成困扰。


    2:只用到图形层制作动画

    下面我用腾讯动漫海外版搜索页面的?#25442;?#21160;效为例。

    AE中只使用图形层做出以下动画:


    Image title



    AE里截图:


    Image title


    AE里动画制作完成后就可?#28304;?#24320;Bodymovin神器啦~~

    ?#19994;?#20320;导出的json文件和你在AE里生成出来的动画预览一并给到开发小哥哥小姐姐,

    方便他们检查实现的效果是否完美还原了设计同学做出来的效果。

    还要记得同?#22791;?#21040;标注哦~~


    Image title


    用在界面的效果展示:


    Image title



    三:Bodymovin插件的安装和使用

    那这么好用的代码转换神器是如何安装和使用的呢?

    准备工具:

    1.Adobe After Effects CC 2017以上,旧版本不支持

    2.Bodymovin 插件(lottie-web-master压缩包里面)

    3.ZXP Installer 软件(用来安装Bodymovin 插件到AE使用)


    Image title


    由于时间关系,我已经打包好方便各位看官享用!啊!真香~

    https://share.weiyun.com/552FVF9


    安装方法:

    1.安装好Adobe After Effects(这个不用多说了吧!)

    2.安装ZXP Installer 软件!!(点点点点点,非常简单)

    3.打开ZXP Installer,点击“File”—“Open”菜单项载入。快捷键 win:Ctrl+O    mac:cmd+O

    在lottie-web-master文件夹—build—extension—bodymovin.zxp,这个就是插件包了,ZXP Installer会自动开?#21450;?#35013;。

    Image title



    安装完成后的软件主页面如下图所示,表示插件已成功安装。


    Image title


    4. 打开AE,要先对AE进行允许AE使用脚本设置,路径如下:


    win:Edit(编辑)—preferences(首选项)—general(常规),

    勾选Allow Scripts to Write Files and Access Network(允许脚本写入文件和访问网络)


    mac:after effect—preference(首选项)—general(常规),

    勾选Allow Scripts to Write Files and Access Network(允许脚本写入文件和访问网络)



    Image title


    5. 点击 window(窗口)--extensions(扩展)--Bodymovin 就可?#28304;?#24320;Bodymovin插件的界面使用插件了。


    Image title



    选择你要导出的合成和存储路径,再点击渲染即可输出当?#25226;?#25321;的合成动画json文件。

    输出后设计师想要检查一下json文件是否和我们做的动画一致,Bodymovin插件也是很贴心的提供了预览功能,


    具体操作如下:

    点击左上角的“preview”按钮


    Image title


    检查完json文件正确无误后,接下来就可以给到程序猿小哥哥去实现啦~~~?#36824;?#35201;记得给小哥哥准确的标注哦~!


    四:存在的问题( 测试版本:5.4.4  2019.2.25更新 )

    Bodymovin插件方便了设计师和开发,但是它也并不是完美能支持所有AE动画的导出,

    这里给大?#26131;?#32467;?#22235;?#21069;我在工作中所遇到的Bodymovin插件存在的一些不支出导出的问题。

    先说说关于表达式,亲测是支?#20540;?#20986;的!!!


    1:图形层属性不支持列表:


    Image title


    Gradient fill(渐变填充)

    Gradient stroke (渐变描边)

    Merge paths (合并路径)

    Twist  (旋转)

    Wiggle paths (扭动路径)

    Wiggle transform (扭动变换)


    2:自带特效大多不支持,最常用的目前遇到的不支持的如下:

    Gaussian Blur(高斯模糊)

    Echo(残影)

    Gradient Ramp(渐变填充)

    CC bent it (弯曲变形)


    3:常用的融球效果


    Image title

    (?#35745;?#26469;源于网络)


    融球所用到的两个特效:Rolling Shutter Repair 果冻效应修复 和simple choker 简易阻塞均不支?#20540;?#20986;。

    所以要用到融球效果的设计师就要慎重了,这里提供两个解决方法:

    1,和开发同学?#20302;?#26159;否可以使用序列帧,雪碧图,apng,gif等?#35745;?#26684;式。

    2,万能的手动Key帧,使用路径动画去做。(认真脸.jpg)


    最后说说我目前遇到的能导出但是开发实现中有问题的特例:

    ios端实现的时候不能识别json文件中反向蒙版信息(正向蒙版支持),但是Android是都可以识别。

    所以还是要尽量避免反向蒙版的使用。希望各位设计同学在工作中多注意这样的特例。遇到了也希望能分享给大家。



    五:总结


    虽然有很多常用的属性和特效不支?#20540;?#20986;,总体来说已经为设计同学和开发同学提供了很多很多的方便,相信以后这些不支持的属性都会得到很好的解决!!~


    目前在工作中已经使用到了WEB页 ios开发 android开发 整体都挺顺利。

    实现过程中设计同学要积极主动和开发同学去?#20302;?#20320;想要实现的动画效果和方式,并且

    针对插件存在的不完美去选择动画的制作方法,避免因为动效的复杂而增加开发成本。


    最后?#34892;籔哥和tina姐的设计稿支持~~


    作者:moeko














    腾讯动漫TCD

    我们是一群来自异次元的鹅,每天拍拍照、做做设计,偶尔用脑电波传递

    2648粉丝/0关注

    助人为乐小有名气首页达人小有见解一鸣惊人
    ?#31243;?#22914;何让你的设计被记住? TCD-2018年度作品集
    15
    肉桑大魔王Roshan

    别,别用轻松这个词,用lottie是需要有比较高的动效基础和素养的。。。不然全是问题

    精彩!

    腾讯动漫TCD

    腾讯动漫TCD

    我们是一群来自异次元的鹅,每天拍拍照、做做设计,偶尔用脑电波传递

    助人为乐小有名气首页达人小有见解一鸣惊人

    扫描二维码
    去?#21482;?#31471;查看海报

    腾讯动漫TCD

    TA已经获得6枚勋章啦

    • 成就勋章

      • 特别勋章

      • 身份勋章

    • 已拥有

    • 作品

      创造者才是真正的享受者。

    • 经验

      经验是一所好学校,可它的学生却经常旷课。

    • 活跃

      大神都是从围观群众开始的

    • 拓展

      作品、经验、活跃还不能满足你?

    京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

    北京快乐8奖金
  • <div id="imyhx"></div>
  • <div id="imyhx"></div>
  • <div id="imyhx"></div>
  • <div id="imyhx"></div>