Echo - 520小玩具

weixin_34402408發表於2018-05-21
735083-f194e971a77116b5.png
logo.png

Echo

這是一個網路應用程式，與我的女朋友一起慶祝 5 月 20 日（意思是“我愛你”）。 ;P 它受 iMessage 中名為 echo 的訊息效果的啟發。

只是讓你開心。

嗯，這就是此作者的原話，滿滿的撒狗糧 ???，但是此程式還是很有趣的對不對～所以還是拉下程式碼，悄悄的 ? 一波（畢竟單身汪，週末也沒什麼事）

預覽

735083-6d8d1d59fb3b37a0
image

demo

將學到的知識點

  • 單一 div 氣泡繪製
  • 隨機大小位置
  • 動畫效果
  • 記憶體回收

氣泡繪製

可以看出它是由一個橢圓和一個小尾巴構成。

如何繪製下這個小尾巴？

先看下這篇文章瞭解下使用CSS3繪製圖形基本原理

735083-5558a45c3018e2b9.jpg
tail.jpg
width: 10rem;
height: 10rem;
background-color: orangered;
border-left: 1rem solid orange;
border-bottom-left-radius: 10rem 7rem;

看此上，將背景色取掉；是不是一個小尾巴就出來了，縮小下尺寸，汽泡的小尾巴就就出來了～這裡我們通過偽類元素來繪製氣泡的小尾巴。

735083-1b725f56dcd9aad9.jpg
msg.jpg

隨機大小位置

氣泡是絕對定位的，控制隨機出現的位置，其實就是控制 left和 top值。

  1. 先獲取當前可視視窗尺寸
  2. 控制氣泡出現的在可視視窗的範圍內， left 和 top 小於可視視窗寬高的值
  3. 大小，使用 CSS3 裡的 transform 屬性的 scale() 來控制（肯定不能比本身的小）
const left = Math.ceil(Math.random() * 0.9 * screenSize.width)
const top = Math.ceil(Math.random() * 0.9 * screenSize.width)
const scale = 1 + Math.random(); // 縮放值

記憶體回收

記憶體回收實現原理，good 作為是否回收的標誌（全 false 進行回收）。整個流程就是每一個訊息 good 預設為 true, 當某條訊息完成了消失動畫以後，就會將 good 狀態變為 false; 然後將固定的第一條訊息以外的全部訊息中的 good 提取出來。我們的最終目的是判斷當前提取出來的新陣列裡是否還存在處於展示狀態的訊息，無論訊息量有多少，只需要判斷是否至少有一個 good 狀態為 true即可，直到全部訊息的 good 狀態都為 false了，我們再進行記憶體回收 ♻️，也就是對 msgs 重置。

記憶體回收的實現:

const hasMsgs = this.msgs
  .slice(1)
  .map(({ good }) => good)
  .reduce((left, right) => left || right);  // 找出任意一個為 true 的狀態

if (!hasMsgs) this.msgs.splice(1);

參考DEMO

License

MIT Licensed.

相關文章