阿里製造：「獁良」一站式動效製做平臺

阿里製造：「獁良」一站式動效製做平臺

獁良是什麼？

「獁良」 是一款基於 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…