Html5页面内使用JSON动画的实现


Posted in HTML / CSS onJanuary 29, 2019

问题背景

有一天我们的UI设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的json动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果(写到这里我突然想到一个问题,这么复杂的动画为什么不使用gif。。。。坐我对面的安卓开发小哥答因为gif播放的时候可能质量不高不流畅,好吧我信了)

我:????客户端可以加json动画,H5页面没听说过可以读json动画哎

设计师一脸肯定,说可以的,有web版本。

写到这里,我真的要好好夸一波我们的设计师妹子了,几乎很多蛮好的解决方法都是在他们的“逼迫”之下找到的(哦,她们还会写H5页面。。。要我有何用系列

那问题来了,怎么在H5页面里面使用json动画呢

如何在H5页面内使用json动画

这时候设计师甩了一个链接给我,看这里lottie-web ;我点进去了解了一下,是Airbnb开源的一个动画库,该库可以完成很多酷炫动画,使用起来也很简单,设计师只需要通过AE做成的动画导出JSON文件,然后前端使用Lottie直接加载JSON文件生成动画,既不需要设计师切N多gif,也不需要前端去进行复杂绘制了,一举两得,并且,Lottie全平台可用,ios、Android、web、React Native都可以,且占用内存少,加载流畅。(这么个神仙东西我为什么现在才发现。。

说了这么多,那怎么在H5页面里面使用呢?

很简单了,设计师生成的文件夹发给你(设计师那边只用在AE中加个lottie插件,导出就行了),打开之后应该是这样子的,打开demo.html就知道是怎么用的了(所以我还在这里写什么技术文章

Html5页面内使用JSON动画的实现

玩笑归玩笑,其实在使用中还是碰到了很多坑的,这里记录几个使用时注意的地方

1.demo.html里面有很多内联的东西,使用时堆积在页面内不好看

仔细看一下,其实demo.html把js和json都放进去了,这时候我们可以把js和json单独分出来,js的话可以使用cdn上提供的地址

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js"></script>

动画需要的json数据放在data.json文件里面,但是给出的json文件里面的数据格式是这样的(太长了 截不完

Html5页面内使用JSON动画的实现

那如果你要在单独的一个html里面使用script的方式引入json文件的话,会报错,所以需要修改json文件,在前面加上变量,赋值。如下图:

Html5页面内使用JSON动画的实现

这样你可以通过像引入js文件的方式一样的引入该json

<script type="text/javascript" src="./data.json"></script>

这样可用的demo.html就缩减成了下面这样

<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<head>
    <style>
        body{
            background-color:black;
            margin: 0px;
            height: 100%;
            overflow: hidden;
        }
        #lottie{
            background-color:#fff;
            width:100%;
            height:100%;
            display:block;
            overflow: hidden;
            transform: translate3d(0,0,0);
            text-align: center;
            opacity: 1;
        }

    </style>
</head>
<body>


<div id="lottie"></div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie.min.js"></script>

<script type="text/javascript" src="./data.json"></script>

<script>
    var params = {
        container: document.getElementById('lottie'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: animationData
    };

    var anim;

    anim = lottie.loadAnimation(params);

</script>
</body>
</html>

当然,你如果使用的是js模块化编程的话,可以不用更改data.json,直接import进来就行了,如下:

import animationData from './data.json'

2.使动画适配移动端

之所以觉得这是个坑是因为,设计师给我的动画是全屏且非透明底的,然后她要求我将这个动画以宽度100% 高度垂直居中截取的方式定位,我在浏览器里面试了下,360*640屏幕下,宽度100%,表现形式是这样的(看上去是高度100% 宽度适配居中 两边漏出了黑色的背景色,见下图蓝色框起来的部分)

Html5页面内使用JSON动画的实现

换成iPhone X的屏幕下,相反,表现出来是宽度100% 高度适配居中,上下漏出黑色背景色,见下图蓝色框起来的部分(究其原因是因为iphonex屏幕较长

Html5页面内使用JSON动画的实现

这个布局好熟悉哇,跟img的object-fit属性取值为contain的时候表现一致(object-fit也是宝藏,有兴趣的同学可以去研究一下,非常好用)

我这里解决设计师的需求主要增加下面的代码:

js部分:
setTimeout(function() {
    document.getElementsByTagName('svg')[0].style.height = 'auto';
}, 50);
css部分:(给lottie增加flex布局)
#lottie {
    width:100%;
    height:100%;
    transform: translate3d(0,0,0);
    text-align: center;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

最终效果:

Html5页面内使用JSON动画的实现

总结

以上图片截图都是静态的,实际是有一个动态效果的,我不知道怎么添加动图就没弄了,感兴趣的可以试一下。

适用范围:我感觉一般全屏的或者局部很复杂的动画可以使用这个方法一试,比gif要流畅,兼容性也做得不错,一些安卓产品比较酷炫的开屏就是使用的这个方法,H5页面的话,简单动画一般自己程序实现就可以,还可以避免踩坑。

参考链接:
lottie官网
lottie-web github地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
你正在寻找的CSS3 动画技术
Jul 27 HTML / CSS
CSS3感应鼠标的背景闪烁和图片缩放动画效果
May 14 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
CSS3点击按钮实现背景渐变动画效果
Oct 19 HTML / CSS
突破canvas语法限制 让他支持链式语法
Dec 24 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
使用CSS实现一个搜索引擎的原理解析
Sep 25 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 #HTML / CSS
解锁canvas导出图片跨域的N种姿势小结
Jan 24 #HTML / CSS
详解canvas绘制多张图的排列顺序问题
Jan 21 #HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
Jan 18 #HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 #HTML / CSS
HTML5如何使用SVG的方法示例
Jan 11 #HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 #HTML / CSS
You might like
php入门学习知识点三 PHP上传
2011/07/14 PHP
数据库中排序的对比及使用条件详解
2012/02/23 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
javascript 窗口加载蒙板 内嵌网页内容
2010/11/19 Javascript
基于javascript代码实现通过点击图片显示原图片
2015/11/29 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
vue 路由页面之间实现用手指进行滑动的方法
2018/02/23 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
javascript+css实现进度条效果
2020/03/25 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python利用elaphe制作二维条形码实现代码
2012/05/25 Python
Linux下用Python脚本监控目录变化代码分享
2015/05/21 Python
Python数组遍历的简单实现方法小结
2016/04/27 Python
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
动态规划之矩阵连乘问题Python实现方法
2017/11/27 Python
使用python爬取B站千万级数据
2018/06/08 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
python中的反斜杠问题深入讲解
2019/08/12 Python
python matplotlib中的subplot函数使用详解
2020/01/19 Python
Python3.6 中的pyinstaller安装和使用教程
2020/03/16 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
python相对企业语言优势在哪
2020/06/12 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
财务会计人员求职的自我评价
2014/01/13 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
采购求职信
2014/03/17 职场文书
预备党员对照检查材料思想汇报
2014/09/24 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
篮球赛新闻稿
2015/07/17 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python