H5說話氣泡點選動畫

摘要： 需求 思路 實現 半透明氣泡製作 html結構 lessrem規則自己換算也可以使用px 對話方塊css動畫 新增計時器完成點選動畫和計時動畫 ...

• 需求
• 思路
• 實現
  • 半透明氣泡製作
    • html結構
    • lessrem規則自己換算也可以使用px
  • 對話方塊css動畫
  • 新增計時器完成點選動畫和計時動畫
    • 封裝功能函式
    • 函式呼叫

需求

還是要先把需求拿出來。 要求：

1. 對話氣泡要有動畫，動畫總共4秒
2. 在沒有點選的時候，氣泡每隔8秒出現一次
3. 在點選的時候，如果動畫沒有播放完畢就不執行，如果動畫播放完畢，立即出現氣泡

然後還是把完成圖拿出來，就是做成下面這個樣子：

思路

1. 首先要製作氣泡
2. 其次使用css製作動畫
3. 新增計時器完成點選動畫和計時動畫

實現

半透明氣泡製作

html結構

<p class="select-toast" id="select-toast">閉上眼睛，用心祈禱，努力的人有回報</p>
複製程式碼

less(rem規則自己換算，也可以使用px)

.select-toast{
position: absolute;//確定對話的位置
top: 3.4rem;
right: 0.2rem;
width: 1.45rem;//確定寬度，高度由文字撐開
padding: 0.18rem;//確定文字距離對話方塊外部的距離
line-height: 0.4rem;//確定文字的行高
color: #d06e5a;//文字顏色
background-color: rgba(255,255,255,0.85);//背景色，半透明
border-radius: 0.2rem;//對話方塊圓角
opacity: 0;//初始情況透明度為0
&::before{//三角的製作
content:"";//偽元素必需
width: 0;//本身的寬高為0
height: 0;
border-width: 0.2rem;//三角形的高
border-color:transparent rgba(255,255,255,0.85) transparent transparent;//角朝左的三角形
border-style: solid;//邊框為實心的
position: absolute;//三角的位置
left: -0.4rem;
top: 0.4rem;
}
}


複製程式碼

對話方塊css動畫

.select-toast.toastAni{
-webkit-animation: toast 4s;//對話方塊的動畫
animation: toast 4s;
}

//對話方塊的動畫定義
@-webkit-keyframes toast {
8%{
opacity: 0.8;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
16%{
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
24%{
opacity: 1;
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
32%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
82.5%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100%{
opacity: 0;
}
}

@keyframes toast {
8%{
opacity: 0.8;
-webkit-transform: scale(0.8);
transform: scale(0.8);
}
16%{
opacity: 1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
24%{
opacity: 1;
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
32%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
82.5%{
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100%{
opacity: 0;
}
}
複製程式碼

新增計時器完成點選動畫和計時動畫

首先要確定一個點選的區域，這個區域一點選，就會觸發氣泡出現

<!--點選<・)))><|出氣泡-->
<div class="fish-click" id="fish-click"></div>
複製程式碼

封裝功能函式

//隨機出現的話術數組
var toastText = [
"哈哈，早安",
"早上吃飯了嗎？",
"好好學習，天天向上",
"閉上眼睛，用心祈禱，努力的人有回報",
"記得早點睡覺",
]

//計時器變數
var fishAlert;
//彈出功能函式
function textShow(aniTime,spaceTime){
//清空計時器
clearInterval(fishAlert);
//解綁事件
$("#fish-click").off("tap");
//設定顯示的文字，隨機生成0-4的整數
var random = Math.floor(Math.random() * 5);
//展示隨機生成的文字
$("#select-toast").html(toastText[random]).addClass("toastAni");
//4000秒後去掉動畫
setTimeout(function(){
//去掉動畫樣式
$("#select-toast").removeClass("toastAni");
//重新繫結事件
$("#fish-click").off("tap").on("tap",function(){
textShow(4000,8000);
})
//新增8秒計時器
fishAlert = setInterval(function(){
//隨機生成0-4的整數
var random = Math.floor(Math.random() * 5);
//新增動畫
$("#select-toast").html(toastText[random]).addClass("toastAni");
setTimeout(function(){
//動畫結束後移除動畫
$("#select-toast").removeClass("toastAni");
},aniTime)
},spaceTime);
},aniTime);
}
複製程式碼

函式呼叫

$(document).ready(function(){
//動畫時間4000ms，間隔時間8000ms
textShow(4000,8000);
})
複製程式碼

整體還是比較簡單的，所以這裡做一下記錄。

@version1.0——2018-11-7——建立《H5說話氣泡點選動畫》

©burning_韻七七