作者：旺仔
      前几天，支付宝又为我们作了一项公益，那就是替我们算了2017年花了多少钱，剁了多少次手，当然，作为一位前端工作者来说，最吸引我的地方就是今年的支付宝年度账单比往年的在交互效果上做得更加震撼，这也让我萌生了模仿的想法，当然，年度账单这个单页说不定就是阿里的某位p6做出来了，话又说回来了，阿里的p6还写代码吗？
又扯远了，下面开始步入正题：
请公司的ios开发主管把支付宝年度账单抓包抓下来之后，又让我小小的有些失望，因为我发现支付宝那些震撼的过度动画都是用短视频衔接的，哎，既然，阿里的p6们都想偷偷懒，那我既然要模仿就模仿到底吧。
我用的是jquery fullpage插件来进行全屏切换的实现，这里的jquery fullpage插件用起来真的是不错，（这里有它的中文学习文档，有兴趣的小伙伴们可以去看看http://www.dowebok.com/77.html）。
个人习惯的原因，还是先贴代码吧：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery-1.8.3.min.js"></script><script src="js/jquery.fullPage.min.js"></script><script src="js/jquery.easing.min.js"></script><link href="css/rem.css" type="text/css"></head><style>* {margin: 0;padding: 0;}       video {margin: 0;padding: 0;object-fit: fill;}      body {width: 100%;}     .section {position: relative;}      .section h3,h4 {font-size: 3rem;text-align: center;padding-top: 3%;}        .section p {font-size: 2rem;text-indent: 2em;}      .section_1 {background: white;position: absolute;top: 60%;width: 50%;border-radius: 10px;line-height: 55px;left: -50%;}     .section_2,.section_2_1 {background: white;position: absolute;top: 32%;width: 70%;border-radius: 10px;line-height: 55px;left: -70%;padding-bottom: 3%;}     .section_2 p,.section_2_1 {text-indent: 0;}     .section img {width: 20%;position: absolute;right: -20%;top: 17%;}      .section_3,.section_3_1 {background: white;position: absolute;top: 85%;width: 45%;border-radius: 10px;line-height: 55px;left: 30%;padding-bottom: 3%;opacity: 0;}       .section_3 p,.section_3_1 p {text-align: center;text-indent: 0;padding-top: 3%;}        .section_3 span,.section_3_1 span {font-size: 1.5rem;display: block;text-align: center;}        .jiao,.jiao_1 {display: block;width: 1.5rem;height: 1.5rem;transform: rotate(45deg);position: absolute;top: -10px;background: white;left: 76%;}     #dowebok .section .add_animate {transform: rotate(360deg);transition: all 1s ease-in-out;right: 30%;}       #dowebok .section .remove_animate {transform: rotate(0deg);transition: all 1s ease-in-out;right: -20%;}     .section1 {background: url(images/1.png) no-repeat;background-size: 100% 100%;}     .section2 {background: url(images/2.png) no-repeat;background-size: 100% 100%;}.section3 {background: url(images/3.png) no-repeat;background-size: 100% 100%;}      .section4 {background: url(images/4.png) no-repeat;background-size: 100% 100%;}     .section5 {background: url(images/5.png) no-repeat;background-size: 100% 100%;}     .section6 {background: url(images/6.png) no-repeat;background-size: 100% 100%;}     .section7 {background: url(images/7.png) no-repeat;background-size: 100% 100%;}     .section8 {background: url(images/8.png) no-repeat;background-size: 100% 100%;}</style><body><div id="dowebok"><div class="section section1"><video id="video2" preload width="100%" height="100%" muted="muted" x-webkit-airplay="true" webkit-playsinline="true" playsinline style="display: none;"><source src="data:images/2-1.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video><h3>2018年度账单</h3><div class="section_1"><p>时光总是偷偷流流逝</p><p>转眼间一年又过去了</p><p>打开支付宝账单</p><p>这一年你又被坑了多少钱呢？</p></div></div><div class="section section2"><video id="video1" muted="muted" x-webkit-airplay="true" webkit-playsinline="true" playsinline width="100%" height="100%" style="display: none;"><source src="data:images/1-2.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video><video id="video4" preload muted="muted" x-webkit-airplay="true" webkit-playsinline="true" playsinline width="100%" height="100%" style="display: none;"><source src="data:images/3-2.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video><h3>2018年度账单</h3><div class="section_2"><span class="jiao"></span><h4>100万</h4><p>2017年你更爱买化妆品类商品共花费100万美元</p><p>爱买不代表喜欢更代表剁手</p></div><img src="data:images/meifu.jpg" id="meifu"><div class="section_3"><p>网购总支出1000万</p><span>服饰类80%旅游0.0001%通信1%</span></div></div><div class="section section3"><video id="video3" muted="muted" x-webkit-airplay="true" webkit-playsinline="true" playsinline preload width="100%" height="100%" style="display: none;"><source src="data:images/2-3.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video><video id="video6" muted="muted" x-webkit-airplay="true" webkit-playsinline="true" playsinline preload width="100%" height="100%" style="display: none;"><source src="data:images/4-3.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video><h3>2018年度账单</h3><div class="section_2_1"><span class="jiao_1"></span><h4>100万</h4><p>2017年你更爱买化妆品类商品共花费100万美元</p><p>爱买不代表喜欢更代表剁手</p></div><img src="data:images/meifu.jpg" id="meifu_1"><div class="section_3_1"><p>网购总支出1000万</p><span>服饰类80%旅游0.0001%通信1%</span></div></div><div class="section section4"><video id="video5" muted="muted" x-webkit-airplay="true" webkit-playsinline="true" playsinline preload width="100%" height="100%" style="display: none;"><source src="data:images/3-4.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video><video id="video8" muted="muted" x-webkit-airplay="true" webkit-playsinline="true" playsinline preload width="100%" height="100%" style="display: none;"><source src="data:images/5-4.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video><h3>2018年度账单</h3></div><div class="section section5"><video id="video7" muted="muted" x-webkit-airplay="true" webkit-playsinline="true" playsinline preload width="100%" height="100%" style="display: none;"><source src="data:images/4-5.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video><video id="video10" muted="muted" x-webkit-airplay="true" webkit-playsinline="true" playsinline preload width="100%" height="100%" style="display: none;"><source src="data:images/6-5.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video><h3>2018年度账单</h3></div><div class="section section6"><video id="video9" muted="muted" x-webkit-airplay="true" webkit-playsinline="true" playsinline preload width="100%" height="100%" style="display: none;"><source src="data:images/5-6.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video><video id="video12" muted="muted" x-webkit-airplay="true" webkit-playsinline="true" playsinline preload width="100%" height="100%" style="display: none;"><source src="data:images/7-6.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video><h3>2018年度账单</h3></div><div class="section section7"><video id="video11" muted="muted" x-webkit-airplay="true" webkit-playsinline="true" playsinline preload width="100%" height="100%" style="display: none;"><source src="data:images/6-7.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video><video id="video14" muted="muted" x-webkit-airplay="true" webkit-playsinline="true" playsinline preload width="100%" height="100%" style="display: none;"><source src="data:images/8-7.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video><h3>2018年度账单</h3></div><div class="section section8"><video id="video13" muted="muted" x-webkit-airplay="true" webkit-playsinline="true" playsinline preload width="100%" height="100%" style="display: none;"><source src="data:images/7-8.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。</video><h3>2018年度账单</h3></div></div></body><script>$(function() {$(".section_1").animate({'left': '10%'}, 1000, 'easeOutQuint');$('#dowebok').fullpage({scrollingSpeed:0,afterLoad: function(anchorLink, index) {if(index == '1') {$(".section_1").delay(3000).animate({'left': '10%'}, 1000, 'easeOutQuint');};if(index == '2') {$("#meifu").delay(1000).animate({"right": '30%'}, 1000, 'easeOutQuint');$(".section_2").delay(1500).animate({'left': '5%'}, 1000, 'easeOutQuint');$(".section_3").delay(1500).animate({'top': '80%','opacity': '1'}, 1000, 'easeOutQuint')}if(index == '3') {$("#meifu_1").delay(1500).addClass("add_animate").removeClass('remove_animate');$(".section_2_1").delay(500).animate({'left': '5%'}, 1000, 'easeOutQuint');$(".section_3_1").delay(500).animate({'top': '80%','opacity': '1'}, 1000, 'easeOutQuint')}if(index == '4') {}if(index == '5') {}},onLeave: function(index, nextIndex, direction) {if(index == '1') {playVideo($("#video1"));$(".section_1").animate({'left': '-50%'}, 1000, 'easeOutQuint');};if(index == '2') {playVideo($("#video3"));playVideo($("#video2"));$("#meifu").animate({"right": '-20%'}, 1000, 'easeOutQuint');$(".section_2").animate({'left': '-70%'}, 1000, 'easeOutQuint');$(".section_3").animate({'top': '85%','opacity': '0'}, 1000, 'easeOutQuint')};if(index == '3') {playVideo($("#video4"));playVideo($("#video5"));$("#meifu_1").delay(500).addClass("remove_animate").removeClass('add_animate');$(".section_2_1").animate({'left': '-70%'}, 1000, 'easeOutQuint');$(".section_3_1").animate({'top': '85%','opacity': '0'}, 1000, 'easeOutQuint')};if(index == '4') {playVideo($("#video6"));playVideo($("#video7"));$("#meifu_1").delay(500).addClass("remove_animate").removeClass('add_animate');$(".section_2_1").animate({'left': '-70%'}, 1000, 'easeOutQuint');$(".section_3_1").animate({'top': '85%','opacity': '0'}, 1000, 'easeOutQuint')};if(index == '5') {playVideo($("#video8"));playVideo($("#video9"));};if(index == '6') {playVideo($("#video10"));playVideo($("#video11"));};if(index == '7') {playVideo($("#video12"));playVideo($("#video13"));};if(index == '8') {playVideo($("#video14"));};},});//短视频播放逻辑function playVideo(ele){ele.show();ele[0].play();ele.click();ele[0].addEventListener("ended", function() {ele.hide();});}});</script></html>

（这里的资源和代码我会在之后上传到我的码云和github里）

下面是录制的gif动图：
（这里的gif都已经失真了，感兴趣的小伙伴可以到我的码云上把资源下载下来自己运行，效果看起来还是不错的）
好的下面开始讲一下我的思路的吧，首先用fullpage作出8个页面，然后在每个页面切换的时候播放从支付宝那里抓包抓来的相应的短视频，当然有前进的短视频就有后退的短视频，然后判断每个短视频播放结束时将短视频video隐藏，同理，其他的也是一样。是不是说起来很简单，其实做起来也不是很难，有时候有些事情你还是要去做的，不做你永远也不知道原来大神们做的东西你也可以做出来。又扯远了，敲黑板！！敲黑板！！！！下面开始划重点了：
首先我用的jQuery的easing.min.js来作我的基础动画库，这里的动画库其实我准备是用来做那些在背景上面飘来飘去的一些元素用的，可是最后我发现这些飘来飘去的元素等后期视频与切换衔接好之后在添加也不迟，毕竟这些飘来飘去的元素不是这个fullpage的重点。其次我应用了rem，这个rem.css是本人仿照苏宁写得一个移动端适配的小插件，（这里为什么没用js直接算呢，原因很简单，js要刷新页面才会执行，而这里如果用css直接写出来的话在调试移动端页面的时候就不用每换一个屏宽就刷新一下页面了）
下面开始说代码吧，哎，其实代码我一点也不想说，主要每个人的思路不一样，自然而然可能实现的方式就不一样。算了，不说了，感兴趣的小伙伴把代码拿下来自己研究吧。
这里把这个页面存在的问题说一下，首先因为过度动画是短视频，那么这个就对用户的网络有要求，其次安卓手机除谷歌浏览器之外其他浏览器的video都会自带一个controls，还有就是在这个页面对服务器的响应速度要求真的很高，也许也只有阿里这种互联网界的boss能承载的起吧。小伙伴们想要将其拿到项目里的话还需要斟酌。我这里只能算是实现了，小伙伴们要是有更好的优化方案，真心的迫切的希望和我交流~~~

支付宝年度账单交互效果的实现相关推荐

  1. html仿支付宝个人中心,HTML仿支付宝/微信账单交互效果

    这几天做账单列表,看见支付宝的账单的体验很舒服,于是自己想仿一个出来.但是过程中遇到了问题当时思前想后想用js来判断容器的位置,让容器之间相互产生交互.无奈自己太年轻了. 导致很多兼容不断在修复,于是 ...

  2. android view上下滚动条,Android自定义View六（ViewGroup水平垂直滚动实现类似支付宝年度账单的效果）...

    先看两张效果图 1.垂直滑动 onegif.gif 2.水平滑动 twoGIF.gif 先看使用方法 1.AndroidStudio 引入 Project.gradle repositories { ...

  3. 和包支付的钱哪里来_2019年支付宝年度账单出炉，来看看你究竟花了多少钱

    今天早上,打开支付宝付款时,看见搜索框出现2019年账单时,该来的还是要要来.随后,小盾打开支付宝年度帐单看了起来,顿时就心中就出现了这样的疑问,我哪来的这么多钱?我怎么花了这么多钱?我有那么多钱吗? ...

  4. android 支付宝月账单 统计图_@三明人 支付宝年度账单来了！今天的你晒账单了吗？...

    支付宝2019年度账单出炉了!!! 支付宝账单登上微博热搜. 不查不知道 一查才知道自己原来曾经是"富豪" #看完账单的你#也上热搜 ▼ 不少人发出灵魂拷问: 我哪来这么多钱??? ...

  5. android 支付宝月账单 统计图_支付宝年度账单也太敷衍了！

    今天支付宝推出了2019年度账单,满怀期待地打开,想看看能否从数据中挖掘出2019年的一些信息,然而太失望了. 在去年关于支付宝账单的问题中,我提到算法可能存在的一些瑕疵,比如对于高铁购票/退票被反复 ...

  6. 如何查看支付宝年度账单？快来看看你的关键词是什么

    2020年已经结束,新的一年里支付宝年度账单如期而至,现在支付宝用户可以在手机端查看个人的2020年年度账单,可以查看过去的12个月里的消费支出,生活穿搭等情况.编辑宋九九 如何查看支付宝年度账单? ...

  7. 蚂蚁金服回应，支付宝年度账单“虚高”

    杨元庆:寻找合适时机 在中国市场打好手机业务翻身仗 北京时间1月8日早间消息,在CES 2020期间,联想集团董事长兼CEO杨元庆接受媒体采访,谈到了联想手机业务的发展. 杨元庆表示,联想手机在过去一 ...

  8. Q新闻丨Intel芯片大漏洞，修复将大幅降低性能；C语言成年度编程语言；支付宝年度账单被指捆绑协议；微信称并未查看用户聊天记录...

    编辑|小智 微信发文称无权限查看用户聊天记录 近期,一则"我们天天在看你的微信"的消息在业内流传.对此,微信团队今日通过其官方账号"微信派"发表澄清声明,称微信 ...

  9. 支付宝年度账单怎么看啊，附建议

    支付宝年度账单怎么看啊,附建议 2019支付宝年度账单已经出来了,大家现在就可以进入支付宝进行查看了.支付宝年度账单包含了我们生活.交通.集福等多方面的信息.想要了解的,一起来看看吧. 第一:你可以升 ...

最新文章

  1. iOS - 支持水平 / 垂直显示自动滚动的跑马灯控件 --- SKAutoScrollLabel 的使用和实现
  2. AI一分钟 | 特朗普以国家安全为由否决博通收购高通；阿里发起时尚AI算法大赛
  3. android 2.0 软件,Apeaksoft Android Toolkit
  4. mega_[MEGA DEAL] Android课程的Java基础知识（61％折扣）
  5. ELF文件装载链接过程及hook原理
  6. 论中国传统辩证推理科学理论范式(ZZ)
  7. 球球大作战显示中国服务器较差,球球大作战延迟卡顿原因分析及解决方法
  8. 计算机office基础知识的试题,office计算机基础知识(附答案).doc
  9. 链表最小结构(C++版本)
  10. win iis mysql php_Windows Server 2012 R2 IIS8.5+PHP（FastCGI）+MySQL环境搭建教程
  11. 开放API接口 笑话、天气、新闻 1
  12. 整理总结：深入浅出统计学 —— 相关与回归
  13. 十、基于FPGA的PCIE协议介绍（一）
  14. 椭圆曲线方程加解密算法研究（一）
  15. win7映射网络驱动器消失了_win7系统映射网络驱动器出现问题的解决方法
  16. elasticsearch 文档增删改
  17. 计算机光驱启动设置,bios设置光驱启动图文教程
  18. 批量生成MySQL不重复手机号大表
  19. 学习日记day31 平面设计 字体构图风格2
  20. LFWA人脸属性数据集解析

热门文章

  1. python项目对接腾讯云发送短信
  2. C语言数据的输入与输出
  3. 学习了C语言的第一个语言
  4. 前端网络请求详细介绍
  5. 在线支付线上支付是什么？其应用范围
  6. 海量数据大课学习笔记（8）-账号微服务注册模块+短信验证码+阿里云OSS开发实战-小滴课堂
  7. python敲七游戏代码_Python_day04_2018.7.5-(Lis列表的介绍,增删改查)
  8. 2021-09-21如何在PCB上做一个城市地铁图？
  9. 方特主题公园体验科幻神奇
  10. html播放mov格式视频,jQuery及video标签视频播放弹窗插件支持mp4,mov等格式详解(图文)...