每天学一jquery插件-微信8.0特效
微信8.0特效
看到微信8.0的特效觉得特别喜欢，尤其是炸弹的效果让微信抢红包欢乐了不少，见猎心喜我也自己折腾了一会，搞出来一个在web上可行的效果出来（辣眼睛警告），啊哈~
效果如下
代码部分，解释在下面
<!DOCTYPE html>
<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 = $("<div class='box right'><div class='str'>" + str + "</div></div>");
$right.appendTo($("#chats"));
//假如不是炸弹机器就回复一句话
if (str != "炸弹") {
var $left = $("<div class='box left'><div class='str'>呵呵哒</div></div>")
$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进行修改，此外其他的感觉不难理解
-完事，碎觉