支付宝年度账单交互效果的实现

最新推荐文章于 2024-05-16 20:51:29 发布

置顶旺仔520

最新推荐文章于 2024-05-16 20:51:29 发布

阅读量2.1w

点赞数 14

分类专栏： jq js 文章标签：前端支付宝账单动画 jquery

本文链接：https://blog.csdn.net/wangxs520/article/details/79017194

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

3 篇文章 1 订阅

订阅专栏

作者：旺仔

前几天，支付宝又为我们作了一项公益，那就是替我们算了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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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="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能承载的起吧。小伙伴们想要将其拿到项目里的话还需要斟酌。我这里只能算是实现了，小伙伴们要是有更好的优化方案，真心的迫切的希望和我交流~~~

旺仔520

关注

14
点赞
踩
34

收藏

觉得还不错? 一键收藏
16
评论
支付宝年度账单交互效果的实现

作者：旺仔前几天，支付宝又为我们作了一项公益，那就是替我们算了2017年花了多少钱，剁了多少次手，当然，作为一位前端工作者来说，最吸引我的地方就是今年的支付宝年度账单比往年的在交互效果上做得更加震撼，这也让我萌生了模仿的想法，当然，年度账单这个单页说不定就是阿里的某位p6做出来了，话又说回来了，阿里的p6还写代码吗？又扯远了，下面开始步入正题：请公司
复制链接

扫一扫

专栏目录