程序猿必備的10款web前端動畫插件一

1.動畫SVG框架幻燈片

在幻燈片之間切換時顯示動畫SVG幀的實驗性幻燈片。不一樣的形狀能夠用來建立各類風格。

咱們想和你們分享一個實驗幻燈片。咱們的想法是在從一個幻燈片轉換到另外一張幻燈片時，使SVG幀動畫化。使用不一樣的形狀，咱們能夠在改變SVG路徑時建立各類框架樣式。這個想法的靈感是基於Dribbble拍攝：06章太平庸。咱們使用的是anime.js的動畫。

在線演示

源碼下載

2.WebGL的背景裝飾

使用WebGL顯示爲背景的裝飾形狀的集合。這些形狀由Three.js建立，並使用TweenMax庫進行動畫製做。

，咱們將探索一些使用WebGL生成的原始和實驗背景。主要想法是將有趣的動畫形狀顯示爲裝飾性頁面背景，其中一些具備微妙的交互性。全部的演示都是用Three.js WebGL庫建立的各類形狀，動畫由高性能的GSAP動畫庫控制。

在線演示

源碼下載

3.創意SVG筆畫動畫

一個創意撫摸由SVG和GSAP驅動的自行車插圖的動畫。

SVG筆畫動畫不是什麼新東西，可是當使用基本上由筆畫構成的更復雜的繪畫時，咱們能夠建立一個很是原始的效果。使用許多不一樣的顏色和添加一些其餘元素動畫，咱們能夠帶來一個很是獨特的外觀插圖生活。

在線演示

源碼下載

4.展開網格項目動畫

在細節視圖打開時縮略圖放大的網格項目動畫。

咱們想分享一個簡單的實現你的網格動畫是基於Dribbble的射擊衝浪項目由菲利普Slováček。當單擊一個網格項目時，背景和縮略圖將被放大並移動到其全屏位置。雖然Dribbble鏡頭是手機的動畫，但咱們認爲咱們也能夠在桌面上探索這個概念。

在線演示

源碼下載

5.Kylo Ren CSS頁面預加載器

僅用HTML和CSS製做的星球大戰Kylo Ren頁面預加載器。

，咱們要分享一些與你有點不一樣的東西：一個沒有圖像的動畫「星球大戰」只贊助Kyl​​o Ren用HTML和CSS製做。

在線演示

源碼下載

6.動態形狀覆蓋與SVG

一些想法爲多層SVG形狀疊加，動態生成與各類效果可調整的屬性。

咱們想分享另外一種實現變形頁面轉換的方法。這一次，咱們將用JavaScript生成多個SVG曲線，使得許多不一樣的外觀形狀成爲可能。經過控制幾個SVG路徑的各個座標，使用粘性運動的矩形（疊加）生成的曲線形狀。咱們使用glsl-easings中的一些很好的緩動函數，經過調整曲線，速度和延遲值，咱們能夠產生許多有趣的效果。

在線演示

源碼下載

7.液體變形效應

由PixiJS和GSAP驅動的WebGL中的液晶失真效果的幻燈片放映。

咱們想和你分享一個有趣的失真效果。這個演示的主要概念是使用位移貼圖來扭曲底層的圖像，給它不一樣類型的效果。爲了演示圖像之間的液態轉換，咱們建立了幻燈片。一個位移貼圖一般作的是將圖像用做紋理，稍後將其應用於對象，從而給出假設底層對象纏繞在該紋理周圍。這是一種經常使用於許多不一樣領域的技術，可是咱們將探索如何將其應用於簡單的圖像幻燈片。咱們將使用PixiJS做爲咱們的渲染器，過濾引擎和GSAP動畫。

在線演示

源碼下載

8.切片雙圖像佈局

一些佈局具備切片背景圖像，幻燈片功能和毛刺效應。

咱們想和你一塊兒分享一些圖片。 這個想法是在網格佈局中顯示一些文本元素，並以幻燈片方式更改內容和圖像。 對於背景圖片，咱們建立了一個有一些額外選項的插件。 爲了作一個有趣的過渡，咱們使用一個小故障效果。 這個效果咱們也適用於一些文字。

在線演示

源碼下載

9.有機SVG形狀變形想法

一小組有機形狀效果的想法。演示顯示了一些在網站上交互式使用動畫SVG變形的方法，包括菜單懸停和內容顯示效果。

咱們但願與您分享更多動畫有機SVG形狀。這個想法是將一些流暢，天然的形狀整合到一個網頁中做爲裝飾元素，有時候還有一個互動，也就是在菜單項上懸停的菜單背景，或者簡單地說，一個由凱文激發靈感的持續動畫波背景拉格爾的設計。在其中的一個演示中，咱們還使用了一些模式和剪輯路徑，以得到全屏動畫，以顯示其餘內容。這些演示中的變形路徑和其餘動畫由anime.js支持。

在線演示

源碼下載

10.變形頁面轉換

一個簡單的變形頁面轉換效果，噹噹前頁面向上移動時，SVG路徑變形。

咱們但願與您分享一個簡單的變體頁面過渡效果。這個想法是將一個SVG路徑變形，同時移動一個介紹頁面，建立一個有趣，流暢的外觀。對於動畫咱們使用anime.js和一些字母效果，咱們使用Charming。在演示中，咱們使用「介紹轉換」來展現效果，但這固然只是這種頁面轉換的許多用例之一。

在線演示

源碼下載