每天学一个jquery插件-微信8.0特效

每天学一jquery插件-微信8.0特效

微信8.0特效

看到微信8.0的特效觉得特别喜欢,尤其是炸弹的效果让微信抢红包欢乐了不少,见猎心喜我也自己折腾了一会,搞出来一个在web上可行的效果出来(辣眼睛警告),啊哈~

效果如下
每天学一个jquery插件-微信8.0特效_第1张图片

代码部分,解释在下面


<html>
	<head>
		<meta charset="utf-8">
		<title>微信的特效title>
		<script src="js/jquery-3.4.1.min.js">script>
		<style>
			*{
      
				margin: 0;
				padding: 0;
			}
			body,html{
      
				height: 100%;
			}
			#div{
      
				background-color: rgb(245,245,245);
				width: 500px;
				height: 100%;
				margin: 0 auto;
				display: flex;
				flex-direction: column;
			}
			#chats{
      
				border-bottom:1px solid lightgray;
				flex:1;
				overflow-y: auto;
				overflow-x: hidden;
			}
			#write{
      
				min-height: 50px;
				display: flex;
				align-items: center;
			}
			#input{
      
				background-color: white;
				border: 1px solid lightgray;
				height: 36px;
				margin: 0 5px;
				flex:1;
				outline: none;
			}
			#send{
      
				background-color: #27ae60;
				color: white;
				cursor: pointer;
				outline: none;
				border: 1px solid white;
				height: 36px;
				min-width: 50px;
				margin-right:5px;
			}
			.right{
      
				text-align: right;
				display: flex;
				justify-content: flex-end;
			}
			.right .str{
      
				background-color: #2ecc71;
				max-width: 300px;
				word-wrap: break-word;
				border: 1px solid white;
				padding: 5px;
			}
			.left{
      
				text-align: left;
				display: flex;
				justify-content: flex-start;
			}
			.left .str{
      
				background-color: white;
				max-width: 300px;
				word-wrap: break-word;
				border: 1px solid lightgray;
				padding: 5px;
			}
			.box.left{
      
				transform-origin: 0 0;
			}
			.box.right{
      
				transform-origin: 100% 100%;
			}
			.box{
      
				color: black;
				padding: 5px;
				margin:5px;
				position: relative;
				min-height: 10px;
			}
			.dh1{
      
				animation: dh1 1.5s linear;
			}
			.dh2{
      
				animation: dh2 1.5s linear;
			}
			.dh3{
      
				animation: dh3 1.5s linear;
			}
			@keyframes dh1{
      
				0%{
      
					transform: rotate(0deg);
				}
				50%{
      
					transform: rotate(-180deg);
				}
				100%{
      
					transform: rotate(0deg);
				}
			}
			@keyframes dh2{
      
				0%{
      
					transform: rotate(0deg);
				}
				50%{
      
					transform: rotate(90deg);
				}
				100%{
      
					transform: rotate(0deg);
				}
			}
			@keyframes dh3{
      
				0%{
      
					transform: rotate(0deg);
				}
				50%{
      
					transform: rotate(-45deg);
				}
				100%{
      
					transform: rotate(0deg);
				}
			}
		style>
	head>
	<body>
		<div id="div">
			<div id="chats">div>
			<div id="write">
				<input type="text" id="input" />
				<button id="send">发送button>
			div>
		div>
	body>
html>
<script>
	$(function() {
      
		$("#send").click(function() {
      
			var str = $("#input").val() == "" ? "这个人很懒啥也没输入" : $("#input").val();
			var $right = $("
" + str + "
"
); $right.appendTo($("#chats")); //假如不是炸弹机器就回复一句话 if (str != "炸弹") { var $left = $("
呵呵哒
"
) $left.appendTo($("#chats")) } else { //找到这个对话的上3句对话分别插入3个动画帧 var t1 = $right.prev(); var t2 = $right.prev().prev(); var t3 = $right.prev().prev().prev(); t1.addClass("dh1"); t2.addClass("dh2"); t3.addClass("dh3"); //在动画结束后回收动画类 setTimeout(function(){ t1.removeClass("dh1") t2.removeClass("dh2") t3.removeClass("dh3") },1500) } }) })
script>

思路解释

  • 理解起来并不难,你看我代码那么多其实核心部分就一丢丢,其他的代码量都在模仿界面外观去了,额,不过还是辣眼睛的外观,包括特效部分
  • 咱们要实现一个效果首先得分析这是个啥,8.0特效表情里面有三种效果常见,第一种是动态表情,其实就是单个表情发过来会自己变成一个一次性的gif图片,播完销毁换成静态文本,这个比较好理解,然后就是第二种遮罩动画效果,就是烟花礼炮之类的,单个发出来会给你屏幕不可操作然后放对应的动画特效,这个也比较好实现,接着就是讲第三种了
  • 单个炸弹发出去,会有第二种的遮罩动画,还会将临近的几条信息框"炸歪掉"然后复位。
  • 这样子就好理解了,一边播放动画然后一边找到上面几个临近的信息给他炸歪掉的动画
  • 然后我上面的效果没有动画遮罩,并且动画也不完善,不过我还是将炸歪掉做出来了(我也不知道我为啥一直执着炸歪掉~)
  • 反正这里面直接通过动画帧实现的效果,关于旋转的特例我之前也研究过就是那个花旋转图标的那一次,就是原本的旋转是中心点作原点的,不过可以通过transform-orgin进行修改,此外其他的感觉不难理解
    -完事,碎觉

你可能感兴趣的:(每天学一个jquery插件,javascript,jquery)