整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
言
此次分享是一次自我組件開(kāi)發(fā)的總結(jié)，還是有很多不足之處，望各位大大多提寶貴意見(jiàn)，互相學(xué)習(xí)交流。
分享內(nèi)容介紹
通過(guò)原生js代碼，實(shí)現(xiàn)粒子爆炸效果組件 組件開(kāi)發(fā)過(guò)程中，使用到了公司內(nèi)部十分高效的工程化環(huán)境，特此打個(gè)廣告： 新浪移動(dòng)誠(chéng)招各種技術(shù)大大！可以私聊投簡(jiǎn)歷哦！
效果預(yù)覽
效果分析
由以上四點(diǎn)分析后，動(dòng)畫(huà)實(shí)現(xiàn)有哪些實(shí)現(xiàn)方案呢？
`不可取，效果可多次連點(diǎn)，css狀態(tài)變換與需求不符`
`不可取，單次執(zhí)行動(dòng)畫(huà)沒(méi)有問(wèn)題，但是存在效果的固定，以及無(wú)法連續(xù)執(zhí)行動(dòng)畫(huà)`
`實(shí)現(xiàn)層面來(lái)說(shuō)，行得通，但是評(píng)論列表長(zhǎng)的時(shí)候，dom數(shù)量巨大，且css大量動(dòng)畫(huà)造成代碼量沉重、無(wú)隨機(jī)性`
`可行，但是canvas維護(hù)成本略高，且自定義功能難設(shè)計(jì)，屏幕適配也有一定成本`
`可行，但是創(chuàng)建style樣式表，引發(fā)css重新渲染頁(yè)面，會(huì)導(dǎo)致頁(yè)面的性能下降，且拋物線css的復(fù)雜度不低，暫不作為首選`
`可行，但是刷幀操作會(huì)造成性能壓力`
結(jié)論
canvas雖說(shuō)可行，但由于其開(kāi)發(fā)弊端 本次分享不以canvas為分享內(nèi)容，而是使用最后一種 js刷幀的dom操作
組件結(jié)構(gòu)
由截圖分享，動(dòng)畫(huà)可以分為兩個(gè)模塊，首先，隨機(jī)發(fā)散的粒子具有共性：拋物線動(dòng)畫(huà)，淡出，渲染表情
而例子數(shù)量變多之后則為截圖中的效果
但是，由于性能原因，我們需要做到粒子的掌控，實(shí)現(xiàn)資源再利用，那么還需要第二個(gè)模塊，作為粒子的管控組件
所以： 此功能可使用兩個(gè)模塊進(jìn)行開(kāi)發(fā)： partical.js 粒子功能 與 boom.js 粒子管理
實(shí)現(xiàn) Partical.js
1. 前置資源：拋物線運(yùn)動(dòng)的物理曲線需要使用Tween.js提供的速度函數(shù)
若不想引入Tween.js 可以使用以下代碼
/** Tween.js
* t: current time（當(dāng)前時(shí)間）；
* b: beginning value（初始值）；
* c: change in value（變化量）；
* d: duration（持續(xù)時(shí)間）。
* you can visit '緩動(dòng)函數(shù)速查表' to get effect
*/
const Quad={
easeIn: function(t, b, c, d) {
return c * (t /=d) * t + b;
},
easeOut: function(t, b, c, d) {
return -c *(t /=d)*(t-2) + b;
},
easeInOut: function(t, b, c, d) {
if ((t /=d / 2) < 1) return c / 2 * t * t + b;
return -c / 2 * ((--t) * (t-2) - 1) + b;
}
}
const Linear=function(t, b, c, d) {
return c * t / d + b;
}
2. 粒子實(shí)現(xiàn)
實(shí)現(xiàn)思路：
希望在粒子管控組件時(shí)，使用new partical的方式創(chuàng)建粒子，每個(gè)粒子存在自己的動(dòng)畫(huà)開(kāi)始方法，動(dòng)畫(huà)結(jié)束回調(diào)。
由于評(píng)論列表可能存在數(shù)量巨大的情況，我們希望只全局創(chuàng)建有限個(gè)數(shù)的粒子，那么則提供呢容器移除粒子功能以及容器添加粒子的功能，實(shí)現(xiàn)粒子的復(fù)用
partical_style.css
//粒子充滿粒子容器，需要容器存在尺寸以及relative定位
.Boom-Partical_Holder{
position: absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}
particle.js
import "partical_style.css";
class Partical{
// dom為裝載動(dòng)畫(huà)元素的容器 用于設(shè)置位置等樣式
dom=null;
// 動(dòng)畫(huà)開(kāi)始時(shí)間
StartTime=-1;
// 當(dāng)前粒子的動(dòng)畫(huà)方向，區(qū)別上拋運(yùn)動(dòng)與下拋運(yùn)動(dòng)
direction="UP";
// 動(dòng)畫(huà)延遲
delay=0;
// 三方向位移值
targetZ=0;
targetY=0;
targetX=0;
// 縮放倍率
scaleNum=1;
// 是否正在執(zhí)行動(dòng)畫(huà)
animating=false;
// 粒子的父容器，標(biāo)識(shí)此粒子被渲染到那個(gè)元素內(nèi)
parent=null;
// 動(dòng)畫(huà)結(jié)束的回調(diào)函數(shù)列表
animEndCBList=[];
// 粒子渲染的內(nèi)容容器 slot
con=null;
constructor(){
//創(chuàng)建動(dòng)畫(huà)粒子dom
this.dom=document.createElement("div");
this.dom.classList.add("Boom-Partical_Holder");
this.dom.innerHTML=`
<div class="Boom-Partical_con">
Boom
</div>
`;
}
// 在哪里渲染
renderIn(parent) {
// dom判斷此處省略
parent.appendChild(this.dom);
this.parent=parent;
// 此處為初始化 slot 容器
!this.con && ( this.con=this.dom.querySelector(".Boom-Partical_con"));
}
// 用于父容器移除當(dāng)前粒子
deleteEl(){
// dom判斷此處省略
this.parent.removeChild(this.dom);
}
// 執(zhí)行動(dòng)畫(huà)，需要此粒子執(zhí)行動(dòng)畫(huà)的角度，動(dòng)畫(huà)的力度，以及延遲時(shí)間
animate({ deg, pow, delay }={}){
// 后續(xù)補(bǔ)全
}
// 動(dòng)畫(huà)結(jié)束回調(diào)存儲(chǔ)
onAnimationEnd(cb) {
if (typeof cb !=='function') return;
this.animEndCBList.push(cb);
}
// 動(dòng)畫(huà)結(jié)束回調(diào)執(zhí)行
emitEndCB() {
this.dom.style.cssText +=`;-webkit-transform:translate3d(0,0,0);opacity:1;`;
this.animating=false;
try {
for (let cb of this.animEndCBList) {
cb();
}
} catch (error) {
console.warn("回調(diào)報(bào)錯(cuò):",cb);
}
}
// 簡(jiǎn)易實(shí)現(xiàn)slot功能，向粒子容器內(nèi)添加元素
insertChild(child){
this.con.innerHTML='';
this.con.appendChild(child);
}
}
致此，我們先創(chuàng)建了一個(gè)粒子對(duì)象的構(gòu)造函數(shù)，現(xiàn)在考慮一下我們實(shí)現(xiàn)了我們的設(shè)計(jì)思路嗎？
為了更好的展示粒子內(nèi)容，我們特意在constructor里創(chuàng)建了一個(gè) Boom-Partical_con 元素用于模擬slot功能: insertChild方法，用于使用者展示不同的內(nèi)容進(jìn)行爆炸
接下來(lái)考慮一下動(dòng)畫(huà)的實(shí)現(xiàn)過(guò)程，動(dòng)畫(huà)毫無(wú)疑問(wèn)為拋物線動(dòng)畫(huà)，這種動(dòng)畫(huà)在代碼中實(shí)現(xiàn)可以使用物理公式，
但是我們也可以通過(guò)速度曲線實(shí)現(xiàn)，想想上拋過(guò)程可以想成 由于重力影響 ，變成一個(gè)速度逐漸減小的向上位移的過(guò)程，
而下拋過(guò)程可以理解為加速過(guò)程；
則可對(duì)應(yīng)為速度曲線的easeOut 與 easeIn,
而水平方向可以理解為勻速運(yùn)動(dòng)，則是 linear；
我們以水平向右為X正方向0度，順時(shí)針?lè)较蚪嵌仍黾樱?/p>
則 小于 180度為向下， 大于180度為向上
假設(shè)方向?yàn)閌四點(diǎn)鐘`方向，夾角則為 `30` 度，
按照高中物理，大小為N的力:
` 在X軸的分量應(yīng)為 cos(30) * N ` ` 在Y軸的分量應(yīng)為 sin(30) * N`
力的分解圖解
也就是說(shuō) 我們可以知道一個(gè)方向上的力在XY軸的分量大小，
假設(shè)我們將 力 的概念 轉(zhuǎn)化為 視圖中 位移的概念，
我們將 力量1 記為 10vh的大小
于是我們可以定義全局變量
const POWER=10; // 單位 vh 力的單位轉(zhuǎn)化比例 const G=5; // 單位 vh 重力值 const DEG=Math.PI / 180; const Duration=.4e3; //假設(shè)動(dòng)畫(huà)執(zhí)行時(shí)長(zhǎng)400毫秒
由此 我們補(bǔ)全 animate方法
// 執(zhí)行動(dòng)畫(huà) 角度 ， 力 1 ~ 10 ; 1=10vh
animate({ deg, pow, delay }={}) {
this.direction=deg > 180 ? "UP" : "DOWN";
this.delay=delay || 0;
let r=Math.random();
this.targetZ=0;
this.targetY=Math.round(pow * Math.sin(deg * DEG) * POWER);
this.targetX=Math.round(pow * Math.cos(deg * DEG) * POWER) * (r + 1);
this.scaleNum=(r * 0.8) * (r < 0.5 ? -1 : 1);
this.raf();
}
animte的思路為：通過(guò)傳入的角度和力度 計(jì)算目標(biāo)終點(diǎn)位置（因?yàn)榱ψ罱K轉(zhuǎn)化為位移值，力越大，目標(biāo)位移越大）
使用隨機(jī)數(shù)計(jì)算此次動(dòng)畫(huà)的縮放值變化范圍（-0.8 ～ 0.8）
然后執(zhí)行刷幀操作 raf
raf(){
// 正在執(zhí)行動(dòng)畫(huà)
this.animating=true;
// 動(dòng)畫(huà)開(kāi)始時(shí)間
this.StartTime=+new Date();
let StartTime=this.StartTime;
// 獲取延時(shí)
let delay=this.delay;
// 動(dòng)畫(huà)會(huì)在延時(shí)后開(kāi)始，也就是真正開(kāi)始動(dòng)畫(huà)的時(shí)間
let StartTimeAfterDelay=StartTime + delay
let animate=()=> {
// 獲取從執(zhí)行動(dòng)畫(huà)開(kāi)始經(jīng)過(guò)了多久
let timeGap=+new Date() - StartTimeAfterDelay;
// 大于0 證明過(guò)了delay時(shí)間
if (timeGap >=0) {
// 大于Duration證明過(guò)了結(jié)束時(shí)間
if (timeGap > Duration) {
// 執(zhí)行動(dòng)畫(huà)結(jié)束回調(diào)
this.emitEndCB();
return;
}
// 設(shè)置應(yīng)該設(shè)置的位置的樣式
this.dom.style.cssText +=`;will-change:transform;-webkit-transform:translate3d(${this.moveX(timeGap)}vh,${this.moveY(timeGap)}vh,0) scale(${this.scale(timeGap)});opacity:${this.opacity(timeGap)};`;
}
requestAnimationFrame(animate);
}
animate();
}
刷幀操作中判斷了delay時(shí)間的處理以及結(jié)束的時(shí)間處理回調(diào)
那么揭曉來(lái)就剩下 moveX，moveY，scale，opacity的設(shè)置
// 水平方向?yàn)閯蛩?，所以使用Linear
moveX(currentDuration) {
// 此處 * 2 是效果矯正后的處理，可根據(jù)自己的需求修改水平位移速度
return Linear(currentDuration, 0, this.targetX, Duration) * 2;
}
// 縮放 使用了easeOut曲線， 可根據(jù)需求自行修改
scale(currentDuration) {
return Quad.easeOut(currentDuration, 1, this.scaleNum, Duration);
}
// 透明度 使用了easeIn速度曲線，保證后消失
opacity(currentDuration) {
return Quad.easeIn(currentDuration, 1, -1, Duration);
}
// 豎直方向上位移計(jì)算
moveY(currentDuration) {
let direction=this.direction;
if (direction==='UP') {
// G用于模擬上拋過(guò)程的重力
// 如果是上拋運(yùn)動(dòng)
if (currentDuration < Duration / 2) {
// 上拋過(guò)程 我們使用easeOut速度逐漸減小，我們讓動(dòng)畫(huà)在一半時(shí)移到最高點(diǎn)
return Quad.easeOut(currentDuration, 0, this.targetY + G, Duration / 2);
}
// 上拋的下降過(guò)程，從最高點(diǎn)下降
return this.targetY + G - Quad.easeIn(currentDuration - Duration / 2, 0, this.targetY / 2, Duration / 2);
}
// 下拋運(yùn)動(dòng)直接easeIn
return Quad.easeIn(currentDuration, 0, this.targetY, Duration);
}
至此，partical.js 結(jié)束，文件末尾加一行
export default Partical;
此時(shí) 我們的partical.js輸出一個(gè)構(gòu)造函數(shù):
于是對(duì)于粒子來(lái)說(shuō)，只剩下在執(zhí)行animte的時(shí)候 傳入的力的大小，方向，以及延遲時(shí)間
粒子管理 Boom.js
之所以叫Boom是因?yàn)橐婚_(kāi)始組件名叫Boom，其實(shí)叫ParticalController更好一些，哈哈
對(duì)于Boom.js的功能需求為
可達(dá)到效果：
于是粒子管理器構(gòu)架為：
import Partical from "partical.js";
class Boom{
// 實(shí)例化的粒子列表
particalList=[];
// 單次生成的粒子個(gè)數(shù)
particalNumbers=6;
// 執(zhí)行動(dòng)畫(huà)的間隔時(shí)間
boomTimeGap=.1e3;
boomTimer=0;
// 用戶插入粒子的slot 的內(nèi)容
childList=[];
// 默認(rèn)旋轉(zhuǎn)角度
rotate=120;
// 默認(rèn)的粒子發(fā)散范圍
spread=180;
// 默認(rèn)隨機(jī)延遲范圍
delayRange=100;
// 默認(rèn)力度
power=3;
// 此次執(zhí)行粒子爆炸的是那個(gè)容器
con=null;
constructor({ childList , container , boomNumber , rotate , spread , delayRange , power}={}){
this.childList=childList || [];
this.con=container || null;
this.particalNumbers=boomNumber || 6;
this.rotate=rotate || 120;
this.spread=spread || 180;
this.delayRange=delayRange || 100;
this.power=power || 3;
this.createParticals(this.particalNumbers);
}
setContainer(con){
this.con=con;
}
// 創(chuàng)建粒子 存入內(nèi)存數(shù)組中
createParticals(num){
for(let i=0 ; i < num ; i++){
let partical=new Partical();
partical.onAnimationEnd(()=>{
partical.deleteEl();
});
this.particalList.push(partical)
}
}
// 執(zhí)行動(dòng)畫(huà)
boom(){
// 限制動(dòng)畫(huà)執(zhí)行間隔
let lastBoomTimer=this.boomTimer;
let now=+new Date();
if(now - lastBoomTimer < this.boomTimeGap){
// console.warn("點(diǎn)的太快了");
return;
}
this.boomTimer=now;
console.warn("粒子總數(shù):" , this.particalList.length)
let boomNums=0;
// 在內(nèi)存列表找，查找沒(méi)有執(zhí)行動(dòng)畫(huà)的粒子
let unAnimateList=this.particalList.filter(partical=> partical.animating==false);
let childList=this.childList;
let childListLength=childList.length;
let rotate=this.rotate;
let spread=this.spread;
let delayRange=this.delayRange;
let power=this.power;
// 每有一個(gè)未執(zhí)行動(dòng)畫(huà)的粒子，執(zhí)行一次動(dòng)畫(huà)
for(let partical of unAnimateList){
if(boomNums >=this.particalNumbers) return ;
boomNums++;
let r=Math.random();
// 設(shè)置粒子父容器
partical.renderIn(this.con);
// 隨機(jī)選擇粒子的slot內(nèi)容
partical.insertChild(childList[Math.floor(r * childListLength)].cloneNode(true));
// 執(zhí)行動(dòng)畫(huà)，在輸入范圍內(nèi)隨機(jī)角度、力度、延遲
partical.animate({
deg: (r * spread + rotate) % 360,
pow: r * power + 1,
delay: r * delayRange,
});
}
// 如果粒子樹(shù)木不夠，則再次創(chuàng)建，防止下次不夠用
if(boomNums < this.particalNumbers){
this.createParticals(this.particalNumbers - boomNums);
}
}
}
export default Boom;
使用demo
let boomChildList=[];
for(let i=0 ; i < 10; i++){
let tempDom=document.createElement("div");
tempDom.className="demoDom";
tempDom.innerHTML=i;
boomChildList.push(tempDom);
}
let boom=new Boom({
childList: boomChildList,
boomNumber: 6,
rotate: 0,
spread: 360,
delayRange: 100,
power: 3,
});
組件效果預(yù)覽
結(jié)尾
可能效果中實(shí)現(xiàn)的思維還有不妥和欠缺，歡迎各位大大提出寶貴意見(jiàn)，互相交流、學(xué)習(xí)！
原文鏈接：https://zhuanlan.zhihu.com/p/47770130
TML5技術(shù)正在不斷的發(fā)展和更新，越來(lái)越多的開(kāi)發(fā)者也正在加入HTML5陣營(yíng)，甚至在移動(dòng)開(kāi)發(fā)上HTML5的地位也是越來(lái)越重要了。HTML5中的大部分動(dòng)畫(huà)都是通過(guò)Canvas實(shí)現(xiàn)，因?yàn)镃anvas就像一塊畫(huà)布，我們可以通過(guò)調(diào)用腳本在Canvas上繪制任意形狀，甚至是制作動(dòng)畫(huà)。本文就是收集了很多非常富有創(chuàng)意的一些canvas動(dòng)畫(huà)特效例子，這些例子都非常適合大家學(xué)習(xí)。
HTML5 Canvas是一個(gè)神奇的網(wǎng)頁(yè)技術(shù)，我們?cè)贑anvas畫(huà)布上可以做任何有趣的事情。今天要分享的這款瀑布動(dòng)畫(huà)就是利用了HTML5 Canvas的相關(guān)特性實(shí)現(xiàn)的。記得我們?cè)诤茉缫郧敖o大家介紹過(guò)一個(gè)超逼真的HTML5瀑布動(dòng)畫(huà)，也是在Canvas上完成的，非?？帷＝裉斓倪@個(gè)瀑布更加美妙，因?yàn)樗M了整個(gè)瀑布落入湖面的美妙景象，但是從逼真度上來(lái)說(shuō)，還是稍微有待改進(jìn)，不過(guò)個(gè)人覺(jué)得已經(jīng)非常不錯(cuò)了。
之前我們分享過(guò)一款純CSS3雷達(dá)掃描模擬動(dòng)畫(huà)，看起來(lái)十分炫酷。這次我們分享的另外一款雷達(dá)動(dòng)畫(huà)更加讓人震撼，它是基于HTML5和CSS3實(shí)現(xiàn)，它的一大特點(diǎn)是3D立體的視覺(jué)效果，鼠標(biāo)點(diǎn)擊雷達(dá)后將會(huì)展現(xiàn)一張3D立體地圖，并且對(duì)地圖上指定的幾個(gè)地點(diǎn)進(jìn)行坐標(biāo)詳細(xì)信息描述。
之前我們分享過(guò)很多款炫酷的HTML5 Canvas粒子動(dòng)畫(huà)，比如這款HTML5 Canvas 多種炫酷3D粒子圖形動(dòng)畫(huà)和HTML5 Canvas文字粒子動(dòng)畫(huà)就都非常不錯(cuò)。這次我們要給大家?guī)?lái)的是一款基于HTML5 Canvas的圖片粒子沙漏動(dòng)畫(huà)，主要是將一張圖片打散成粒子，然后模擬沙漏將圖片粒子掉落下來(lái)。
HTML5技術(shù)確實(shí)挺強(qiáng)大的，特別是Canvas畫(huà)布更是讓網(wǎng)頁(yè)動(dòng)畫(huà)變得豐富多彩。今天我們分享的是一款基于HTML5 Canvas的火焰文字動(dòng)畫(huà)特效，它可以讓任意文字上方冒出密集的火焰，就像這些文字在熊熊燃燒一樣。與這款火焰動(dòng)畫(huà)類似的還有以前分享的HTML5 Canvas幻彩火焰文字特效。
之前我們分享過(guò)幾款非常炫酷的HTML5粒子動(dòng)畫(huà)，比如這款HTML5像素粉碎圖片動(dòng)畫(huà)和HTML5 Canvas彩色像素進(jìn)度條動(dòng)畫(huà)，都是利用了HTML5的粒子渲染特性實(shí)現(xiàn)。今天我們要分享另外一款基于HTML5和WebGL的粒子爆炸動(dòng)畫(huà)特效，效果非常令人震撼。
還記得很早以前我們?yōu)榇蠹曳窒磉^(guò)一款非常炫酷的HTML5蝴蝶3D動(dòng)畫(huà)，它是基于HTML5和SVG實(shí)現(xiàn)的。這次我們要再一次為大家介紹另外一款同樣也很酷的HTML5 Canvas蝴蝶飛舞動(dòng)畫(huà)，蝴蝶是在Canvas上繪制而成，利用HTML5的動(dòng)畫(huà)特性實(shí)現(xiàn)蝴蝶的飛舞，大家可以學(xué)習(xí)一下。
今天我們要給大家分享一款基于HTML5 Canvas的3D星球天體運(yùn)行動(dòng)畫(huà)，這里我們?cè)贑anvas畫(huà)布上繪制了一顆較大的星球，然后在大星球周圍有一圈很小的隕石區(qū)域，這些隕石會(huì)圍繞著星球不停地旋轉(zhuǎn)，而且配合黑色的背景后帶有很強(qiáng)烈的3D視覺(jué)效果。
這是一款基于HTML5 Canvas的3D房間模擬動(dòng)畫(huà)，房間里有電視機(jī)、沙發(fā)、書(shū)柜、燈具以及一個(gè)人物模型，這些模型都是在Canvas上繪制而成。更重要的是，這款3D動(dòng)畫(huà)可以利用HTML5特性讀取本地麥克風(fēng)和攝像頭，這樣就可以通過(guò)攝像頭將你自己投影到電視機(jī)上，看上去挺神奇的。
今天我們要給大家分享一款非常炫酷的HTML5 Canvas光束爆炸動(dòng)畫(huà)特效，它就像一朵光速爆炸開(kāi)一樣，動(dòng)畫(huà)效果非常絢麗。點(diǎn)擊鼠標(biāo)時(shí)，可以隨機(jī)切換光速的顏色，當(dāng)然你也可以在頁(yè)面上放幾個(gè)按鈕，通過(guò)點(diǎn)擊按鈕來(lái)指定某一種顏色的光束。
還記得我們之前分享的幾款HTML5粒子動(dòng)畫(huà)特效嗎？比如這款HTML5文本輸入框粒子動(dòng)畫(huà)特效和HTML5 Canvas生成粒子效果的人物頭像，效果都非常炫酷。今天我們要給大家介紹的也是一款基于HTML5 Canvas的粒子數(shù)字時(shí)鐘動(dòng)畫(huà)，時(shí)鐘會(huì)讀取本地時(shí)間，并且每變化一次均會(huì)出現(xiàn)粒子動(dòng)畫(huà)效果，這款粒子數(shù)字時(shí)鐘非常適合在你的個(gè)性化博客中使用。
記得以前為大家分享過(guò)很多樣式各異的進(jìn)度條插件，有基于jQuery的，也有基于HTML5和CSS3的。這次我們要介紹另外一款基于HTML5 Canvas的圓形進(jìn)度條應(yīng)用，在黑色的背景下，白色的進(jìn)度條顯得格外顯眼，而且圓形中央會(huì)實(shí)時(shí)顯示當(dāng)前進(jìn)度的數(shù)字百分比，非常實(shí)用。
今天要給大家分享另外一個(gè)超炫酷的HTML5 Canvas動(dòng)畫(huà)，它是一個(gè)心電圖動(dòng)畫(huà)效果，程序運(yùn)行時(shí)就會(huì)模擬心電圖在屏幕上打印當(dāng)前心跳信息。同時(shí)動(dòng)畫(huà)中帶有一些開(kāi)關(guān)按鈕來(lái)控制心電圖中的各個(gè)參數(shù)，動(dòng)畫(huà)相當(dāng)逼真。
今天我們要為大家分享一款基于HTML5 Canvas的動(dòng)畫(huà)特效，它是一顆逐漸生長(zhǎng)的夢(mèng)幻大樹(shù)，生長(zhǎng)過(guò)程中樹(shù)枝將會(huì)產(chǎn)生隨機(jī)的色彩，讓整一棵大樹(shù)顯得非常具有夢(mèng)幻的效果。本實(shí)例利用了HTML5 Canvas的動(dòng)畫(huà)技術(shù)，實(shí)現(xiàn)了漸變式動(dòng)畫(huà)的特效。
之前我們有分享過(guò)很多純CSS3和HTML5實(shí)現(xiàn)的球體動(dòng)畫(huà)，比如這款HTML5 3D球體斑點(diǎn)運(yùn)動(dòng)動(dòng)畫(huà)和HTML5 Canvas 地球旋轉(zhuǎn)3D動(dòng)畫(huà)都非常不錯(cuò)。今天要給大家分享另外一款超炫酷的CSS3五彩3D旋轉(zhuǎn)星球，旋轉(zhuǎn)起來(lái)的視覺(jué)效果相當(dāng)震撼。
幾天前，我們向大家分享過(guò)一款基于HTML5 Canvas的3D鉆石動(dòng)畫(huà)，制作得十分逼真。今天我們要分享另外一個(gè)基于HTML5 Canvas的3D藍(lán)寶石動(dòng)畫(huà)，我們可以通過(guò)鼠標(biāo)的拖拽來(lái)實(shí)現(xiàn)藍(lán)寶石的各個(gè)視角的觀察，并且通過(guò)鼠標(biāo)滾輪來(lái)縮放寶石的大小，同時(shí)藍(lán)寶石的表面會(huì)不時(shí)地發(fā)出閃亮的光芒，不得不說(shuō)，Canvas在網(wǎng)頁(yè)繪制方面真的是無(wú)所不能。
今天我們要在HTML5 Canvas畫(huà)布上繪制一顆高貴典雅的藍(lán)色3D鉆石，我們?cè)贑anvas畫(huà)布上通過(guò)繪制很多個(gè)不同大小的多邊形組成了一顆鉆石，然后通過(guò)CSS3的顏色漸變特性讓鉆石的表面產(chǎn)生白色發(fā)光的特效，同樣再利用CSS3的動(dòng)畫(huà)屬性讓鉆石不停地旋轉(zhuǎn)，展現(xiàn)出3D的視覺(jué)效果，非常炫酷。
以上就是16個(gè)富有創(chuàng)意的HTML5 Canvas動(dòng)畫(huà)特效集合，如果你對(duì)HTML5感興趣，歡迎下載源碼學(xué)習(xí)。
信 8.0 更新的一大特色就是支持動(dòng)畫(huà)表情，如果發(fā)送的消息只有一個(gè)內(nèi)置的表情圖標(biāo)，這個(gè)表情會(huì)有一段簡(jiǎn)單的動(dòng)畫(huà)，一些特殊的表情還有全屏特效，例如煙花表情有全屏放煙花的特效，炸彈表情有爆炸動(dòng)畫(huà)并且消息和頭像也會(huì)隨之震動(dòng)。
本著前端工程師的職業(yè)精神，我就想看看能不能實(shí)現(xiàn)一個(gè)類似的特效。折騰許久之后，做出來(lái)的效果如下：
項(xiàng)目的核心是使用到了 lottie 動(dòng)畫(huà)庫(kù)。lottie 是 Airbnb 出品的、全平臺(tái)（Web、Android、IOS、React Native）的動(dòng)畫(huà)庫(kù)，它的特點(diǎn)在于能夠直接播放使用 Adobe After Effects 制作的動(dòng)畫(huà)。設(shè)計(jì)師在 After Effects 中，利用 Bodymovin 插件把動(dòng)畫(huà)導(dǎo)出為 JSON 格式之后，開(kāi)發(fā)者就能夠通過(guò)相應(yīng)平臺(tái)的 SDK 進(jìn)行播放。（項(xiàng)目地址及示例演示見(jiàn)文末）
在做完這個(gè)項(xiàng)目之后我感覺(jué)到自己的前端儲(chǔ)備又豐富了一層，在以后應(yīng)對(duì)復(fù)雜特效時(shí)又有了新的思路，如果你也想進(jìn)一步提升前端開(kāi)發(fā)技能，可以跟著這篇文章實(shí)踐一下。本篇文章除了使用 Lottie 庫(kù)之外，全部都是使用原生 HTML/CSS/JavaScript 實(shí)現(xiàn)的，這樣無(wú)論你是 React、Vue 還是其它工程師，都可以快速掌握。
編寫(xiě)界面
本來(lái)想跳過(guò) HTML/CSS 部分，但是想到 CSS 可能是大部分人的弱項(xiàng)，所以我決定還是把實(shí)現(xiàn)界面的思路寫(xiě)一下，想看核心部分的可以直接跳到：二、發(fā)送普通消息部分。
1. HTML 部分
首先看 HTML 部分，從效果圖來(lái)看：
上邊有一個(gè)標(biāo)題欄，顯示與 XXX 聊天。
中間是聊天信息面板，包含著雙方發(fā)送的消息，每條消息由發(fā)送者頭像和消息內(nèi)容組成，我發(fā)送的在右側(cè)，對(duì)方發(fā)送的在左側(cè)。
下方是底部信息，有表情選擇按鈕、編輯消息文本框和發(fā)送按鈕。
那么根據(jù)這個(gè)結(jié)構(gòu)編寫(xiě)的 HTML 代碼如下所示：
<main>
<div class="chat">
<div class="titleBar">與 XXX 聊天</div>
<div class="panel">
<div class="message mine">
<img src="./me.png" alt="" />
<p><span>你好</span></p>
</div>
<div class="message yours">
<img class="avatar" src="./you.png" alt="" />
<p><span>Hi</span></p>
</div>
<!-- 省略其它消息 -->
</div>
<footer>
<button class="chooseSticker">
<img src="./emoji.svg" alt="" />
<div class="stickers"></div>
</button>
<input
class="messageInput"
type="text"
name=""
id=""
placeholder="請(qǐng)輸入聊天信息"
/>
<button class="send">發(fā)送</button>
</footer>
</div>
</main>各個(gè)元素所對(duì)應(yīng)的界面部分為：
<main /> 元素是一個(gè)整體的容器，用于把聊天窗口居中對(duì)齊
<div class="chat"> 是聊天應(yīng)用的容器，用于布局標(biāo)題欄、聊天面板和底部發(fā)送框。
<div class="titleBar"> 用于顯示標(biāo)題欄。
<div class="panel"> 是消息面板，用于布局其中的消息。
<div class="message"> 為消息容器，使用不同的 class 來(lái)區(qū)分發(fā)送方， mine 代表我發(fā)送的， yours 代表對(duì)方發(fā)送的。每條消息里邊使用 <img class="avatar" > 來(lái)展示頭像，使用 <p> 元素來(lái)顯示文本， <p> 元素里邊的 <span> 元素將會(huì)作為 lottie 的容器來(lái)播放表情動(dòng)畫(huà)。
<footer> 用于布局底部操作按鈕和消息發(fā)送框。其中：
<button class="chooseSticker"> 是表情選擇按鈕，使用一個(gè)笑臉 svg 圖片表示，里邊的 <div class="stickers"> 是表情選擇框彈出層，里邊的表情將在 JS 中動(dòng)態(tài)加載，目的是為了實(shí)現(xiàn)動(dòng)畫(huà)預(yù)覽。
<input class="messageInput" /> 是聊天消息輸入框，沒(méi)什么特別的。
<button class="send"> 是發(fā)送按鈕
這個(gè)是 HTML 的基本結(jié)構(gòu)，接下來(lái)看一下 CSS 樣式。
2. CSS 部分
在項(xiàng)目根目錄下創(chuàng)建一個(gè) style.css 文件并在 index.html 的<head> 標(biāo)簽中引入：
<link rel="stylesheet" href="style.css" />2.1 全局樣式
首先定義一些 CSS 變量，CSS 變量是為了方便我們引用同一屬性值的，后邊如果更新樣式時(shí)，可以避免多次修改：
:root {
--primary-color: hsl(200, 100%, 48%);
--inverse-color: hsl(310, 90%, 60%);
--shadow-large: 0 0px 24px hsl(0, 0%, 0%, 0.2);
--shadow-medium: 0 0 12px hsl(0, 0%, 0%, 0.1);
}這些變量的含義分別是：
--primary-color: hsl(200, 100%, 48%) ，主色調(diào)，例如我發(fā)送的消息的藍(lán)色背景。
--inverse-color: hsl(310, 90%, 60%) ，反色調(diào)，或強(qiáng)調(diào)色調(diào)，與主色調(diào)形成鮮明對(duì)比，例如發(fā)送按鈕的背景色。
--shadow-large: 0 0px 24px hsl(0, 0%, 0%, 0.2) ，大陰影，例如標(biāo)題欄、底部欄的陰影。
--shadow-medium: 0 0 12px hsl(0, 0%, 0%, 0.1) ，小陰影，例如輸入框和表情選擇彈出層。
接下來(lái)是一些重置樣式：
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
}這些樣式對(duì)所有元素都有效，設(shè)置盒子模型為 border-box ，這樣內(nèi)邊距、邊框都算在寬高之內(nèi)，設(shè)置內(nèi)間距和外間距為 0，最后設(shè)置默認(rèn)字體。
2.2 Main 容器
Main 容器用于定位聊天應(yīng)用容器到瀏覽器中間，使用 grid 布局，寬高分別設(shè)置為瀏覽器可視區(qū)域的 100%，并把背景色設(shè)置為黑灰色：
main {
display: grid;
place-items: center;
width: 100vw;
height: 100vh;
background-color: hsl(0, 0%, 10%);
}2.3 聊天應(yīng)用容器
聊天應(yīng)用容器設(shè)置了固定寬高，模擬手機(jī)屏幕，并使用 grid 布局來(lái)控制標(biāo)題欄、聊天面板和底部操作欄的位置：
.chat {
width: 375px;
height: 700px;
background: hsl(0, 0%, 100%);
border-radius: 8px;
display: grid;
grid-template-rows: max-content 1fr max-content;
}這里使用了 grid-template-rows 把聊天應(yīng)用分成了 3 行，第一行的標(biāo)題欄和最后一行的標(biāo)底部操作欄的高度分別為內(nèi)容的最大高度，中間的聊天面板則是浮動(dòng)高度。
2.4 標(biāo)題欄
標(biāo)題欄簡(jiǎn)單的設(shè)置了一個(gè)內(nèi)間距、文字居中方式和陰影：
.titleBar {
padding: 24px 0;
text-align: center;
box-shadow: var(--shadow-large);
}界面優(yōu)化提示：內(nèi)間距用來(lái)增加留白，在視覺(jué)上引起放松，陰影則為了和下邊的聊天面板區(qū)分開(kāi)
2.5 聊天面板
聊天面板使用 flex 布局對(duì)其中的消息進(jìn)行排列，并設(shè)置方向?yàn)榘戳信挪迹缓笤O(shè)置 overflow 為 auto，在消息整體高度超出面板高度時(shí)，出現(xiàn)滾動(dòng)條：
.panel {
display: flex;
flex-direction: column;
padding: 24px 12px;
overflow: auto;
}界面優(yōu)化提示：這里的 padding 同樣是為了留出足夠多的空白，來(lái)與其它元素隔開(kāi)一段距離，以避免擁擠感。
2.6 消息
消息分為消息容器、頭像和消息體 3 個(gè)部分。其中消息體和頭像包含在消息容器中，先來(lái)看消息容器的樣式。消息容器使用 flex 布局來(lái)把消息體和頭像放在一行，寬度最大為面板寬度的 80%，并設(shè)置字體和外邊距：
.message {
display: flex;
max-width: 80%;
font-size: 14px;
margin: 8px 0;
position: relative;
}這里的 position 設(shè)置為 relative 是為了定位后邊的全屏特效動(dòng)畫(huà)。
頭像簡(jiǎn)單設(shè)置了寬高、圓角和距離消息體的間距：
.message img {
width: 40px;
height: 40px;
border-radius: 12px;
margin-right: 12px;
}界面優(yōu)化提示：這里不得不再提一下間距的重要性，一定不要把各個(gè)元素安排的太過(guò)緊湊，否則十分影響視覺(jué)效果，最直接的影響就是引起視覺(jué)上的擁擠感，造成視覺(jué)疲勞。
消息體同樣的設(shè)置了間距和圓角，這里的圓角和頭像的保持一致，以增加和諧感。它還設(shè)置了陰影，并使用 flex 布局，把里邊的文字或表情消息居中對(duì)齊：
.message p {
padding: 8px 12px;
border-radius: 12px;
box-shadow: var(--shadow-large);
display: flex;
align-items: center;
}這些樣式默認(rèn)都是基于對(duì)方的消息的，如果是我發(fā)送的消息需要放到右邊，并作一些調(diào)整。首先對(duì)于我發(fā)送的消息，把 flex-flow 改為 row-reverse 這樣頭像和消息體的位置就互換了，然后使用 align-self 對(duì)齊到面板的右邊：
.message.mine {
flex-flow: row-reverse;
align-self: flex-end;
}調(diào)整頭像的外邊距，現(xiàn)在應(yīng)該是距離左邊的消息體的邊距了：
.message.mine img {
margin-right: 0;
margin-left: 12px;
}設(shè)置消息體的背景色為藍(lán)色，文字為白色：
.message.mine p {
background-color: var(--primary-color);
color: white;
}2.7 底部操作欄
先看底部操作欄容器的整體布局，使用 grid 布局把表情選擇按鈕、消息發(fā)送框和發(fā)送按鈕分成 3 列，其中除消息發(fā)送框?yàn)楦?dòng)寬度外，其它的兩個(gè)按鈕為固定寬度，默認(rèn)居中對(duì)齊，最后設(shè)置陰影和間距：
footer {
display: grid;
grid-template-columns: 48px 1fr 75px;
justify-items: center;
padding: 12px;
box-shadow: var(--shadow-large);
}表情選擇按鈕把自己進(jìn)行了靠左對(duì)齊，并設(shè)置相對(duì)定位，用于定位表情選擇彈出層，然后設(shè)置按鈕圖標(biāo)的大?。?/span>
.chooseSticker {
justify-self: start;
position: relative;
}
.chooseSticker img {
width: 36px;
height: 36px;
}表情選擇彈出層的 CSS 代碼比較多但都很簡(jiǎn)單，先看一下代碼：
.stickers {
display: grid;
grid-template-columns: repeat(auto-fill, 24px);
column-gap: 18px;
border-radius: 8px;
background-color: white;
box-shadow: var(--shadow-medium);
padding: 6px 12px;
font-size: 24px;
position: absolute;
top: calc(-100% - 18px);
width: 300px;
opacity: 0;
}這段代碼的含義是：
彈出層使用 grid 布局，repeat(auto-fill, 24px) 指的是在寬度允許的條件下，在一行中盡可能放置最多的列元素，每列的寬度固定為 24px。然后設(shè)置列間距為 18px。
設(shè)置圓角、背景色、陰影、內(nèi)間距和字體大小。
定位設(shè)置為絕對(duì)定位，把它向上移動(dòng)包含元素高度（也就是 .chooseSticker 的高度）的 100% 并減去 18px，調(diào)整到合適的位置。寬度設(shè)置為 300px，透明度設(shè)置為 0 把它隱藏。
消息輸入框和按鈕的樣式比較簡(jiǎn)單，消息輸入框的寬度占滿整列，發(fā)送按鈕使用 justify-self: end 把自己進(jìn)行靠右對(duì)齊。這里把代碼一次性貼出來(lái)：
.messageInput {
box-shadow: var(--shadow-medium);
padding: 0px 12px;
border-radius: 8px;
width: 100%;
}
.send {
height: 100%;
width: 90%;
border-radius: 8px;
justify-self: end;
color: white;
background-color: var(--inverse-color);
}最后再添加一個(gè) .show 樣式，用于在點(diǎn)擊發(fā)送表情按鈕時(shí)，給表情彈出層添加該樣式以顯示出來(lái)：
.show {
opacity: 1;
}3. JS 部分
在給聊天界面加上功能之前，先編寫(xiě)一些基礎(chǔ)的 JS 代碼。在項(xiàng)目根目錄創(chuàng)建一個(gè) index.js 文件，并在 index.html 中引用，注意放到 </body> 關(guān)閉標(biāo)簽的上方，這樣當(dāng) HTML DOM 加載完成之后才會(huì)執(zhí)行 js 中的代碼，防止找不到元素：
<body>
<!-- 其它代碼省略 -->
<script src="index.js"></script>
</body>在 index.js 中，先獲取要操作的 DOM 元素：
const panelEle=document.querySelector(".panel");
const chooseStickerBtn=document.querySelector(".chooseSticker");
const stickersEle=document.querySelector(".stickers");
const msgInputEle=document.querySelector(".messageInput");
const sendBtn=document.querySelector(".send");其中：
panelEle 是消息面板元素，用于追加新消息。
chooseStickerBtn 是選擇表情按鈕，點(diǎn)擊它會(huì)彈出表情選擇框。
stickersEle 就是彈出的表情選擇框。
msgInputEle 是消息輸入框。
sendBtn 為發(fā)送按鈕。
然后引入 Lottie 的 js 庫(kù)，可以到示例代碼倉(cāng)庫(kù)中下載，也可以在 https://cdnjs.com/libraries/bodymovin 中下載 lottie.min.js，下載完成之后放到項(xiàng)目根目錄，然后在 index.html 中，在引入 index.js 的上方引入它：
<script src="lottie.min.js"></script>下載表情動(dòng)畫(huà)資源文件，它們都是 json 格式的文件，下載完成之后直接放到項(xiàng)目根目錄即可：
南瓜表情：https://lottiefiles.com/43215-pumpkins-sticker-4
炸彈表情：https://lottiefiles.com/3145-bomb
爆炸動(dòng)畫(huà)：https://lottiefiles.com/9990-explosion
接下來(lái)看一下各部分功能是怎么實(shí)現(xiàn)的。
發(fā)送普通消息
發(fā)送普通消息時(shí)，用戶在輸入框輸入完消息之后，點(diǎn)擊發(fā)送，就會(huì)把該條消息追加到消息列表中，并清空輸入框中的內(nèi)容。那么這里先給發(fā)送按鈕添加點(diǎn)擊事件：
sendBtn.addEventListener("click", ()=> {
const msg=msgInputEle.value;
if (msg) {
appendMsg(msg);
}
});在事件處理函數(shù)中：
判斷用戶是否輸入了消息。
如果輸入了就追加到消息列表中。
來(lái)看一下 appendMsg() 函數(shù)的代碼：
function appendMsg(msg, type) {
// 創(chuàng)建消息元素
const msgEle=panelEle.appendChild(document.createElement("div"));
msgEle.classList.add("message", "mine"); // 設(shè)置為“我“發(fā)送的樣式
msgEle.innerHTML=`
<img class="avatar" src="./me.png" alt="" />
<p><span>${msg}</span></p>
`;
// 滾動(dòng)到最新消息
panelEle.scrollTop=panelEle.scrollHeight;
msgInputEle.value="";
}函數(shù)接收兩個(gè)參數(shù)，msg 和 type，分別是要追加的消息內(nèi)容和類型，type 為可選的，不傳則認(rèn)為是普通文本消息，如果傳遞了 "stickers" 則為表情消息，現(xiàn)在還用不到它。在這個(gè)函數(shù)中主要做了下面幾件事情：
按照消息的 HTML 結(jié)構(gòu)創(chuàng)建一個(gè)新的消息元素 msgEle，并追加到消息列表中。
把消息的樣式設(shè)置為我發(fā)送的。
內(nèi)部的元素分別為頭像和文本消息，使用模板字符串的形式賦值給 msgEle 的 innerHTML 屬性中，并在 <p> 中使用 msg 變量的值。
最后把滾動(dòng)條滾動(dòng)到最新的消息處，并清空輸入框中的消息。
這樣就可以發(fā)送普通的文本消息了。
發(fā)送動(dòng)畫(huà)表情
在發(fā)送動(dòng)畫(huà)表情之前，需要先加載動(dòng)畫(huà)表情。在 index.js 的最上方先定義表情名稱和表情動(dòng)畫(huà)文件路徑的鍵值對(duì)信息：
const stickers={
bomb: {
path: "./3145-bomb.json",
},
pumpkin: {
path: "./43215-pumpkins-sticker-4.json",
},
};我們會(huì)根據(jù) bomb 、 pumkin 這樣的 key 來(lái)找到對(duì)應(yīng)的動(dòng)畫(huà)路徑。接著初始化彈出層中的表情以供用戶選擇：
// 初始化表情面板，也可以在表情選擇窗彈出時(shí)再初始化
Object.keys(stickers).forEach((key)=> {
const lottieEle=stickersEle.appendChild(document.createElement("span"));
// 對(duì)每個(gè)表情創(chuàng)建 lottie 播放器
const player=lottie.loadAnimation({
container: lottieEle,
renderer: "svg",
loop: true,
autoplay: false,
path: stickers[key].path,
});
// 當(dāng)選擇表情時(shí)，發(fā)送消息，并設(shè)置類型為 sticker 表情消息
lottieEle.addEventListener("click", ()=> {
appendMsg(key, "sticker");
});
// 當(dāng)鼠標(biāo)劃過(guò)時(shí)，播放動(dòng)畫(huà)預(yù)覽
lottieEle.addEventListener("mouseover", ()=> {
player.play();
});
// 當(dāng)鼠標(biāo)劃過(guò)時(shí)，停止動(dòng)畫(huà)預(yù)覽
lottieEle.addEventListener("mouseleave", ()=> {
player.stop();
});
});這里的代碼分別作了下邊這些操作：
遍歷存儲(chǔ)表情信息的對(duì)象。
創(chuàng)建一個(gè) lottie 的容器，使用 span 元素，因?yàn)?lottie 動(dòng)畫(huà)的播放器需要掛載到一個(gè)具體的 html 元素中。
調(diào)用 lottie 的 loadAnimation() 加載動(dòng)畫(huà)，它需要傳遞這樣幾個(gè)參數(shù)：
container: 播放器要掛載到的容器。
renderer：可以選擇是使用 svg 還是 canvas 渲染動(dòng)畫(huà)。
loop: 是否循環(huán)播放，由于此處是在表情選擇彈出層中預(yù)覽動(dòng)畫(huà)，所以支持循環(huán)播放。
autoplay：是否自動(dòng)播放，這里設(shè)置為了否，后邊讓它在鼠標(biāo)劃過(guò)時(shí)再播放動(dòng)畫(huà)。
path：動(dòng)畫(huà) json 文件路徑，直接從對(duì)象中獲取。
loadAnimation() 會(huì)返回 lottie 的實(shí)例，把它保存在 player 中。
然后后邊則注冊(cè)了幾個(gè)事件：
當(dāng) lottieEle 也就是表情被點(diǎn)擊時(shí)，發(fā)送表情消息，給 appendMsg() 的 msg 參數(shù)設(shè)置為表情的 key，type 參數(shù)設(shè)置為 "sticker"。
當(dāng)鼠標(biāo)劃過(guò)表情時(shí)，開(kāi)始播放動(dòng)畫(huà)。
當(dāng)鼠標(biāo)劃出表情時(shí)，停止動(dòng)畫(huà)。
接著給發(fā)送表情按鈕添加事件，點(diǎn)擊時(shí)，切換表情彈出層的顯示狀態(tài)：
chooseStickerBtn.addEventListener("click", ()=> {
stickersEle.classList.toggle("show");
});這時(shí)點(diǎn)擊發(fā)送表情按鈕就可以看到表情選擇彈出層了?，F(xiàn)在還不能發(fā)送表情，因?yàn)檫€沒(méi)在 appendMsg() 函數(shù)中處理，現(xiàn)在來(lái)修改一下它里邊的代碼。首先判斷：如果是表情消息，則不在消息中的 <p> 元素里添加任何信息：
function appendMsg(msg, type) {
// ...
msgEle.innerHTML=`
<img class="avatar" src="./me.png" alt="" />
<p><span>${type==="sticker" ? "" : msg}</span></p>
`;
}然后在它的下方，調(diào)用 playSticker() 函數(shù)來(lái)播放動(dòng)畫(huà)：
// 處理表情消息，播放相關(guān)動(dòng)畫(huà)
if (type==="sticker") {
playSticker(msg, msgEle);
}playSticker() 函數(shù)接收兩個(gè)參數(shù)，一個(gè)是表情的 key，一個(gè)是消息元素。此時(shí)的 msg 變量的內(nèi)容就是在 lottieEle 點(diǎn)擊事件中傳遞過(guò)來(lái)的表情 key。函數(shù)中的代碼如下：
function playSticker(key, msgEle) {
// 表情消息，創(chuàng)建 lottie 動(dòng)畫(huà)
const lottieEle=msgEle.querySelector("span");
lottieEle.style.width="40px";
lottieEle.style.height="40px";
lottie.loadAnimation({
container: lottieEle,
renderer: "svg",
loop: false,
autoplay: true,
path: stickers[key].path,
});
}在這個(gè)函數(shù)里主要做了下邊幾項(xiàng)操作：
獲取消息中的 span 元素，它將作為 lottie 的動(dòng)畫(huà)容器。
設(shè)置表情動(dòng)畫(huà)的寬高為 40px。
使用 lottie 加載動(dòng)畫(huà)，并設(shè)置循環(huán)播放為 false，自動(dòng)播放為 true，來(lái)讓表情發(fā)送時(shí)自動(dòng)播放動(dòng)畫(huà)，且只播放一次。
現(xiàn)在可以發(fā)送表情消息了，相關(guān)的動(dòng)畫(huà)也會(huì)自動(dòng)播放，接下來(lái)看一下怎么實(shí)現(xiàn)炸彈的全屏動(dòng)畫(huà)和對(duì)消息元素的晃動(dòng)效果。
發(fā)送帶全屏特效的表情
對(duì)于這種帶全屏特效的表情可以單獨(dú)進(jìn)行判斷，也可以在保存表情的對(duì)象中定義相關(guān)的操作，這里為了簡(jiǎn)單起見(jiàn)，我們單獨(dú)判斷用戶是否發(fā)送了炸彈表情，然后施加相應(yīng)特效。
首先在 appendMsg() 函數(shù)里，進(jìn)行判斷，如果發(fā)送的消息是表情消息，且表情為炸彈，則播放全屏動(dòng)畫(huà)并晃動(dòng)消息：
function appendMsg(msg, type) {
if (type==="sticker") {
playSticker(msg, msgEle);
if (msg==="bomb") {
// 播放爆炸動(dòng)畫(huà)
setTimeout(()=> {
playExplosion(msgEle);
}, 800);
// 晃動(dòng)消息列表
shakeMessages();
}
}
}這里爆炸全屏動(dòng)畫(huà)延遲了 800 毫秒之后再執(zhí)行，目的是在炸彈表情播放到合適的時(shí)間時(shí)，再播放全屏動(dòng)畫(huà)，播放動(dòng)畫(huà)使用了 playExplosion() 函數(shù)，并傳遞了消息元素進(jìn)去。在爆炸全屏動(dòng)畫(huà)結(jié)束之后，調(diào)用 shakeMessages() 來(lái)晃動(dòng)消息。這里先看一下 playExplosion() 函數(shù)的代碼：
function playExplosion(anchor) {
const explosionAnimeEle=anchor.appendChild(document.createElement("div"));
explosionAnimeEle.style.position="absolute";
explosionAnimeEle.style.width="200px";
explosionAnimeEle.style.height="100px";
explosionAnimeEle.style.right=0;
explosionAnimeEle.style.bottom=0;
const explosionPlayer=lottie.loadAnimation({
container: explosionAnimeEle,
renderer: "svg",
loop: false,
autoplay: true,
path: "./9990-explosion.json",
});
explosionPlayer.setSpeed(0.3);
// 播放完成后，銷毀爆炸相關(guān)的動(dòng)畫(huà)和元素
explosionPlayer.addEventListener("complete", ()=> {
explosionPlayer.destroy();
explosionAnimeEle.remove();
});
}playExplosion() 函數(shù)接收一個(gè) anchor 錨點(diǎn)，就是說(shuō)基于哪個(gè)位置開(kāi)始播放全屏動(dòng)畫(huà)，由于示例中的動(dòng)畫(huà)畫(huà)幅比較小，所以把它固定在了最新發(fā)送的消息的下方，這里爆炸動(dòng)畫(huà)的 anchor 就是消息元素，之后函數(shù)做了下邊的這些操作：
添加全屏動(dòng)畫(huà)元素，設(shè)置為絕對(duì)定位，寬度 200px，高度 100px，放在最新消息元素的右下角。
加載 lottie 動(dòng)畫(huà)，不循環(huán)、自動(dòng)播放。
由于原動(dòng)畫(huà)速度過(guò)快，這里調(diào)用 lottie 實(shí)例的 setSpeed() 方法，把速度設(shè)置為 0.3 倍速。
之后給 lottie 實(shí)例設(shè)置事件監(jiān)聽(tīng)："complete"，它會(huì)在動(dòng)畫(huà)執(zhí)行完成時(shí)觸發(fā)，里邊銷毀了 lottie 實(shí)例和全屏動(dòng)畫(huà)元素。
這樣全屏動(dòng)畫(huà)的效果就實(shí)現(xiàn)了。接下來(lái)看消息晃動(dòng)的代碼：
function shakeMessages() {
[...panelEle.children]
.reverse()
.slice(0, 5)
.forEach((messageEle)=> {
const avatarEle=messageEle.querySelector("img");
const msgContentEle=messageEle.querySelector("p");
avatarEle.classList.remove("shake");
msgContentEle.classList.remove("shake");
setTimeout(()=> {
avatarEle.classList.add("shake");
msgContentEle.classList.add("shake");
}, 700);
});
}這個(gè)函數(shù)的操作是：
使用 reverse() 和 slice() 對(duì)最新的 5 條消息進(jìn)行晃動(dòng)，也可以把 5 改大一點(diǎn)，對(duì)更多消息進(jìn)行晃動(dòng)。
然后在循環(huán)中，分別給頭像和消息添加 shake class 執(zhí)行晃動(dòng)動(dòng)畫(huà)，這個(gè) class 的內(nèi)容稍后再介紹。
要注意的是，在添加 shake class執(zhí)行動(dòng)畫(huà)前，需要先刪除 shake，因?yàn)橛械南⒖赡茉谥耙呀?jīng)晃動(dòng)過(guò)了，例如當(dāng)連續(xù)發(fā)了多個(gè)炸彈表情時(shí)。后邊在添加 shake class 時(shí)，使用 setTimeout() 延遲了 700 毫秒，目的是在全屏動(dòng)畫(huà)執(zhí)行到一定程度時(shí)再晃動(dòng)消息。
接下來(lái)看一下 shake class 的定義，在 style.css 中添加下方代碼：
.shake {
animation: shake 0.8s ease-in-out;
}
@keyframes shake {
from {
transform: translate3d(0, 0px, 0px);
}
10% {
transform: translate3d(6px, -6px, 0px);
}
20% {
transform: translate3d(-5px, 5px, 0px);
}
30% {
transform: translate3d(4px, -4px, 0px);
}
35% {
transform: translate3d(-3px, 3px, 0px);
}
39% {
transform: translate3d(2px, -2px, 0px);
}
41% {
transform: translate3d(-1px, 1px, 0px);
}
42% {
transform: translate3d(0px, 0px, 0px) rotate(20deg);
}
52% {
transform: rotate(-15deg);
}
60% {
transform: rotate(8deg);
}
65% {
transform: rotate(-3deg);
}
67% {
transform: rotate(1deg);
}
70% {
transform: rotate(0deg);
}
to {
transform: translate3d(0px, 0px, 0px) rotate(0);
}
}.shake 中使用了 shake keyframes 定義的動(dòng)畫(huà)，執(zhí)行時(shí)間為 0.8s，動(dòng)畫(huà)執(zhí)行函數(shù)為 ease-in-out。Keyframes 里的代碼比較多，但是都是很簡(jiǎn)單的，就是模擬了爆炸時(shí)的效果，移動(dòng) x 軸和 y 軸的偏移，每次的偏移幅度越來(lái)越小，并且越來(lái)越快，可以看到百分比的間隔越來(lái)越小。在動(dòng)畫(huà)進(jìn)行到 42% 的時(shí)候，加了一些旋轉(zhuǎn)動(dòng)畫(huà)，這樣就有了落地時(shí)的震動(dòng)效果。由于使用 rotate() 旋轉(zhuǎn)時(shí)的軸心在元素中間，我們可以把消息氣泡的軸心修改一下來(lái)實(shí)現(xiàn)更真實(shí)的效果：
.message p {
transform-origin: left bottom;
}
.message.mine p {
transform-origin: right bottom;
}這里把對(duì)方發(fā)送的消息的軸心設(shè)置在左下角，自己發(fā)送的消息則設(shè)置在了右下角。
總結(jié)
現(xiàn)在，這個(gè)模擬微信 8.0 動(dòng)畫(huà)表情的功能就實(shí)現(xiàn)了。主要就是下邊幾點(diǎn)：
使用 lottie 庫(kù)加載并播放動(dòng)畫(huà)。
確定全屏動(dòng)畫(huà)的位置和播放時(shí)機(jī)。
消息晃動(dòng)動(dòng)畫(huà)的 CSS 實(shí)現(xiàn)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
