我來告訴你,那些博客中的gif動態圖是怎麼弄的?

大家都知道,圖片比單純的文字給人的視覺衝擊力更大,表達的內容也更直觀易懂,經常在博客上看到動態的gif圖,那這些gif動態圖是怎麼製作的呢,特別是Android移動開發者,寫了一個demo,寫博客時,想要把這個demo的實體畫面展示給大家看,可是demo運行在手機上,怎麼辦呢,難道靠截屏顯示靜態圖片嗎?顯然不是的,接下來我就教大家怎麼把手機上運行的demo製作成gif圖在博客中顯示。

一、整體思路:

先用Android Studio進行屏幕錄製,製作出視頻,再用gifcam軟件製作出gif動態圖。

二、利用Android Studio進行屏幕錄製

首先打開AS,連接上手機,打開你要錄製的程序或者視頻

打開ASandroid monitor面版


點擊箭頭所示的圖標會彈出如下界面


傳輸速率越大,製作的視頻也越大,我做了一個小測試,相同的16S的視頻,如果傳輸速率爲2,製作的視頻是700kb+,如果是4的話,視頻的大小一下就飆升到2Mb+了,不過這不影響我們後面製作gif的大小,所以一切默認就好。點擊start Recording,此時跳出如下界面


說明正在錄製,進度條會提示你已經錄製了多少秒。最多錄製三分鐘,此時如果你要操作程序進行演示操作就可以開始了。操作完成或錄製完成,點擊stop Recording

選擇文件夾存儲,點擊ok跳出如下界面說明錄製完成了

三、利用gifcam軟件製作出gif動態圖

打開gifcam軟件,可以看到,軟件主體是透明的,表示錄製的區域,相當於攝像頭,處於這個區域中的東西,將被製作成gif;右側是用來設置一些參數的,如圖,點擊Rec右側的小箭頭,fps是我們用這個軟件要掌握的唯一一個知識點,fps代表每秒播放多少幀畫面,值越大畫面越流暢,當然,代價就是最終的gif圖的大小也越大,而博客中的圖片大小都有上限規定,所以我們在製作gif圖的時候,要選取合適的fps值。點擊圖中的Customization,可以設置自己想要的fps值。

然後打開之前用Android Studio錄製的視頻,並把gifcam中間的透明區域通過拉伸對準想要製作的畫面。

點擊Rec按鈕開始錄製,再次點擊停止錄製,然後點擊Save按鈕保存,gif圖製作完成,在保存的位置打開查看:

好了,從手機錄屏到最終的gif動態圖的製作,大家肯定學會了,趕緊去寫個博客弄張gif動態圖過過癮吧。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章