h5引入json_H5页面内使用JSON动画
问题背景
有一天我们的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上提供的地址
动画需要的json数据放在data.json文件里面,但是给出的json文件里面的数据格式是这样的(太长了 截不完
那如果你要在单独的一个html里面使用script的方式引入json文件的话,会报错,所以需要修改json文件,在前面加上变量,赋值。如下图:
这样你可以通过像引入js文件的方式一样的引入该json
这样可用的demo.html就缩减成了下面这样
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;
}
var params = {
container: document.getElementById('lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
animationData: animationData
};
var anim;
anim = lottie.loadAnimation(params);
当然,你如果使用的是js模块化编程的话,可以不用更改data.json,直接import进来就行了,如下:
import animationData from './data.json'
2.使动画适配移动端
之所以觉得这是个坑是因为,设计师给我的动画是全屏且非透明底的,然后她要求我将这个动画以宽度100% 高度垂直居中截取的方式定位,我在浏览器里面试了下,360*640屏幕下,宽度100%,表现形式是这样的(看上去是高度100% 宽度适配居中 两边漏出了黑色的背景色,见下图蓝色框起来的部分)
换成iPhone X的屏幕下,相反,表现出来是宽度100% 高度适配居中,上下漏出黑色背景色,见下图蓝色框起来的部分(究其原因是因为iphonex屏幕较长
这个布局好熟悉哇,跟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;
}
最终效果:
总结
以上图片截图都是静态的,实际是有一个动态效果的,我不知道怎么添加动图就没弄了,感兴趣的可以试一下。
适用范围:
我感觉一般全屏的或者局部很复杂的动画可以使用这个方法一试,比gif要流畅,兼容性也做得不错,一些安卓产品比较酷炫的开屏就是使用的这个方法,H5页面的话,简单动画一般自己程序实现就可以,还可以避免踩坑。
h5引入json_H5页面内使用JSON动画相关推荐
- h5 跳转上个页面刷新_H5实现页面内跳转页面
W3School.com.cn 注释:由于链接的目标匹配 iframe 的名称,所以链接会在 iframe 中打开. 原文来源:http://www.w3school.com.cn JS实现页面内跳转 ...
- 微信H5页面内实现一键关注公众号
H5页面内实现关注公众号的微信JSSDK没有相关接口开放,因此就得动点脑筋来实现该功能了.下面的方法就是通过一种非常蹊跷的方式实现的. 首先,需要在公众号内发表一篇原创文章,注意是原创文章,然后由另一 ...
- html 怎么编写飞机移动,如何运用CSS3轻松实现H5页面里的飞行动画
原标题:如何运用CSS3轻松实现H5页面里的飞行动画 随着h5页面的宣传优势,越来越的企业做活动开始追求移动端的展示效果 像下图这样一个h5页面首屏,我们如果给元素添加了动画之后,看上去是不是活跃了许 ...
- js 跳转到指定位置 高德地图_在H5页面内通过地址调起高德地图实现导航
项目中用到的一个功能是要通过点击地址来实现打开地图app实现地址导航. 如下图: 实现思路就是在H5页面内通过点击marker图标然后进行当前位置与页面上地址的路程规划与导航. 由于项目中用到的是高德 ...
- iframe和iframe实现页面内嵌套一个页面(jsp)
相信刚学习javaweb的同学都十分好奇页面上点击一个按钮下面就显示一个页面,点击不同的导航栏按钮,下方就会显示不同内容,这就用到了iframe标签的src属性.下面就给大家介绍一下iframe的使用 ...
- android页面跳转时获取地址栏,Android 利用scheme页面内跳转协议进行跳转
什么是 URL Scheme? android中的scheme是一种页面内跳转协议. 通过定义自己的scheme协议,可以非常方便跳转app中的各个页面: 通过scheme协议,服务器可以定制化告诉A ...
- 【杂记】(富文本框回填值、ajax数据回填按钮年级学科、去除数组中数组外包的引号、多重循环的写法、微测评获奖页面的内容 循环拼接写法、textarea禁止拖动、html基本、透明度、页面内出现滚动条)
1. 富文本框回填值 for(var i = 0;i<res.data.choiceoptinfo.length;i++){ueArr[i].ready(function(){//选项ueArr ...
- 猫客页面内组件的动态化方案-Tangram 2.0
Tangram 2.0 库 Android Tangram-Android Virtualview-Android iOS Tangram-iOS Virtualview-iOS 背景 技术背景 一直 ...
- 页面内锚点定位及其跳转
一.前言 这篇文章我们来看一个网页中常用的小功能--锚点定位及其跳转.简单理解,这个功能就是点击"目录"中相应的"标题",对应"滚动跳转"到 ...
最新文章
- python | gtts 将文字转化为语音内容
- tensorrt 低精度推理
- Python3 简明教程
- 神经网络中的矩阵求导及反向传播推导
- 浅析商业银行“业务连续性管理体系”的构建
- SpringCloud Netflix Ribbon
- (简单) POJ 3984 迷宫问题,BFS。
- Leetcode--845. 数组中的最长山脉
- erlang lists模块函数使用大全
- 字符串比较strcmp
- .gitignore更新后如何生效
- anaconda如何装python_如何在已安装Python条件下,安装Anaconda,,并将原有Python添加到Anaconda中...
- 专访 openEuler 江大勇:对美好的向往就是越有能力越开放
- memcache的简单应用
- 单片机---HLK-W801并口驱动ST7789
- 【Excel 教程系列第 5 篇】查找重复值
- linux系统的优点
- 小学计算机课题研究报告,(完整版)信息技术与小学学科教学整合的研究课题申请报告...
- Django——创建数据库和表
- Linux驱动子系统之I2C(一)