HTML5+Lottie.js+犸良制作跳动的红包
什么是Lottie ？

能够解析渲染通过 AE 上的 Bodymovin 插件将 AE 中制作好的动画导出成的 json 文件

(1)、数据源多样性—可从assets,sdcard,网络加载动画资源，动态更新

(2)、跨平台—设计稿导出一份动画描述文件，android,ios,react native通用

Lottie动画Json结构 分为4层：

结构层：可以读取到动画画布的宽高，帧数，背景，时光，起始关键帧，结束帧等

asset:资源信息集合，这里放置的是 制作动画时引用的资源

layers:图层集合，这里可以猎取到多少图层，每个图层的开头帧 结束帧等

shapes：元素集合，可以猎取到每个图层都包含多个动画元素。通过这样的层级去读取文件信息 然后映射成JavaBean对象，然后通过关键类LottieDrawable将JavaBean分层渲染绘制到Canvas的画布上去

犸良是什么？

svg canvas它是一个堆积了无数通用动效素材的平台，让不会动效的学生们也能基于动效库和素材库迅速生成一个通用动效创意，你只需要容易地编辑、彩或者文字即可。同时平台集成了以 Lottie 为代表的动效技术，让曾经令人烦恼的安装包大小和性能问题一并解决。

犸良的应用场景

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

犸良怎么用？

基于模版挺直制作(适用于设计师举行动态banner制作)

挑选模版

从动画仓库挑选动画举行当前动画的替换

通过替换或修改彩来自定义动画

自定义模板文字内容

挑选模板背景


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

导出胜利下载 json

有了这个JSON文件，我们假如用法？下面主要讲讲web前端如何用法，给出容易示例。

var animData1 = {

ElementById(&39;animationWindow1&39;),

renderer: &39;svg&39;, // 设置渲染器(svg/canvas/html)

loop: true, // 是否循环播放

autoplay: true, // 是否自动播放

path: &39;data1.json&39;//动画json文件路径

}

lottie.loadAnimation(animData1);

示例下载

     

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。