HTML5培训-高端面授HTML5培训机构
云和教育:云和数据集团高端IT职业教育品牌
  • 华为
    授权培训中心
  • 腾讯云
    一级认证培训中心
  • 百度营销大学
    豫陕深授权运营中心
  • Oracle甲骨文
    OAEP中心
  • Microsoft Azure
    微软云合作伙伴
  • Unity公司
    战略合作伙伴
  • 普华基础软件
    战略合作伙伴
  • 新开普(股票代码300248)
    旗下丹诚开普投资
  • 中国互联网百强企业锐之旗
    旗下锐旗资本投资

阿里开发的这款神器,零基础也能轻松做出酷炫动效

  • 发布时间:
    2019-07-09
  • 版权所有:
    云和教育
  • 分享:

阿里作为中国互联网企业的标杆,不仅一直在为广大人民群众提供快捷便利的服务。也不断引领行业,在各个专业领域,给专业人员提供了优质的工具与服务。对设计师而言,无论是每年一度的 UCAN大会,还是 Kitchen、语雀、Ant Design等设计开发工具,都给广大设计师带来很大的便利。

配图1 阿里开发神器零基础做出酷炫动效.jpg

而最近,阿里又推出了一款基于Lottie的动效设计平台──犸(ma)良。能够快速生成设计师想要的动态效果,并交付给开发,极大地提高了设计效率和设计还原度。

犸良是什么?

配图2 阿里开发神器零基础做出酷炫动效.jpg

它是一个积累了很多通用动效素材的平台,让不会动效的同学们也能基于动效库和素材库快速生成一个通用动效创意,你只需要简单地编辑图片、颜色或者文字即可。同时平台集成了以 Lottie 为代表的动效技术,让曾经令人苦恼的安装包大小和性能问题一并解决。

犸良的应用场景

配图3 阿里开发神器零基础做出酷炫动效.jpg

犸良支持全平台 iOS、Android、H5、小程序。无论是营销展位、活动页面、空状态还是产品icon。犸良编辑器对接投放平台,一站式完成动效创意制作和投放。

丰富的动效素材能够满足多种场景需要。

犸良怎么用?

方式一:基于模版直接制作(适用于设计师进行动态banner制作)

1. 选择模版

2. 从动画仓库选择动画进行当前动画的替换

3. 通过替换图片或修改颜色来自定义动画

4. 自定义模板文字内容

配图4 阿里开发神器零基础做出酷炫动效.jpg

5. 选择模板背景图片

6. 完成编辑选择是否带背景(banner模版默认带背景)

7. 导出成功下载json

方式二:自定义画布制作(适用于设计师进行模板覆盖不到的动效应用场景)

使用犸良一分钟做出来的效果,大家感受下:

配图5 阿里开发神器零基础做出酷炫动效.jpg

综合体验了一下犸良,猛良其实是一款基于人工的动效模板网站。所有的动态效果都是设计师提前做好的。基于Lottie的特性,将可编辑的属性进行模块化。

说到这里有些设计师可能有疑问了,Lottie究竟是什么?

简言之 Lottie 就是一个快速将AE中设计的动效快速调出,并且开发可以直接调用的动效库。

Lottie 的原理是将矢量图形和动态效果通过代码实现,复杂的图形导出图片资源。最终生成 json文件+图片资源。犸良所做的就是,将json里的颜色属性提取出来,用户可以从外部修改。同样只需要替换图片资源,就可以让用户自己设计的图形根据json写好的运动方式来展示。如果你把一只移动的猪替换成猫了,那么你看到的效果就是一只移动的猫。

配图7 阿里开发神器零基础做出酷炫动效.jpg

而它的文字编辑功能,我觉得就比较神奇了。因为 Lottie 貌似不能从外部修改字体,应该是阿里自己写的。如果有知道的同学也欢迎解惑。因为我们在实际工作中经常遇到这样的问题,就是如果动效包含文本了,需要适配国际化,就没法从外部修改语言。如果能解决这个问题,将会减少很多麻烦。

从现有的素材来看,其主要应用场景还是电商和运营方面。相信未来会增加更多的素材和应用场景。希望以后能够开放出让设计师可以将自己做的动效分享出来供大家使用,或者提供优质付费内容也是不错的选择。

配图8 阿里开发神器零基础做出酷炫动效.jpg

就个人的工作经验来看Lottie还是有丰富的应用场景的。比如可以做动态图标、动态闪屏页、表情贴纸、直播礼物、空白页、动态banner……

因为犸良是基于Lottie的工具,所以有相关基础的设计师很容易上手。还不了解的同学也可以在各大设计网站搜索到。现如今,动效设计能力已经是互联网设计师必备技能,希望这款工具能够帮助学习动效设计的伙伴,能够在学习UI上更上一层楼。