<tt id="cv7bq"><pre id="cv7bq"></pre></tt>

          <listing id="cv7bq"></listing>

          快來學學這十佳H5特效吧!

          日期:2015-12-02 / 人氣: / 來源:未知

          在市面上有一大批H5頁面模板制作工具,誠然,他們方便了很多非專業設計師設計制作H5頁面。但是不得不吐槽的是,很多模板工具平臺上的作品大部分還停留在左飛入右飛出的初級境界,看多了真心有些膩,動效如無美感還不如看靜態的。 那H5里有哪些高級動效了?小派幾乎仔細體驗了國內所有優秀H5頁面作品,結合自己的一些理解,整理出下面十大H5頁面特效。我們的H5作品如果能用上其中一兩個,相信能增色不少!術語也許不夠專業,歡迎吐槽!

          先說說展示方面的動畫特效!

          1. 粒子特效

          0

          星際傳奇:這是探索宇宙的門票 移動網站 百度百科:為模擬現實中的水、火、霧、氣等效果由各種三維軟件開發的制作模塊,原理是將無數的單個粒子組合使其呈現出固定形態,借由控制器,腳本來控制其整體或單個的運動,模擬出現真實的效果。 如上作品,那些粒子流和小火花,就屬于粒子特效,很有真實感。

          2. SVG路徑動畫


          元小望:SVG練習NO.1_描述孤獨 簡而言之,就是讓SVG的描邊像是有人繪制一樣的動畫效果。動畫輕巧不失真,特別適合那些崇尚簡約設計風格的網頁。 上作品是派友(Epub360用戶)元小望用Epub360設計制作的,大家感受下,是不是很酷!

          3. 序列幀動畫


          百度百科:序列幀動畫是只在時間軸的每幀上逐幀繪制不同的內容,使其連續播放而成動畫。 因為逐幀動畫的幀序列內容不一樣,不但給制作增加了負擔而且最終輸出的文件量也很大,但它的優勢也很明顯:逐幀動畫具有非常大的靈活性,幾乎可以表現任何想表現的內容,而它類似與電影的播放模式,很適合于表演細膩的動畫。例如:人物或動物急劇轉身、頭發及衣服的飄動、走路、說話以及精致的3D效果等等。 派友晗蕭模仿原版用Epub360制作了“我們之間只有一個字”的優化版,大家看看Epub360序列幀組件性能如何?

          4. 全線性動畫


          騰訊UP大會:生命之下,想象之上 全線性動畫可以理解為動畫連續,幾乎不間斷播放,像視頻一樣流暢細膩。 這支H5打破了傳統幻燈片式的呈現方式,塑造出了一種寬廣、素雅、幽靜的整體感受,該作品也被很多人推崇為H5里的動畫片。

          5. Cinemagraphic

          20150720142216_11924
          Levi's: “換”醒你的夏天 國內首個Cinemagraphic互動廣告 什么是Cinemegraphic?如果你不知道,就有點OUT了。顧名思義,Cinema是電影攝影,Graph是圖片,Cinemagraphic是一項將神奇的局部運動賦予靜態照片的新技術。 其中Cinemagraphic的應用恰到好處地了詮釋了“自然風”的概念,只見畫面上,人物的頭發和衣角飛舞著,仿佛吹拂著一陣陣自然風,在炎炎夏日,他們依舊感受著清爽,盡情玩耍。作為互動者的人們,當看到畫面上被風拂過的Cinemagraphic動態場景,他們也身臨其境地感受到自然風所能帶來的這種清爽感受。

          下面說說和交互相關的動畫特效。

          6. 全景

          杜蕾斯的第一座美術館 移動網站 虛擬全景美術館的概念并不新鮮。其鼻祖應該是 Google 的 Art Project,讓你能夠在線瀏覽全世界大多數博物館和美術館。杜蕾斯“美術館”的創新,在于它其實是熱門廣告形式H5頁面的偽裝。“我們想要通過多重手段(比如館內的彩蛋、12 點閉館無法訪問等等)來創造一個虛擬的真實空間,而不是傳統H5的單線程教育的邏輯。” Socialab 杜蕾斯組的負責人說,“液體主義群展將是杜蕾斯美術館無數展覽中的第一個。”

          7. 3D

           
          康師傅:2015最飛羊的新春祝愿 祝福燈籠可以360旋轉呈現,而且具有夜空繁星中題字燈籠飛來飛去的3D炫目效果,彰顯“最飛羊的新春祝愿”。其中意趣和精妙所在,恐非文字所能表述。

          8. 點擊碎屏



          大眾點評:這個陌生來電你敢接嗎? 移動網站 “點擊屏幕”不新鮮,但是這種屏幕擊碎的畫面好像也特別討人喜歡,大概有三輪左右的“擊碎”動作,這是整個H5的互動高峰。發現這種“屏幕敲擊”的常規動作特別有慣性,點一點就停不下來。是不是抓住了手機族的某些“強迫癥”特點。

          9. 長按逐字



          韓寒再談一加:1步1步看清韓寒 移動網站 整個H5頁面用打字機的形式呈現,隨著用戶按下按鈕,紙片會逐漸顯示出韓寒從1999年起,為人熟知或不知的成長軌跡。觸發逐字等動效很有真實感。

          10.滑動觸發

          騰訊視頻:這一幕你期待已久 移動網站 長頁H5,滑動觸發動效,和呆板的幻燈片式樣的H5拉開了距離。Epub360雖然能實現帶動效帶觸發的長頁,但是目前暫時還不能實現這種滑動觸發動畫。

          作者:admin


          推薦內容 Recommended

          相關內容 Related

          現在致電 0898-688989 OR 查看更多聯系方式 →

          Go To Top 回頂部
          时时彩怎么压赢的几率大

                  <tt id="cv7bq"><pre id="cv7bq"></pre></tt>

                  <listing id="cv7bq"></listing>

                          <tt id="cv7bq"><pre id="cv7bq"></pre></tt>

                          <listing id="cv7bq"></listing>