1. 程式人生 > >Android炫酷的效果

Android炫酷的效果

首先主要介紹幾種常見的產品引導介紹方式。

GuideView

GuideView是一個遮罩式的導航頁,能夠快速為任何一個View建立一個遮罩層,支援單個頁面,多個引導提示,支援為高亮區域設定不同的圖形,支援引導動畫,方便擴充套件。

效果圖:

ShowcaseView

一個通過區域性高亮達到突出重點,實現引導效果的控制元件。

效果圖:

Holo “New style” Material
Holo style showcaseview new style showcaseview Material style showcaseview

AppIntro

一個常規的viewpager產品介紹頁。

效果圖:

卡片互動Card interaction

這裡介紹幾種卡片互動體驗的控制元件。

CardStackView

非常酷炫的卡片是互動控制元件。

效果圖:

 

android-card-slide-panel

就是“探探”app實現的那種互動體驗,為此我還特意下了一個探探體驗了一下,卡片上展示的全是美女!左右拖動操作頁非常nice,探探這個產品互動簡直無可挑剔。

效果圖:

 

ExpandingPager

一個比較常規的卡片式互動控制元件。

效果圖: 

載入框LoadingView

主要介紹幾種很漂亮的載入框,

Android-SpinKit

基於非常火爆的css庫SpinKit實現的Android載入庫,動畫效果非常棒。

效果圖:

 

LoadingDrawable

這個專案重要介紹一些酷炫的載入動畫, 可以與任何View配合使用,作為載入動畫或者Progressbar, 此外很適合與RecyclerRefreshLayout 配合使用作為重新整理的loading 動畫。

效果圖:

  

LiquidButton

一個實現液體填充效果的載入提示view

效果圖:

LoadingView

哈哈,不多說,主要看動效,好看最重要。

效果圖:

MetaballLoading

一個有貝塞爾曲線動畫的載入提示框

效果圖:

提示框Dialog

提示框通常沒有載入框那麼酷炫的動效,一般以簡潔為主要風格。

material-dialogs

一個簡單易用的material風格的dialog

效果圖:

sweet-alert-dialog

這個專案最後維護時間是兩年前,現在可能都沒人維護了,但是實現的效果還是挺好的

效果圖:

指示器Indicator

指示器用來提示使用者當前操作到了哪一步。

StepView

提示操作步驟的巔峰之作,非常符合我的審美。

效果圖:

stepper-indicator

一個和StepView差不多效果的步驟指示器。

效果圖:

SpringIndicator

一個切換使用了貝塞爾曲線的indicator,說實話作者給的示例圖很醜,我不是很喜歡,但是我很喜歡貝塞爾曲線,所以這個也拿來放在這裡,學習用,實際使用我還是會使用上面兩個。

效果圖:

貝塞爾曲線

貝塞爾曲線,原來不知道是什麼東西,後來發現這個東西太神奇了,很多地方都有用,類似QQ未讀訊息,拖動消失那個效果,拖動到斷裂之前,就是二階貝塞爾曲線的效果,小面彙總了一個演示1-7階貝塞爾曲線形成動畫的庫,和三個使用二階貝塞爾曲線實現類似qq未讀訊息小紅點拖動消失效果的控制元件。

BezierMaker

這個開源庫演示了1-7階貝塞爾曲線的形成過程,讓我們直觀的看到1-7階貝塞爾曲線的形成動畫,相當牛逼

效果圖:

Bubble-Notification

一個模仿qq未讀訊息小紅點拖動消失效果的控制元件。

效果圖:

DraggableFlagView

另一個模仿qq未讀訊息小紅點拖動消失效果的控制元件。

效果圖:

BezierDemo

又一個模仿qq未讀訊息小紅點拖動消失效果的控制元件。

效果圖:

CircleImageView

一個非常漂亮的圓形ImageView,保持了ImageView的所有特性,可以像原生ImageView一樣直接用Picasso載入圖片展示。

效果圖:

PhotoView

一個支援縮放功能的ImageView,通過多點觸控或者雙擊都可以實現縮放效果。

效果圖:

rebound

Facebook出品,必屬精品。這個庫不是一個控制元件庫,而是一個功能庫,實現了點選圖片,像按壓彈簧一樣的效果;點選圖片之後,圖片會先縮小,再放大,效果非常絢麗漂亮。

效果圖:

InstaCapture

這個庫嚴格說起來和圖片關係不大,這是一個強大的通過一行程式碼實現截圖的功能的庫,而且可以指定當前activity截圖不包含哪些具體view元件,而且可以和當下流行的RXJava結合使用,非常簡單易用,截圖之後的檔案怎麼處理就隨便了,通常截圖檔案我們還是要載入成點陣圖顯示的,所以先放在圖片這裡。

效果圖:

PicassoFaceDetectionTransformation

這是一個和Picasso配合使用的圖片剪裁庫,特點就是自帶面部識別,會把臉部剪裁到中間。

效果圖:

原圖:

兩種剪裁效果:左邊的是居中剪裁,右邊的是面部居中剪裁

Luban

這又是一個功能庫,實現高效率的無損圖片壓縮功能,作者對比了使用該庫壓縮和使用微信壓縮的壓縮比例,發現壓縮效果和微信差不多!這是相當逆天的效果!有了這個庫,其它的壓縮庫基本可以放一邊了!

效果圖:和微信壓縮效果對比

內容 原圖 Luban Wechat
截圖 720P 720*1280,390k 720*1280,87k 720*1280,56k
截圖 1080P 1080*1920,2.21M 1080*1920,104k 1080*1920,112k
拍照 13M(4:3) 3096*4128,3.12M 1548*2064,141k 1548*2064,147k
拍照 9.6M(16:9) 4128*2322,4.64M 1032*581,97k 1032*581,74k
滾動截圖 1080*6433,1.56M 1080*6433,351k 1080*6433,482k

Compressor

又一個無損圖片壓縮處理庫,這個庫可能沒有上面那個庫厲害,但是這個庫可以和RXJava配合使用,實現處理鏈式化,所以如果是RXJava深度使用者的話,可以去看看。

AndroidPhotoFilters

這叒是一個功能庫,實現了靈活多樣的濾鏡效果,相當漂亮。

效果圖:

MagicCamera

一個包含美顏等40餘種實時濾鏡的相機庫,實現的是一個完整的照相機功能,可進行拍照、錄影和圖片修改。個人來說不喜歡這種雜合功能較多的庫,我一向認為越小越精緻,所以我一般不會使用這種庫。但是可以學習裡面的功能。

效果圖: