有一天我们的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就知道是怎么用的了（所以我还在这里写什么技术文章

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

1.demo.html里面有很多内联的东西，图片选项卡使用时堆积在页面内不好看

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

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

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

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

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF-8">
<head>
    <style>
        body{
            
            margin: 0px;
            height: 100%;
            overflow: hidden;
        }
        #lottie{
            
            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进来就行了，如下：

?
1
import animationData from './data.json'

2.使css3动画适配移动端

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

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
}

最终效果：

总结

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

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

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

Html5页面内使用JSON动画的实现的更多相关文章

  1. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  2. 看逐浪CMS技术小哥做SVG动画（附使用Bodymovin和Lottie将Adobe After Effects(AE)程式转为 HTML5/Android/iOS原生的动画全过程-即AE转svg\canvas\html5动画）

      名词解解释 adobe After Effects AE:adobe After Effects,adobe公司的专业视频制作软件. Bodymovin插件预览 Bodymovin:是一个AE的插 ...

  3. HTML5 页面制作工具

    https://www.zhihu.com/question/30087283 HTML5 页面制作工具 免费的基于 HTML 5 的 Web Apps 生成器工具网站     81 235 初页 制 ...

  4. JS实现页面内跳转

    使用js($.ajax中)实现页面内跳转(即:描点平滑跳转)的方法(aa为跳转目的标签的id): 在网络上有很多资料所说的:animate方法我试了并不好使,不知道是啥原因,欢迎大家指正,附上网络方法 ...

  5. jquery load加载页面内ajax返回的div不能响应页面js的问题的解决方案

    1. 前言 由于项目需要,需要load一个页面并保持ajax返回的div能响应其页面内的JS的click事件.这个不是 解决用jquery load加载页面到div时,不执行页面js的问题 这类问题, ...

  6. 微信HTML5页面设计建议

    一个HTML5页面从提出到完成上线的流程:>   1.需求方.设计人员.H5实现人员三方共同讨论实现方案 2.设计人员出设计图 3.H5人员按设计图出H5页面 4.需求方评估已实现的H5页面后给 ...

  7. 写给“有钱大爷”、”美工殿下”、“前端文艺青年”的微信HTML5页面设计建议

    ==============================   2018更新 iphone X 的设计内容   ==============================     我保证你一分钟就 ...

  8. html5 frameset5内嵌框架集

    利用html5 frameset内嵌框架简单做一个网页,网页的布局大体如下: 我们可以将其分为四个部分: 第一部分:top图片栏 第二部分:left链接栏 第三部分:right内容栏 第四部分:网页整 ...

  9. html5页面怎么播放音频和视频

    html5页面怎么播放音频和视频 一.总结 一句话总结:html5 音频和视频标签:(audio And video),局限是不同浏览器对音频视频的格式支持很让人头痛 1.最基础的音频和视频标签的使用 ...

随机推荐

  1. js 大厦之JavaScript事件

    1.js事件简介 事件(Event) 是 JavaScript 应用跳动的心脏 ,进行交互,使网页动起来.也是把所有东西粘在一起的胶水.当我们与浏览器中 Web 页面进行某些类型的交互时,事件就发生了 ...

  2. UML2.0最新版入门图解

    一.UML概述 UML(UnifiedModelingLanguage)统一建模语言,是面向对象软件的标准化建模语言.由于面向对象软件开发需要经过OOA(面向对象分析),OOD(面向对象设计),OOP ...

  3. QQ的成功，远没有你想象的那么顺利和轻松

    本文来自公众号“傅老师”(ID:fustory)的原创分享,感谢作者. 1.引言 如果QQ是一个人,看似风光,其实从出生到成长,过程饱经错荡,堪算坎坷.它的人生历程确实也够励志的了.   学习交流: ...

  4. Player 播放器开源项目总结

    Android开发中,我们不免会遇到播放器相关开发的需求,以下是本人之前star的开源项目,供大家参考: 一.NBPlayer 项目地址:https://github.com/renhui/NBPla ...

  5. 吴恩达机器学习笔记19-过拟合的问题（The Problem of Overfitting）

    到现在为止,我们已经学习了几种不同的学习算法,包括线性回归和逻辑回归,它们能够有效地解决许多问题,但是当将它们应用到某些特定的机器学习应用时,会遇到过拟合(over-fitting)的问题,可能会导致 ...

  6. 第87节：Java中的Bootstrap基础与SQL入门

    第87节:Java中的Bootstrap基础与SQL入门 前言复习 什么是JQ? : write less do more 写更少的代码,做更多的事 找出所有兄弟: $("div" ...

  7. 空手套白狼,硬阅java字节码class文件

    如下,是一些java字节码也就是原始的class文件,当应用部署到线上之后,我们能够看到的也就是这样的字样了.那么怎样解呢?就让我们一起,来解读解读字节码吧! Offset A B C D E F C ...

  8. silverlight属性改变事件通知

    工作中遇到silverlight本身没有提供的某些属性改变事件,但又需要在属性改变时得到通知,Google搬运stack overflow,原地址 /// Listen for change of t ...

  9. Spring详解（六）------AspectJ 实现AOP

    上一篇博客我们引出了 AOP 的概念,以及 AOP 的具体实现方式.但是为什么要这样实现?以及提出的切入点表达式到底该怎么理解? 这篇博客我们通过对 AspectJ 框架的介绍来详细了解. 1.什么是 ...

  10. Target优化

    优化目标主要包括以下几方面: 1 优化平面文件 如果目标平面文件在某机器的共享目录下,则该机器最好是专门用于文件存储的,如果还应用于其他非文件存储任务,则会降低加载效率 如果Integration s ...