阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效
"\u003Cdiv\u003E\u003Cp\u003E阿里作为中国互联网企业的标杆，不仅一直在为广大人民群众提供快捷便利的服务。也不断引领行业，在各个专业领域，给专业人员提供了优质的工具与服务。对设计师而言，无论是每年一度的 UCAN大会，还是 Kitchen、语雀、Ant Design 等设计开发工具，都给广大设计师带来很大的便利。\u003C\u002Fp\u003E\u003Cp\u003E而最近，阿里又推出了一款基于 Lottie 的动效设计平台 ── 犸良。能够快速生成设计师想要的动态效果，并交付给开发，极大地提高了设计效率和设计还原度。\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E犸良是什么？\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E它是一个积累了很多通用动效素材的平台，让不会动效的同学们也能基于动效库和素材库快速生成一个通用动效创意，你只需要简单地编辑图片、颜色或者文字即可。同时平台集成了以 Lottie 为代表的动效技术，让曾经令人苦恼的安装包大小和性能问题一并解决。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F78176621cde14992af47305092f455ac\" img_width=\"1000\" img_height=\"351\" alt=\"阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E△ 官网：https:\u002F\u002Fdesign.alipay.com\u002Femotion\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E犸良的应用场景\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E犸良支持全平台 iOS、Android、H5、小程序。无论是营销展位、活动页面、空状态还是产品icon。犸良编辑器对接投放平台，一站式完成动效创意制作和投放。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fb3942fa7083543858f9faddf6cf6c529\" img_width=\"1012\" img_height=\"397\" alt=\"阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E丰富的动效素材能够满足多种场景需要。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F4639632b546942d2b8b81e093f56e42a\" img_width=\"1012\" img_height=\"395\" alt=\"阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F5b3c36d7a7584e05aa7a78bcb9b3f169\" img_width=\"1000\" img_height=\"390\" alt=\"阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E犸良怎么用？\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E\u003Cstrong\u003E方式一：基于模版直接制作（适用于设计师进行动态banner制作）\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp3.pstatp.com\u002Flarge\u002Fpgc-image\u002F39771fbedc514aa7972437d50d351cc0\" img_width=\"1012\" img_height=\"421\" alt=\"阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Col\u003E\u003Cli\u003E选择模版\u003C\u002Fli\u003E\u003Cli\u003E从动画仓库选择动画进行当前动画的替换\u003C\u002Fli\u003E\u003Cli\u003E通过替换图片或修改颜色来自定义动画\u003C\u002Fli\u003E\u003Cli\u003E自定义模板文字内容\u003C\u002Fli\u003E\u003Cli\u003E选择模板背景图片\u003C\u002Fli\u003E\u003Cli\u003E完成编辑选择是否带背景（banner模版默认带背景）\u003C\u002Fli\u003E\u003Cli\u003E导出成功下载 json\u003C\u002Fli\u003E\u003C\u002Fol\u003E\u003Cp\u003E\u003Cstrong\u003E方式二：自定义画布制作（适用于设计师进行模板覆盖不到的动效应用场景）\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002F07f496a54515481d8edeaf8a559e1687\" img_width=\"1200\" img_height=\"499\" alt=\"阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E使用犸良一分钟做出来的效果，大家感受下：\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp1.pstatp.com\u002Flarge\u002Fpgc-image\u002Fa2894fed70ba4428a5e60fa4f90c375d\" img_width=\"532\" img_height=\"292\" alt=\"阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002F1c052244cce14e8489624bbed515a38b\" img_width=\"640\" img_height=\"342\" alt=\"阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E\u003Cstrong\u003E体验感受\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cp\u003E综合体验了一下犸良，相对于鹿班人工智能随意撸图。犸良其实是一款基于人工的动效模板网站。所有的动态效果都是设计师提前做好的。基于 Lottie 的特性，将可编辑的属性进行模块化。\u003C\u002Fp\u003E\u003Cp\u003E说到这里有些设计师可能有疑问了，Lottie 究竟是什么？在优设已经有相关文章介绍的比较全面了，这里就不赘述了，阅读链接：http:\u002F\u002Fwww.uisdc.com\u002Ftag\u002Flottie\u002F。\u003C\u002Fp\u003E\u003Cp\u003E简言之 Lottie 就是一个快速将 AE 中设计的动效快速调出，并且开发可以直接调用的动效库。\u003C\u002Fp\u003E\u003Cp\u003ELottie 的原理是将矢量图形和动态效果通过代码实现，复杂的图形导出图片资源。最终生成 json 文件+图片资源。犸良所做的就是，将 json 里的颜色属性提取出来，用户可以从外部修改。同样只需要替换图片资源，就可以让用户自己设计的图形根据 json 写好的运动方式来展示。如果你把一只移动的猪替换成猫了，那么你看到的效果就是一只移动的猫。\u003C\u002Fp\u003E\u003Cp\u003E而它的文字编辑功能，我觉得就比较神奇了。因为 Lottie 貌似不能从外部修改字体，应该是阿里自己写的。如果有知道的同学也欢迎解惑。因为我们在实际工作中经常遇到这样的问题，就是如果动效包含文本了，需要适配国际化，就没法从外部修改语言。如果能解决这个问题，将会减少很多麻烦。\u003C\u002Fp\u003E\u003Cp\u003E从现有的素材来看，其主要应用场景还是电商和运营方面。相信未来会增加更多的素材和应用场景。希望以后能够开放出让设计师可以将自己做的动效分享出来供大家使用，或者提供优质付费内容也是不错的选择。\u003C\u002Fp\u003E\u003Cp\u003E就个人的工作经验来看，Lottie 还是有丰富的应用场景的。比如可以做动态图标、动态闪屏页、表情贴纸、直播礼物、空白页、动态banner……\u003C\u002Fp\u003E\u003Cp\u003E其实 Lottie 官方社区也有很多的动效资源，都是来自全世界的设计师上传的，大家可以去下载参考，如果要商用，可能需要联系作者。\u003C\u002Fp\u003E\u003Cdiv class=\"pgc-img\"\u003E\u003Cimg src=\"http:\u002F\u002Fp9.pstatp.com\u002Flarge\u002Fpgc-image\u002F3c05a4183153485bb288c74afdc240d0\" img_width=\"900\" img_height=\"556\" alt=\"阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效\" inline=\"0\"\u003E\u003Cp class=\"pgc-img-caption\"\u003E\u003C\u002Fp\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E△ 附上链接：https:\u002F\u002Flottiefiles.com\u002Fpopular\u003C\u002Fp\u003E\u003Cp\u003E本文资料，很多都是来自语雀的分享。再次感谢相关人员的辛勤付出。大家可以在此处查看犸良的完整介绍：https:\u002F\u002Fwww.yuque.com\u002Fdapolloali\u002Fnews\u002Fui43vg。\u003C\u002Fp\u003E\u003Cp\u003E再次附上官网：https:\u002F\u002Fdesign.alipay.com\u002Femotion\u003C\u002Fp\u003E\u003Cp class=\"ql-align-center\"\u003E因为犸良是基于 Lottie 的工具，所以有相关基础的设计师很容易上手。还不了解的同学也可以在各大设计网站搜索到。\u003Cstrong\u003E阿里新开发了一款神器犸良！零基础也能轻松做酷炫动效\u003C\u002Fstrong\u003E\u003C\u002Fp\u003E\u003Cstyle\u003E #pgc-card .pgc-card-href { text-decoration: none; outline: none; display: block; width: 100%; height: 100%; } #pgc-card .pgc-card-href:hover { text-decoration: none; } \u002F*pc 样式*\u002F .pgc-card { box-sizing: border-box; height: 164px; border: 1px solid #e8e8e8; position: relative; padding: 20px 94px 12px 180px; overflow: hidden; } .pgc-card::after { content: \" \"; display: block; border-left: 1px solid #e8e8e8; height: 120px; position: absolute; right: 76px; top: 20px; } .pgc-cover { position: absolute; width: 162px; height: 162px; top: 0; left: 0; background-size: cover; } .pgc-content { overflow: hidden; position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .pgc-content-title { font-size: 18px; color: #222; line-height: 1; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pgc-content-desc { font-size: 14px; color: #444; overflow: hidden; text-overflow: ellipsis; padding-top: 9px; overflow: hidden; line-height: 1.2em; display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pgc-content-price { font-size: 22px; color: #f85959; padding-top: 18px; line-height: 1em; } .pgc-card-buy { width: 75px; position: absolute; right: 0; top: 50px; color: #406599; font-size: 14px; text-align: center; } .pgc-buy-text { padding-top: 10px; } .pgc-icon-buy { height: 23px; width: 20px; display: inline-block; background: url(https:\u002F\u002Fs0.pstatp.com\u002Fpgc\u002Fv2\u002Fpgc_tpl\u002Fstatic\u002Fimage\u002Fcommodity_buy_f2b4d1a.png); }\u003C\u002Fstyle\u003E\u003Cdiv id=\"pgc-card\" class=\"pgc-card\"\u003E \u003Ca href=\"https:\u002F\u002Fuland.taobao.com\u002Fcoupon\u002Fedetail?e=gik2rUv5Z18GQASttHIRqanCxlBMUUNSR7ElgYt4rPTr%2BQ8X8bwvJc17Dlax2sMeQj2XZlI7nbQhXM6lP6r%2FcFqCY5BtzRCop9LUcfdr5scs0muB1OLcWymBVCo9PFXfXmjaDtsgQpDW0wDTj6EM0W02%2F1k20DLuWFBEmFU9D%2FOb63XqDXID0MHVq%2Fdxq%2FDATJnbK5InWznd4dRbTb5WN9VqM6BWlz38UtqM5E5JIeWsnW1pJKQbP5g8HgGyOJKz&traceId=0b1b532115642062810995116e&union_lens=lensId:0b0f8444_0c24_16c31f5b1d5_919a\" target=\"_blank\" class=\"pgc-card-href\"\u003E \u003Cdiv class=\"pgc-cover\" style=\"background-image:url(https:\u002F\u002Fimg.alicdn.com\u002Fbao\u002Fuploaded\u002Fi1\u002F4092584527\u002FO1CN01uPGuf61jJPVkl2Van_!!0-item_pic.jpg)\"\u003E\u003C\u002Fdiv\u003E \u003Cdiv class=\"pgc-content\"\u003E \u003Cdiv class=\"pgc-content-title\"\u003E配色事典 设计常用配色手册书籍 配色方案设计RGB CMYK色彩搭配配色色卡可撕色票 平面设计师用书配色手册\u003C\u002Fdiv\u003E \u003Cdiv class=\"pgc-content-desc\"\u003E\u003C\u002Fdiv\u003E \u003Cdiv class=\"pgc-content-price\"\u003E￥144\u003C\u002Fdiv\u003E \u003C\u002Fdiv\u003E \u003Cdiv class=\"pgc-card-buy\"\u003E \u003Cdiv\u003E\u003Ci class=\"pgc-icon-buy\"\u003E\u003C\u002Fi\u003E\u003C\u002Fdiv\u003E \u003Cdiv class=\"pgc-buy-text\"\u003E领10元券\u003C\u002Fdiv\u003E \u003C\u002Fdiv\u003E \u003C\u002Fa\u003E\u003C\u002Fdiv\u003E\u003C\u002Fdiv\u003E"'.slice(6, -6),
groupId: '6718214854970180099
