Html5网页页面内应用JSON动漫的完成

日期:2021-02-22 类型:科技新闻 

关键词:网站建设,创建网站,免费建站平台,智能建站,企业建网站

难题情况

有1天大家的UI设计方案师寻找我说,要把网页页面中我自身用程序流程写的动漫,换为她们给的json动漫,缘故是有的动漫很繁杂,自身写起来达不到她们的预期实际效果(写到这里我忽然想起1个难题,这么繁杂的动漫为何不应用gif。。。。坐我对面的安卓系统开发设计小哥答由于gif播发的情况下将会品质不高不顺畅,好吧我信了)

我:????顾客端能够加json动漫,H5网页页面没听闻过能够读json动漫哎

设计方案师1脸毫无疑问,说能够的,有web版本号。

写到这里,我真的好些好夸1波大家的设计方案师妹子了,基本上许多蛮好的处理方式全是在她们的“迫使”之下寻找的(哦,他们还会写H5网页页面。。。要我有何用系列

那难题来了,如何在H5网页页面里边应用json动漫呢

怎样在H5网页页面内应用json动漫

这时候候设计方案师甩了1个连接给我,看这里lottie-web ;我点进去掌握了1下,是Airbnb开源系统的1个动漫库,该库能够进行许多炫酷动漫,应用起来也很简易,设计方案师只必须根据AE做成的动漫导出来JSON文档,随后前端开发应用Lottie立即载入JSON文档转化成动漫,既不必须设计方案师切N多gif,也不必须前端开发去开展繁杂绘图了,1举两得,而且,Lottie全服务平台能用,ios、Android、web、React Native都可以以,且占有运行内存少,载入顺畅。(这么个仙人物品我为何如今才发现。。

说了这么多,那如何在H5网页页面里边应用呢?

很简易了,设计方案师转化成的文档夹发给你(设计方案师那边只用在AE中加个lottie软件,导出来就可以了),开启以后应当是这模样的,开启demo.html就了解是如何用的了(因此我还在这里写甚么技术性文章内容

玩笑话归玩笑话,实际上在应用中還是碰到了许多坑的,这里纪录几个应用时留意的地区

1.demo.html里边有许多内联的物品,应用时堆积在网页页面内不太好看

细心看1下,实际上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文档里边的数据信息文件格式是这样的(过长了 截不完

那假如你要在独立的1个html里边应用script的方法引进json文档的话,会出错,因此必须改动json文档,在前面再加自变量,取值。以下图:

这样你能够根据像引进js文档的方法1样的引进该json

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

这样能用的demo.html就缩减变成下面这样

<html xmlns="http://www.w3.org/1999/xhtml">
<meta charset="UTF⑻">
<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% 宽度兼容垂直居中 两侧漏出了黑色的情况色,见下图蓝色框起来的一部分)

换为iPhone X的显示屏下,相反,主要表现出来是宽度100% 高宽比兼容垂直居中,左右漏出黑色情况色,见下图蓝色框起来的一部分(究其缘故是由于iphonex显示屏较长

这个合理布局好熟习哇,跟img的object-fit特性赋值为contain的情况下主要表现1致(object-fit也是藏宝,有兴趣爱好的同学能够去科学研究1下,十分功能强大)

我这里处理设计方案师的要求关键提升下面的编码:

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;
}

最后实际效果:

总结

以上照片截图全是静态数据的,具体是有1个动态性实际效果的,我不知道道如何加上动图就没弄了,感兴趣爱好的能够试1下。

可用范畴:我觉得1般全屏的或部分很繁杂的动漫可使用这个方式1试,比gif要顺畅,适配性也做得非常好,1些安卓系统商品较为炫酷的开屏便是应用的这个方式,H5网页页面的话,简易动漫1般自身程序流程完成便可以,还能够防止踩坑。

参照连接:
lottie官方网站
lottie-web github详细地址

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。

上一篇:HTML5中的互联网储存完成方法 返回下一篇:没有了