html5 红包页面,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的画布上去

犸良是什么？

它是一个积累了很多通用动效素材的平台，让不会动效的同学们也能基于动效库和素材库快速生成一个通用动效创意，你只需要简单地编辑图片、颜色或者文字即可。同时平台集成了以 Lottie 为代表的动效技术，让曾经令人苦恼的安装包大小和性能问题一并解决。

犸良的应用场景

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

犸良怎么用？

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

选择模版

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

通过替换图片或修改颜色来自定义动画

自定义模板文字内容

选择模板背景图片

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

导出成功下载 json

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

var animData1 = {

container:document.getElementById('animationWindow1'),

renderer: 'svg', // 设置渲染器(svg/canvas/html)

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

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

path: 'data1.json'//动画json文件路径

}

lottie.loadAnimation(animData1);

示例下载

https://pan.baidu.com/s/1oJ37HpPzhjqqHQH41JeLEg