资讯专栏INFORMATION COLUMN

H5页面内使用JSON动画

anonymoussf / 2149人阅读

摘要:问题背景有一天我们的设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果写到这里我突然想到一个问题,这么复杂的动画为什么不使用。。。。

问题背景

有一天我们的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就缩减成了下面这样




    




当然,你如果使用的是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页面的话,简单动画一般自己程序实现就可以,还可以避免踩坑。

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117300.html

相关文章

  • H5页面使用JSON动画

    摘要:问题背景有一天我们的设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果写到这里我突然想到一个问题,这么复杂的动画为什么不使用。。。。 问题背景 有一天我们的UI设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的json动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果(写到这里我突然想到一个问题,这么...

    TwIStOy 评论0 收藏0
  • H5页面使用JSON动画

    摘要:问题背景有一天我们的设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果写到这里我突然想到一个问题,这么复杂的动画为什么不使用。。。。 问题背景 有一天我们的UI设计师找到我说,要把页面中我自己用程序写的动画,换成他们给的json动画,原因是有的动画很复杂,自己写起来达不到他们的预期效果(写到这里我突然想到一个问题,这么...

    netmou 评论0 收藏0
  • Hybrid APP架构设计思路

    摘要:本文将从以下几个方面阐述架构设计的一些经验和思考。原文及讨论请到通讯作为一种跨语言开发模式,通讯层是架构首先应该考虑和设计的,往后所有的逻辑都是基于通讯层展开。 关于Hybrid模式开发app的好处,网络上已有很多文章阐述了,这里不展开。 本文将从以下几个方面阐述Hybrid app架构设计的一些经验和思考。 原文及讨论请到 github issue 通讯 作为一种跨语言开发模式,通讯...

    hiyayiji 评论0 收藏0
  • HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结

    摘要:年前放假的最后一天,我们上线了独家记忆活动宣传页。微信分享主要代码参考独家记忆当时光凝固,当回忆定格。这是属于我和的独家记忆。 年前放假的最后一天,我们上线了「My Flyme 独家记忆」 H5 活动宣传页。 因种种原因,直到放假前几天,才突然要求我们参与并开始项目的前端部分。此时大概的情况是:所有数据已计算完毕;后端接口已完成待联调;交互视觉只出了不到四分之一(一共二十多个页面);我...

    Anonymous1 评论0 收藏0
  • HTML5 活动宣传页「My Flyme 独家记忆」开发实践总结

    摘要:年前放假的最后一天,我们上线了独家记忆活动宣传页。微信分享主要代码参考独家记忆当时光凝固,当回忆定格。这是属于我和的独家记忆。 年前放假的最后一天,我们上线了「My Flyme 独家记忆」 H5 活动宣传页。 因种种原因,直到放假前几天,才突然要求我们参与并开始项目的前端部分。此时大概的情况是:所有数据已计算完毕;后端接口已完成待联调;交互视觉只出了不到四分之一(一共二十多个页面);我...

    SnaiLiu 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<