阿里制造：“犸良”一站式动效制做平台

阿里制造：“犸良”一站式动效制做平台

犸良是什么？

“犸良” 是一款基于 Lottie 的动效设计平台。可以快速生成设计师想要的动态效果，并交付给开发，极大地提升了设计效率和设计还原度。做为一站式动效制做平台，经过海量的动效素材以及可视化编辑能力，帮助零基础的用户轻松完成动效制做。

上面说到了 Lottie ，那 Lottie 你了解嘛？

什么是Lottie ？

可以解析渲染经过 AE 上的 Bodymovin 插件将 AE 中制做好的动画导出成的 json 文件 (1)、数据源多样性—可从assets,sdcard,网络加载动画资源，动态更新 (2)、跨平台—设计稿导出一份动画描述文件，android,ios,react native通用

Lottie动画Json结构 分为4层：

1. 结构层：能够读取到动画画布的宽高，帧数，背景色，时间，起始关键帧，结束帧等
2. asset:图片资源信息集合，这里放置的是 制做动画时引用的图片资源
3. layers:图层集合，这里能够获取到多少图层，每一个图层的开始帧 结束帧等
4. shapes：元素集合，能够获取到每一个图层都包含多个动画元素。经过这样的层级去读取文件信息 而后映射成JavaBean对象，而后经过关键类LottieDrawable将JavaBean分层渲染绘制到Canvas的画布上去

ok，回归正题。

犸良的应用场景

有了 Lottie 的支撑，犸良支持全平台 iOS、Android、H五、小程序。不管是营销展位、活动页面、空状态仍是产品icon。犸良编辑器对接投放平台，一站式完成动效创意制做和投放。

“我”就是这么强大！！！

相信你们必定急于知道，犸良 如何使用？其实也简单。

犸良怎么用？

咱们来到犸良 首页，有不少个按钮“建立动画”，能够点击，咱们只须要登陆支付宝帐号便可。

基于模版直接制做

一、选择模版

二、从动画仓库选择动画进行当前动画的替换

三、经过替换图片或修改颜色来自定义动画 四、自定义模板文字内容 五、选择模板背景图片 六、完成编辑选择是否带背景（banner模版默认带背景） 七、导出成功下载 json

有了这个JSON文件，咱们若是使用？下面主要讲讲web前端如何使用，给出简单示例。

Lottie 使用

咱们在须要的页面引用lottie.js文件。

<script src="js/lottie.js" type="text/javascript"></script>

<script> lottie.loadAnimation({ container: element, // 动画的dom元素 renderer: 'svg', // 设置渲染器(svg/canvas/html) loop: true, // 是否循环播放 autoplay: true, // 是否自动播放 path: 'data.json' // 动画json文件路径 }); </script>
复制代码

lottie.loadAnimation还提供，播放、暂停、中止等事件。

而后对Vue钟情的小伙伴，也能够来试试vue中若是使用lottie？

如上代码事件能够控制动画。

npm install --save vue-lottie
复制代码

<template>
  <div id="app">
    <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation" />
  </div>
</template>

<script> 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); } } } </script>
复制代码

如上代码事件能够控制动画。

总结

有了lottie，前端再复杂的动画只须要有设计师也是能够搞定的，并且不用费时费力的写CSS了。设计师小伙伴们能够去好好学习一下，相信这也是将来的方向，毕竟阿里在作，前途应该还能够的。

相关连接： Lottie Docs 犸良 lottie-web vue-lottie

原文地址：www.javanx.cn/20190708/al…