實現前端彈簧動效

彈簧動效是ios系統原生自帶的乙個效果，如在iphone上面的**點開大圖的展示效果就是乙個彈簧動畫，如下圖所示：

它有乙個彈閃的過程，一大一小交替縮放就像乙個彈簧在彈動一樣，而不是以往那種簡單的線性變大。

如果使用css的animation-timing-function只是改變運動的速度，不能改變運動的方向。

而自己手動寫css模擬這種先變大再變小的效果：

@keyframes spring-show 90% /* 先放大一點 */ 95% /* 然後再縮回去 */ 100%

}複製**

是沒有這種彈性動感的。

因為要實現乙個彈簧振動效果，需要有兩個引數，乙個是阻尼係數damping ration，另乙個是剛度stiffness，阻尼係數決定了衰減的快慢，剛度決定了往返的週期長短。給定這兩個引數和彈簧的始末位移，根據一些物理公式可以推導出任意時刻彈簧的位移，這個位移就可以當作上面的scale縮放的值，或者是translate、rotate等的值。

那怎麼算呢？大漠在《css如何實現彈簧動畫效果》也詳細地討論了這種效果，並寫乙個sass函式實現，不過這種方式生成的css普遍比較大，所以我改用了js實現，原理都是計算乙個css的keyframes關鍵幀動畫的在1%, 2%, 3%, ..., 100%的時候屬性值應該是多少，然後再動態地插入乙個style標籤。這裡借用了乙個css spring的庫，這個庫gzip後只有3kb，使用方法如下：

import spring,  from
'css-spring';
const keyframes = spring(
, // from
, // to
// precision表示精度有2位
);const keyframestring = tostring(keyframes);
console.log(keyframestring);複製**

生成的css如下圖所示：

它會有乙個大小的變化過程：0 -> 1 -> 1.1 -> 0.99 -> 1，把這些值畫成乙個圖表看起來更加直觀：

可以看到它有乙個抖動且週期衰減的過程，實際的效果如下圖所示：

除了放大，縮小也能這樣處理，還可以應用於旋轉，效果如下圖所示：

這個是用下面的**生成的：

const keyframes = spring(
, // from
, // to
);複製**

當我們需要借助animation-delay讓3個星星逐個出現的時候，需要先visibility: hidden隱藏然後再出現，這個時候需要在keyframes裡面新增visibility屬性，如下**所示：

let
from = ,
to = ;
if (from.visibility) 複製**

最後生成乙個keyframes：

@keyframes spring-rotate 1% /* ... */ 100%

}複製**

再讓每個star星星的animation-delay依次增大：

.star 
.star
:nth-of-type(2) 
.star
:nth-of-type(3) 複製**

這樣就能實現逐個出現的效果了，如下圖所示：

這種彈簧動性能夠增強動感，比普通的單向效果看起來更帶感。

在實際的實現中我寫了乙個util，當頁面初始化的時候就生成keyframes，然後插入乙個style標籤放在head裡面。因為如果再加上webkit字首，乙個keyframes有4kb，10個就有40kb，直接用js動態計算的方式，會更省空間，靈活性也更強一點。

【人人網招聘中高階前端】

1. 專案背景: 我們在做乙個企業級海外的saas crm(客戶管理系統)產品, 前端的技術挑戰很大, 比如在我們的**讓客戶直接打網路**(直接打手機那種), 發email, 自動根據使用者場景處理業務等。

2. 技術棧背景: 也是採用比較流行的vue, vuex等框架, 通訊是webrtc, 訊息分發系統用google的fcm和蘋果的apn。服務部署在亞馬遜或谷歌云上。服務全球客戶。

3. 另外因為產品是乙個企業級使用者產品所以個方面要求比較高(比如效能，安全，多工處理等)。所以對候選人技術要求比較高，如果您對技術特別在意，那麼我們的空缺提供了很好的才能發揮空間和鍛鍊成長的機會。

請將簡歷發至[email protected]

【其它文章】實現webrtc p2p連線

實現前端彈簧動效

UI動效基礎 AE動效表現課

前端例項練習動效伸縮搜尋框

css動效學習

實現前端彈簧動效

UI動效基礎 AE動效表現課

前端例項練習 動效伸縮搜尋框

css動效學習

相關推薦

前端例項練習動效伸縮搜尋框