您現在的位置是:電腦技術吧?>? 組裝維修 ??>??由淺入深,由淺入深的解釋??>??正文詳情

由淺入深,由淺入深的解釋

穰夢凡2019-11-27 14:21:54 人圍觀
簡介由淺入深的深的詞語一套操作界面和適當的動態互動反饋,可以給用戶帶來更好的操作體驗;一個H5操作宣傳頁和酷炫動畫特效,從加載動畫,形成動態效果,絕對有助于近兩年的傳播和

一套操作界面,合適的動態交互反饋能給用戶帶來更好的操作體驗;一個H5運營宣傳頁,炫酷的動畫特效定能助力傳播和品牌打造。

  近兩年,小到loading動畫,表單動效,大到各式各樣H5運營頁的炫酷展現,動效設計一詞可謂是火遍大江南北,而動效設計早已成為一名合格設計師必需有所知曉的領域。

本文將通過一些案例,和大家一同挖掘幾種常見的H5動效制作手法。

  我們由淺入深來挖掘這動效制作的秘密,一個入門級的小問題:看上圖這幾個動畫例子,大家是否能說出這動畫是如何制作出來的呢?而又是如何在網頁之上呈現的呢?  對,答案必須是設計師們都非常熟悉的gif小動畫了,H5動效制作的第一手法,便是GIF了。

  動效制作手法 1:GIF  GIF圖片擅長于制作細節的小動畫,位圖,優勢在于 體型很小,可壓縮,制作成本低,以圖片的形態適用于各種操作系統,無兼容性的后顧之憂。

制作GIF動畫的方式有很多,例如我們所熟悉的Photoshop時間軸,或是利用Flash,AE將動畫導出存成GIF格式等等。

  GIF動畫最常在H5動效里當擔loading導航條,熱門小標簽等元素,要把控圖片大小和精度之間的平衡,所以它一般用于制作小細節的動畫。

  H5頁面承載GIF圖片的方式相對以下要介紹的其他方法,是最省成本,最為簡便的。

只需要以背景圖片/內容圖片的形式在頁面上進行引用即可。

  聊完了GIF動畫的一些特點,那么我們必須同時對比一下它的堂兄弟:逐幀動畫 。

  動效制作手法 2:逐幀動畫  逐幀動畫即是利用一張等間距的動畫分解逐幀圖片,由js腳本模擬編寫或是使用css3新屬性step()制作而成。

step()在移動端的兼容性是很好的,但使用比較小眾。

逐幀動畫和GIF動畫的差別在于,腳本可以控制逐幀動畫的快慢和動作的暫停,而GIF動畫無法在后期通過代碼進行動畫速率及透明度的修改。

  做一個逐幀動畫必不可缺的就是需要一張等間距的動畫分解逐幀圖片.png,再通過JavaScript腳本或CSS3 animation的過度函數step() 來控制圖片的background-position,二者結合就可以快速輸出一個逐幀動畫啦。

  從以往的經驗看GIF動畫或是逐幀動畫,我們往往認為它們只適合做一些小細節的動畫。

其實二者也可以承載一些很獨特的動畫效果!如以下這個例子,這是陌陌的一個宣傳h5頁面,它便是由逐幀分解圖 JavaScript腳本模擬逐幀動畫 拼合而成的。

  視頻直接觀看H5效果:http://v.qq.com/page/r/4/t/r0174e7fg4t.html

  動效制作手法 3:CSS3  CSS3應該是動畫家族里絕對不會被遺忘的一名成員。

這里我們定義它為擅長于平面層的動畫。

CSS3的缺陷應該在于它的部分屬性還沒有被瀏覽器有好的支持。

先來看個例子,來自阿迪達斯的H5運營頁羅斯-絕不凋謝:  視頻直接觀看H5效果:http://v.qq.com/page/w/6/l/w0174ud2x6l.html

  這炫酷到沒朋友的動畫效果其實主要就是依靠CSS3編寫完成的。

  這里給大家介紹一下CSS3的動畫三大屬性:Transform 變形,Transition 過渡,和Animation 動畫。

  Transform 變形:擁有 rotate 旋轉 skew 扭曲 scale 縮放 translate 移動 matrix 矩陣變形五大特效,羅斯的例子中,便是對充分結合了這幾個變化特效的產物。

  Transition 過渡:擁有修改執行變換的屬性,時長,速率和延遲時間的能力,大家都很熟悉的貝塞爾曲線,也是歸屬于transition的設定之下的。

  ***拓展工具:貝塞爾定制傳送門***  Animation 動畫:若將Transform解釋為動作,Transition解釋為過渡,那么Animation則是連續的幾個動作,即動畫。

Animation可以我們設定keyframes的值,讓元素在一段時間內完成多個動作。

  然而我們如何高質高效把動畫設計傳達給工程師呢?  這里來個小小的Tips:建議使用案例Demo或者分鏡頭腳本 動畫屬性分解表 素材切圖的套裝!  以下圖為例:這是一個點擊反饋的小動畫,在無法提供Demo的時候,我們可以使用動畫屬性分解表的方式。

動畫屬性分解表可以讓工程師根據表格內填寫的數值進行動畫的編寫,會比憑空的和工程師進行交流傳達,來的更精準一些。

  動畫屬性分解表示例:

  動效制作手法 4:SVG  SVG,也是動效制作中不可忽略的一大熱門方法,我們定義它為擅長于線條的動畫,弊端是:IE8,Android4.2及以下支持不好。

看下圖幾個例子,涉及到這種沿著元素描邊的動畫,一般都是出自SVG之手啦,當然,它也可以實現一些復雜的動畫,類似這個表情圖片,不過實現成本是不太劃算的。

  知識普及:SVG,可縮放矢量圖形(Scalable Vector Graphics), 是被存成了 XML 格式的圖像,它有一些特別的地方:  可被多種工具讀取和修改(比如記事本)  尺寸更小,可壓縮性更強  矢量  純粹的 XML  一張SVG圖,其實是由一堆的定位錨點連線生成的。

所以它可以很方便的存為文檔格式。

而頁面中的引用,也是簡單的將此文本引入即可。

這里必須要注意的點是:如果你想制作一個SVG動畫,請一定要使用AI工具繪制輸出矢量圖給到工程師同學哦。

  動效制作手法 5:Canvas  HTML5 的新元素 ,類似畫板,擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

本身是沒有繪圖能力的。

所有的繪制工作必須依賴 JavaScript 完成。

我們定義它為擅長于繪畫的動畫。

如下圖,繪制這樣一個大量元素下落的動畫效果,就是Canvas所擅長的。

  Canvas可以算是SVG的堂兄弟,大部分的圖表動畫,都是由Canvas或是SVG制作而成的,二者的動畫能力相似但也有以下這些區別:  canvas是畫框,有自己固定的高寬,svg是不依賴分辨率的矢量,可以任意放大縮小。

  canvas能以.jpg的格式保存圖像,svg是文本的格式保存圖像  canvas繪制的圖像不占DOM,而svg的每個圖像都是1個DOM元素  canvas適合圖像密集型的動畫,而svg不適合大量使用,例如制作飄雪等  canvas完全依賴腳本繪制作,而svg可直接使用矢量轉存生成。

  動效制作手法 6:Flash-Canvas  除去上面幾種常見的手法,Flash轉Canvas的方法也是今年特別火爆的一種形式。

既然提到曾經輝煌的Flash,那產出物必須離不開炫酷這個形容詞:通過Flash cc制作復雜又精細的動畫,導成Canvas文件,動畫中的交互操作,依賴Create.js的腳步庫完成。

  以下引用咋們IEG小伙伴的例子,來讓大家一探此方法的魔力所在。

  視頻直接看H5效果:http://v.qq.com/page/o/m/7/o0174u3cim7.html

  動效制作手法 7:video  用視頻輸出非常特別的動效。

關于video的魅力我們用吳亦凡H5頁面的例子,相信大家瞬間就可以明白了吧^^。

  動效制作手法 8:JavaScript  其實,只要是涉及到交互反饋的動畫,小至滾屏翻頁,大到重力感應等都需要js進行處理腳步的編寫。

也就是說,所有的動畫特效都離不開Javascript同學的支持。

市面上有很多特別的Javascript腳本庫,例如three.js,細細運用,就可以做出非同凡響的動畫效果。

  最后我們再以一個簡單的表格來匯總這H5動效常見的制作手法,希望讀完本文的小伙伴們都可以在下次遇見新動畫效果時,第一時間挖掘出它背后的制作原理,好好運用這8大手法,人人都是優秀的動效設計師。

(表格中所闡述的性能損耗和實現成本僅作參考,具體動畫效果還需要具體分析,才可得知到底使用哪種方式是最適合的。

)

版權聲明:本文由 穰夢凡 整理編輯。

原標題:由淺入深由表及里,由淺入深難

轉載注明出處:http://www.dn9ww09s.icu/assemble/14608.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 車載高德導航沒有聲音,高德手機導航沒聲音了

    車載高德導航沒有聲音,高德手機導航沒聲音了 相關圖片高德導航提示音作為一款非常實用的旅游導航軟件,很多小朋友出門時都會用它來導航,但有時難免會遇到無聲無息的情況。如果導航系統沒有聲音怎么辦?接下來,超人軟件編輯將向...

  • ing的用法規則,三單的用法

    ing的用法規則,三單的用法 相關圖片ing變化規則口訣At規則是一個聲明,它為CSS的執行或行為提供指令。每個聲明都以@開頭,后跟一個可用的關鍵字,該關鍵字充當標識來指示CSS應該做什么。這是一個通用語法,盡管每個...

  • 摩拜隱形貼紙,摩拜618貼紙

    摩拜隱形貼紙,摩拜618貼紙 相關圖片摩拜成立我不知道我的朋友們是否收集了貼紙來贏得520元現金獎。幾天后,端午節就要到了。這次,安卓版摩比單車又推出了5款食品貼紙收藏活動。這次能拿到多少現金摩拜單車要押金...

  • 文字豎排,怎么讓文字豎排

    文字豎排,怎么讓文字豎排 相關圖片豎排文字怎么設置樣式表的字處理屬性中有兩個重要屬性:書寫模式和文本對齊。讓我們先看看它們的用法:1。寫入模式語法:寫入模式:LR TB,TB RL參數:lwps文字豎排...

  • 防范勒索病毒,如何防范勒索病毒

    防范勒索病毒,如何防范勒索病毒 相關圖片勒索病毒爆發勒索病毒在短時間內席卷全球。一段時間以來,人們忙著給自己的電腦添加各種安全措施。但事實上,與我們生活密切相關的另一項物品手機,也有感染勒索病毒的危險。...

  • 黑色大圓點●符號,間隔符是什么

    黑色大圓點●符號,間隔符是什么 相關圖片漂亮的分隔符分隔符的小點通常用于外文名字的漢譯間隔,這在玩家命名游戲中的角色時也可以看到。你基本上知道怎么打分隔符的小點嗎,現在的電腦都配備了智能輸入法,比如小編...

  • 讓一個div水平垂直居中,怎樣讓一個div水平垂直居中

    讓一個div水平垂直居中,怎樣讓一個div水平垂直居中 相關圖片如何讓div中的內容垂直居中讓我們看看最常見的實現示例:創建一個新的HTML頁面并將XML/HTML代碼復制到剪貼板!DOCTYPE HTML public-//W3C//DTD XHTM怎樣讓div水平居中...

  • 摩拜單車要押金嗎,摩拜單車押金多少

    摩拜單車要押金嗎,摩拜單車押金多少 相關圖片摩拜單車押金退不了我們都知道,如果我們想用摩比自行車,我們必須先交幾百塊定金。不過,隨著共享單車市場的激烈競爭,安卓版小黃單車和摩拜單車相繼推出免押金騎行。那么摩...

  • 什么是黃金比例,黃金比例多少

    什么是黃金比例,黃金比例多少 相關圖片黃金比例 身材黃金比例是多少?黃金比例是一個數學比例,可以在自然界中找到,結合經典的設計理論來建立一個平衡的構圖,它大約是1.6180,也稱為黃金平均值,通常用希臘字母?來...

  • 筆記本怎么調節屏幕亮度,聯想筆記本屏幕亮度怎么調

    筆記本怎么調節屏幕亮度,聯想筆記本屏幕亮度怎么調 相關圖片屏幕亮度調節安利最近給超人編輯上了一個關于如何調整win10筆記本電腦屏幕亮度的教程。我覺得這很實用,所以我今天就和大家分享這個教程。如果你需要學習,讓我們一起學習吧!如...

熱評文章

  • cd系列合集視頻,猛士的士高第一集原版

    cd系列合集視頻,猛士的士高第一集原版 相關圖片荷東猛士第一集mp3夢幻迪斯科,源于法語迪斯科,在英語中被稱為大師混音。因為它的發音和粵語中的孟氏相似,所以被命名為孟氏,意思是播放錄制的舞曲的舞廳。從香港飛猛士第一...

  • transition多個屬性,transition屬性功能

    transition多個屬性,transition屬性功能 相關圖片opacity屬性首先,我將引用w3school關于轉換的基本知識:定義和使用transition屬性是一個速記屬性,用于設置四個轉換屬性:transition屬性transittextarea的屬性...

  • 百度閱讀書架的書怎么下載,百度閱讀下載的書導出

    百度閱讀書架的書怎么下載,百度閱讀下載的書導出 相關圖片百度閱讀的電子書如何下載百度閱讀是一款非常實用的閱讀學習軟件,很多人喜歡用它來看書。那么如何下載百度閱讀的書籍呢?接下來,超人軟件編輯將介紹如何下載百度閱讀iPhone版...

  • office密匙激活,office激活密鑰在哪

    office密匙激活,office激活密鑰在哪 相關圖片怎么激活office如果你只想使用word和excel,忍受銀屑病的一般廣告在界面上,你可以使用Office2010的初級版本,但是激活Office2010只是幾個步驟,并且在激活microsoft密鑰激活...

  • fontsize屬性,font和fontsize

    fontsize屬性,font和fontsize 相關圖片css font size定義并使用font size屬性設置字體大小描述此屬性設置元素的字體大小。注意,它實際上設置了字體中字符框的高度;實際字符字體可能比這些框高或短(通常短),每個fontsi...

  • 京東第三方的是正品嗎,京東付款后怎么取消訂單

    京東第三方的是正品嗎,京東付款后怎么取消訂單 相關圖片京東取消訂單 又想要了百度閱讀是一款非常實用的閱讀學習軟件,很多人喜歡用它來看書。那么如何下載百度閱讀的書籍呢?接下來,超人軟件編輯將介紹如何下載百度閱讀iPhone版圖書...

  • inline-block,inlineblock張鑫旭

    inline-block,inlineblock張鑫旭 相關圖片div blockDisplay:inline block:很多前端用戶都知道,它的功能是將對象顯示為inline對象,但對象的內容顯示為block對象有以下代碼:CSS codinlineblock間隙...

  • N5手機,360手機N5

    N5手機,360手機N5 相關圖片360n5手機參數昨天360發布了一款新手機,升級版為360n5。那么360n5和360n5有什么區別呢?哪個更好?今天的超人編輯為您帶來了360n5和360n5雙360n5s手機參數...

  • 手機桌面壁紙怎么設置,桌面壁紙

    手機桌面壁紙怎么設置,桌面壁紙 相關圖片vivo桌面壁紙自動切換你厭倦了一層桌面壁紙嗎?每個用戶都喜歡將自己喜愛的圖片設置為桌面墻紙。不時更換桌面壁紙會很麻煩。事實上,我們可以為桌面壁紙設置動態開關,這將使桌...

  • 鎖定透明度怎么使用,PDF使用了透明度

    鎖定透明度怎么使用,PDF使用了透明度 相關圖片pr怎么使用透明度注:RGBA(R,G,B,a)值:R:紅色值。正整數|百分比G:綠色值。正整數百分比B:藍色值。正整數百分比A:α透明度。值介于0和1之間這里是一種白色,使用rCAD顯示透明...

關注微信

变脸官网查询