点选右上方红色按钮关注“web秀”，让你真正秀起来
犸良是什么？
“犸良” 是一款基于 Lottie 的动效设计平台。能够快速生成设计师想要的动态效果，并交付给开发，极大地提高了设计效率和设计还原度。作为一站式动效制作平台，通过海量的动效素材以及视觉化编辑能力，帮助零基础的使用者轻松完成动效制作。
上面说到了 Lottie ，那 Lottie 你了解嘛？
什么是Lottie ？
能够解析渲染通过 AE 上的 Bodymovin 外挂将 AE 中制作好的动画汇出成的 json 档案 (1)、资料来源多样性—可从assets,sdcard,网络载入动画资源，动态更新 (2)、跨平台—设计稿汇出一份动画描述档案，android,ios,react native通用Lottie动画Json结构 分为4层：
结构层：可以读取到动画画布的宽高，帧数，背景色，时间，起始关键帧，结束帧等asset:图片资源资讯集合，这里放置的是 制作动画时引用的图片资源layers:图层集合，这里可以获取到多少图层，每个图层的开始帧 结束帧等shapes：元素集合，可以获取到每个图层都包含多个动画元素。通过这样的层级去读取档案资讯 然后对映成JavaBean物件，然后通过关键类LottieDrawable将JavaBean分层渲染绘制到Canvas的画布上去ok，回归正题。
犸良的应用场景
有了 Lottie 的支撑，犸良支援全平台 iOS、Android、H5、小程式。无论是营销展位、活动页面、空状态还是产品icon。犸良编辑器对接投放平台，一站式完成动效创意制作和投放。
“我”就是这么强大！！！
相信大家一定急于知道，犸良 如何使用？其实也简单。
犸良怎么用？
我们来到犸良 首页，有很多个按钮“建立动画”，可以点选，我们只需要登入支付宝账号即可。基于模版直接制作
1、选择模版
2、从动画仓库选择动画进行当前动画的替换
3、通过替换图片或修改颜色来自定义动画
4、自定义模板文字内容
5、选择模板背景图片
6、完成编辑选择是否带背景（banner模版预设带背景）
7、汇出成功下载 json
有了这个JSON档案，我们如果使用？下面主要讲讲web前端如何使用，给出简单示例。
Lottie 使用
我们在需要的页面引用lottie.js档案。lottie.loadAnimation({
container: element, // 动画的dom元素
renderer: \'svg\', // 设定渲染器(svg/canvas/html)
loop: true, // 是否循环播放
autoplay: true, // 是否自动播放
path: \'data.json\' // 动画json档案路径
});
lottie.loadAnimation还提供，播放、暂停、停止等事件。
然后对Vue钟情的小伙伴，也可以来试试vue中如果使用lottie？
如上程式码事件可以控制动画。
npm install --save vue-lottie
:options="defaultOptions"
:height="400" :width="400"
v-on:animCreated="handleAnimation"
/>
import Lottie from \'./lottie.vue\';
import * as animationData from \'./assets/pinjump.json\';
export default {
name: \'app\',
components: {
\'lottie\': Lottie
},
data() {
return {
defaultOptions: {
animationData: animationData
},
animationSpeed: 1
}
},
methods: {
handleAnimation: function (anim) {
this.anim = anim;
},
stop: function () {
this.anim.stop();
},
play: function () {
this.anim.play();
},
pause: function () {
this.anim.pause();
},
onSpeedChange: function () {
this.anim.setSpeed(this.animationSpeed);
}
}
}
如上程式码事件可以控制动画。
总结
有了lottie，前端再复杂的动画只需要有设计师也是可以搞定的，而且不用费时费力的写CSS了。设计师小伙伴们可以去好好学习一下，相信这也是未来的方向，毕竟阿里在做，前途应该还可以的。喜欢小编或者觉得小编文章对你有帮助的，可以点选一波关注哦！
