您現在的位置是:電腦技術吧?>? 編程技術 ??>??寧愿做一個讓人聞風喪膽,寧做讓人聞風喪膽的壞人??>??正文詳情

寧愿做一個讓人聞風喪膽,寧做讓人聞風喪膽的壞人

宜霞姝2019-11-23 08:41:34 人圍觀
簡介讓人聞風喪膽的今天,騰訊的學生何柳柳分享了一份精彩的H5總結筆記。他梳理了設計的動態效果、具體的實現方法以及他踩到的一些漏洞。他是一個高能干產品。他強烈建議學習!前言

今天騰訊的何六六同學把最近做的一個超贊的H5總結筆記分享出來,將設計動效、具體實現方法、踩到的一些坑都完整梳理了一遍,全文高能干貨,強烈建議學習喲!

  前言  最近火熱的有聲娛樂平臺 APP,企鵝 FM(編者注:此處絕非廣告),在8月28日鬼節前夕,聯合盜墓筆記推出了勇敢者的游戲活動。

作為一個 UI 工程師,在這個移動互聯網叱咤風云的時代,每次看到朋友圈中被分享的各種花樣 H5 頁面,總是心癢難耐,也想做有著酷炫動畫和帶感聲效的 H5 呢。

回想到做鬼節活動頁的時候,接近午夜零點還在調整頁面效果,看著頁面上漸隱漸現的可怕畫面,活生生嚇到了自己,也是蠻難忘的。

作為剛剛來到活動頁新手村的朋友,踩到了一些坑,所以讓我進入正題吧。

哦,等一下,請先掃一下二維碼啦~

  與設計師的溝通  在拿到視覺稿和需求單之后,我們需要了解整個活動的流程。

有的時候,設計師并不會把每個頁面的動畫效果做成視頻,而是用口述的方式和工程師進行溝通。

這樣就需要工程師結合活動頁流程和設計稿之后,自己先構思一些動效再去同產品以及設計溝通,這樣交流的效率才會比較高。

  動畫新手有的時候會天馬行空想到一些奇怪的效果,可能會不符合整體設計風格,可能會違反現實物理規律,有自己的想法,還要和產品設計確認。

比如這個頁面:

  一開始是做成了先出現手電筒,再出現光,在我的設想中剛開始手電筒上不會有那層黃綠色的光。

后來經設計師提醒:如果完全沒有光源,也應該看不到手電筒。

才改成了現在的方案:燈光閃兩下:物理定律什么的,我才記不清了呢T T。

  P.S. 做動畫的時候銘記動效原則(騰訊精品文!超多干貨的UI界面動效設計指南),基本上動畫的效果不會跑偏。

  具體實現  仔細想想,這個活動頁面并沒有用到什么高深技巧,基本上是用 position 定位和 CSS3 動畫完成的。

不過在寫頁面之前,還是有不少擔心的:  1、頁面兼容怎么做  按照 iPhone6 的尺寸確定元素的位置,然后用 zoom 或者 transform: scale(x) 拉伸頁面或者拉伸元素。

在實際開發的時候,我一度對這兩個屬性的用法產生混淆,所以作些了研究,稍后會詳細說說這兩個屬性。

  2、3D 變化效果怎么實現  大家應該早就聽說過或者使用過 perspective 和 perspective-origin 這兩個屬性了,雖然教程和分享都看過不少,但真正寫起來還是有一些摸不著頭腦,各種搜索關于 3D 動畫的解釋之后我認為原理大概是這樣的:

  簡單粗暴地說,請想象你是站在上圖中的紅點位置,你與物體間的距離是 perspective,眼睛的位置是 perspective-origin。

好了,現在站定位置,去看這個物體,想象物體投影在某個平面上的效果(這里的平面就是我們的顯示屏),這就是 3D 投影的結果。

  關于 perspective-origin,可以看看這個demo。

  說了這么多,在實際運用中,我還是找了一個生成器。

  得到的效果大概是這樣的:

  想要重點說一下磁帶的實現,主要牽涉到的圖片資源是下面這幾個:

  磁帶被分成了3個部分,磁帶底部,磁帶封面和磁帶。

其中封面和磁帶是正視圖,需要使用 3D 旋轉,讓這兩個元素躺下去,而且為了保證這三個元素之間不會因為屏幕的縮放,出現錯位的問題,需要保證磁帶封面和磁帶的定位是基于磁帶底部的。

其實磁帶上還有兩片蓋子,不知道大家有沒有注意到。

其實這個蓋子是左右對稱且中心對稱的,所以完全可以只用一張圖片完成這樣的效果,用 transform: scale(-1, 1); 和transform: scale(1, -1); 實現。

  3、動畫如何才有代入感?

  這個活動頁面我個人最喜歡的地方就是星星砸下去的動畫,感覺所有的戲份都在它身上。

開始的設想只是星星砸下去,感謝在制作過程中,經驗豐富的同事所提的建議:星星砸下去的時候要有灰塵濺起或者火星四濺的效果。

后來和設計商量,最后用了灰塵濺起的效果。

不過本來還想做,星星背后的鐵板應該要有震動的效果。

由于時間關系,震動的效果有點不好添加,所以放棄了,這一點感覺有一些遺憾。

可能頁面新手的經驗不夠,很多動畫的效果因為有限的想象力所以不太完善。

這個時候和身邊經驗豐富的同事請教是很有效的方法。

同時,一定要多看 B 站拓寬視野才行哦。

  踩到了一些坑  頁面布局并不復雜。

前文也提到,基本上使用 position: absolute; 來實現的,不過遇到了一些問題就有了以下總結:  1、殺雞就不要用牛刀,能又快又好解決問題才最重要

  上圖是首頁的截圖,頁面加載之后應該可以看到膽量測試下面的藍色線條有一個動畫。

  故事是這樣的,自從 SVG 帝王小啪帶著神器 svgartisan 降臨,做頁面的時候總想加上一點 SVG。

然而這個藍色線條上有特效,所以用 PS 導出 SVG 后還要做二次處理才能還原設計稿上的效果,而且 SVG 的代碼你懂得,它總是有點長。

其實有個簡單粗暴的方法:改變藍色線條的圖片寬度,雖然這個方法從性能上看并不好,但考慮到這個頁面也只有這里發生了重繪,所以還是用圖片 寬度控制來實現了。

  不知道大家會不會為了某一種技術而去做某一件事情,但其實完成那件事情才是真正的目的,卻因為那個技術而耽誤了不少進度,這樣就有點進入了炫技的誤區。

  2、答應我,偽元素上就不要做動畫了  偽元素真的是神一樣的存在,一個標簽自帶兩個兒子,不知道為什么就有種金閃閃的感覺。

但是偽元素上的動畫真的很坑,年少無知,頁面都寫完了,發現在 iOS 上美如畫的動畫效果,到了小米和魅族上就  Android 上坑多,不要一次應用太多新技術。

比如在魅族上用 flexbox 布局,就要加上 display: -webkit-box。

還有一個教訓就是,頁面果然應該做一個測試一個啊QAQ。

因為這個項目是重構和前端并行開發的把偽元素改成實際 DOM 元素的時候,是懷著一顆對不起前臺的心的。

  3、請寫好注釋

  與UI工程師對接的前臺同學需要看注釋才知道什么時候要加什么class,想到剛剛開始接需求的時候,從來不寫注釋真是對不起前臺同學T T現在我個人的注釋如上圖所示。

也看過組里不同同事的注釋風格,大同小異,主體思想就是在XX時候添加XX class這樣,和對接的同學約定好就可以~  zoom 和 transform: scale(x); 的使用  我將會在接下來詳細談到前文提到的 zoom 和 transform: scale(x); 問題。

  為什么要使用縮放  現在不管是活動頁的設計稿還是產品頁的設計稿,逐漸以 375667 的 iPhone6 為基礎。

但是實際生活里,這些頁面是會出現在細細長長的 iPhone5、480px 高度的 iPhone4 還有大屏幕的 iPhone 6 ,更不要說在三星小米魅族一加等等等等尺寸都不知道怎么辦才好的 Android 系列上打開會是什么gui。

  拿這次的活動頁面設計稿來說,與用戶產生交互的按鈕在頁面篇底部的位置。

有一個前提,為了兼容不同寬度的屏幕,所以頁面是基于 iPhone 6 的 375px 用 zoom 屬性進行縮放,可以看出iPhone 5 和 iPhone 4 的寬度一樣,而且看設計稿,頁面元素是從上到下分布的:

  也就是說,使用相同的 zoom 值,滿足了 iPhone5 的頁面效果,但是在 iPhone4 上,按鈕就會偏底,頁面整體感覺也偏底。

但是 zoom 值不能隨便更改,否則紅框中的錄音機圖片的左右邊界就會顯示出來。

所以要針對 iPhone 4 調整元素的之間的間距,最終的效果大概是這樣的:

  可以看得出效果并不是很好,整個頁面非常的擁擠,所以在這個情況下,我覺得用統一 zoom 值來調整有點一棍子打倒了,如果一個個元素微調,那么最好效果會好得多。

加上 zoom 會有一定的性能問題,組里的同事有些是 zoom 調整,也有給每個元素加 class 通過 transform: scale() 調整的。

重構最神奇的就是,條條大路通羅馬,怎么樣都能達到自己想要的視覺效果,但是中間會因為各種原因,實現的方式不太一樣。

  拿到設計稿一開始就先看看這個設計稿的布局,有一些是從頁面頂部到底部都有效果的,這個時候就要考慮在 iPhone4 這樣屏幕不夠高的設備上如何保證頁面完整呈現;或者在不影響交互的情況下,隱藏哪些元素。

有的時候頁面上元素比較集中,這個時候就要考慮在 iPhone6 這樣的大屏幕設備上,要不要調整間距使得頁面不會太空曠。

  要知曉設計稿背后的含義,不是一拿到就開始做了,有些元素其實是要整體考慮的。

有些乍一看好像是用 position 定位,分別寫 top 值就好。

殊不知,設計師真正要表達的是,作為一個整體,它們在頁面上要絕對居中。

沒有 get 到這個 point,兼容的時候就要哭了。

  zoom 和 transform:scale 的概念  先來看一下 zoom 和 transform:scale 的說明:  Specifies the initial zoom factor for the window or viewing area. This is a magnifying glass type of zoom. Interactively changing the zoom factor from the initial zoom factor does not affect the size of the initial or the actual viewport.  從定義上看 zoom 縮放的是被 zoom 的容器的視口,可以把它想象成放大鏡的效果,這個屬性是可被繼承的,所以我們做設備屏幕兼容的時候,可以在 body 標簽下加一個 div 包裹住頁面上的其他元素,然后在這個 div 上加 zoom,達到的視覺效果就是頁面上其他元素也被縮放了。

但是有些元素并不支持 zoom。

  A two-dimensional transformation is applied to the coordinate system an element renders in through the transform property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix (either defined in this specification or by reference to the SVG specification), then multiplying the matrices.  在說 scale 應該要先看看 transform。

transform 屬性應用到元素的過程其實是矩陣變換的過程,在渲染的時候,元素的坐標就會被確定下來,然后和 transform 的屬性值進行矩陣運算得到最終的坐標,不過你會發現,一個絕對定位的元素通過 transform 改變顯示位置后,這個元素的 tbrl 值并不會被更新,且 transform 屬性不可繼承的。

  The value of the transform property is a list of applied in the order provided. specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.  scale 是 transform 的一個屬性值,這是一個縮放矩陣。

當一個元素被定義了 transfrom: scale(x); 后,還是再結合它的 transfrom-origin,才能確定最后的縮放效果。

依然是兼容屏幕分辨率的問題,要想 transfrom: scale(x) 達到和 zoom 相似的效果,要記得把 transfrom-origin 設置成 0 0。

這么設置的原因是,在文檔流中的元素,是以它的左上角為中心進行 zoom 的,而當元素脫離文檔流時,要使 transform: scale(x) 和 zoom 達到相同的效果,還要具體分析 transform-origin 要如何設置。

  大概你也注意到了,在前一句中,我說的是相似的效果而不用一樣的效果,這是因為使用 scale 的時候可能遇到下面這樣的問題。

下圖中左邊為 transform:scale(.85),右邊為 zoom: .85:

  下面這段是外層容器的樣式,背景是定義在 switch-wh 動畫中,通過絕對定位讓瀏覽器自行計算,保證容器大小占滿整個屏幕:

  因為 zoom 是作用在 body 下面這個占滿了屏幕空間的容器,所以根據定義以及 zoom 的繼承性,我們可以說在這個頁面上使用 zoom 其實是縮放了整個屏幕(也就是視口),可以想象成在瀏覽器中打開了頁面,然后放大這個頁面的效果:

  為什么 scale 會留下右部和底部的迷の白色呢?讓我們回到 transform 的定義中,applied to the coordinate system an element renders in through the transform property。

當元素都進行渲染了,坐標已經確定了,再進行縮放,也就是在原來元素基礎上改變大小。

所以 .sf-index 雖然在渲染時四個角的位置分別是(0,0)、(100%,0)、(0,100%)、(100%, 100%),經過以 (0,0) 為變換中心的 scale,就變成了(0,0)、(85%,0)、(0,85%)、(85%,85%)。

我們就會看到頁面右邊出現寬度為15%的一條白邊,以及頁面下方高度為15%的白邊。

  好像 zoom 無敵了呢  看起來,好像兼容的時候應該用 zoom 呢。

嗯看到 scale 之后的結果我就是這么想的。

接著就發現 zoom 之后的頁面,文字的顯示不太正常。

下圖左邊是被 zoom 的 iPhone4,右邊是沒有被 zoom 的 iPhone6:

  由于頁面是被整體縮放了,所以文字也自然出現了縮放,剛好這種好像被砍了一刀的文字效果還蠻適合鬼節的活動頁面,所以我并沒有做處理。

正常來說,如果需要做處理就是調整文字的 line-height 和容器的 height,使其不出現遮擋。

  正如頁面元素經過 zoom 后,實際的大小會發生改變,圖片的大小也發生了改變,使用雪碧圖就出現了一些問題。

雪碧圖是把各種小圖拼合到一張大圖上面,通過 width、height 和 background-position 定位到圖片,看下圖可以發現相鄰圖片的邊界也一起顯示出來了。

  審查元素發現,用于顯示圖片的元素尺寸也不對啊:

  可以看出這個元素正確的尺寸應該是 19852,經過 zoom: 1.10 放大后容器反而變小了,后來將 zoom 值調整到 1.104(414/375),圖片的邊界問題算是解決了。

  關于圖片沒有正常顯示的問題,我的推斷是,原因在于 zoom 值設定偏小,圖片經過 zoom 后沒有被正確地計算,而圖片的容器又偏大,所以相鄰圖片的邊就被顯示了出來。

后來 zoom 值是根據比例設定了,就不會出現這個問題。

  最后,zoom 對性能不友好,下面兩個 gif 分別是 zoom 和 transform: scale 引起的重繪:

  很明顯,在文檔流中 zoom 加在任意一個元素上都會引起整個頁面的重新渲染,而 transform: scale 只是在當前的元素上重繪。

  還有沒有更好的兼容方法呢  這樣說來,簡直兩個方法都不能用了嘛還有沒有什么別的兼容的方法呢?  有的。

  像需要大量圖片的頁面,做兼容的時候我們常常擔心的是什么?當然是圖片比例出問題咯,所以也會使用通過偽元素設置 padding-top 的方法,保證圖片比例正常地顯示出來。

只是這樣的寫法通常要結合 background-size:cover; 而我們常用的工具 CssGaga 在生成雪碧圖了之后會覆蓋 background-size。

目前的這個方案的話就不合成雪碧圖了。

  還有一個方案是使用 media query 結合 rem (或百分比)完成這樣的布局,不過目前 gaga 不支持 background-size 的 rem,所以要采用什么方式合成雪碧圖以及如何生成新的樣式,還需要尋找新的方向。

在不需要合成雪碧圖的時候,可以用這兩種方法。

版權聲明:本文由 宜霞姝 整理編輯。

原標題:寧可做一個讓人聞風喪膽的惡人,我寧愿做一個讓人聞風喪膽的壞惡人

轉載注明出處:http://www.dn9ww09s.icu/program/13998.html

文章評論

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

    用戶名:

    驗證碼:

作者推薦

  • 怎么提升開機速度,提升開機速度

    怎么提升開機速度,提升開機速度 相關圖片電腦開機速度最快幾秒最近,許多win10用戶報告說,他們的計算機啟動緩慢。那么如何設置win10系統的系統配置來提高啟動速度呢?接下來,你不知道如何跟隨超人軟件編輯器學習如何設...

  • pdf怎么轉換成jpg圖片,怎么把圖片轉換成word

    pdf怎么轉換成jpg圖片,怎么把圖片轉換成word 相關圖片圖片pdf轉換成jpg格式您是否經常遇到在工作過程中需要將PDF文件轉換為圖片的情況?你知道如何把PDF文件轉換成圖片嗎?現在,超人軟件編輯器將介紹如何將PDF轉換為JPG,如果需要的話...

  • 瀏覽器是如何渲染頁面,瀏覽器加載渲染頁面的流程

    瀏覽器是如何渲染頁面,瀏覽器加載渲染頁面的流程 相關圖片瀏覽器頁面本文提出了一種通過異步下載樣式表來防止樣式表下載阻塞頁面呈現的技術,使訪問者能夠盡快得到信息內容的警告!這篇文章充滿了善意,但它不負責讓讀者意識到以下問...

  • 提現,支付寶提現多久到賬

    提現,支付寶提現多久到賬 相關圖片吹牛提現沒有到賬寶美商城是一個軟件,不僅可以購物,而且可以經營自己的商店。在用戶通過自己開店賺錢后,寶美商城需要多長時間才能到賬取現?現在,超人軟件編輯也要介紹一...

  • 唱吧音效怎么調效果好,唱吧喊麥音效怎么調

    唱吧音效怎么調效果好,唱吧喊麥音效怎么調 相關圖片怎么調唱吧里面的音效才好聽唱歌吧是一種可以讓你隨時隨地卡拉OK的軟件。我相信你的MAC朋友最想知道的是如何把它調好。接下來,超人軟件編輯器將介紹如何調教Android版本的最佳音...

  • 首頁代碼,代碼

    首頁代碼,代碼 相關圖片界面代碼必須添加的標記1。公司版權聲明!---該網站設計于2000年6月-2日。網頁顯示字符集簡體中文:metahttp equiv=content typeconte改代碼...

  • PPT顯示比例,ppt設置顯示比例

    PPT顯示比例,ppt設置顯示比例 相關圖片如何查看ppt比例我相信在使用PPT的過程中,大家都發現PPT圖片一般有兩種比例。分別是4:3和16:10。ppt如何改變顯示比例?接下來,超人軟件編輯將向您介紹ppt4:3ppt設置比例大小...

  • 我的屬性面板,屬性面板

    我的屬性面板,屬性面板 相關圖片屬性Dreamweaver屬性面板可以快速更改HTML和CSS屬性,從而實現頁面修改的所見即所得效果。一。仍然使用greenstart.html文件作為示例文件,并圖層屬性面板在哪里...

  • 插件是什么,插件

    插件是什么,插件 相關圖片應用插件Chrome是目前最受好評的瀏覽器之一。它是由谷歌公司開發的。它的穩定性、速度和安全性都非常突出,深受用戶的喜愛。Chrome插件為Chrome提供了更好、更強lodop插件...

  • flash簡單實例教程,flash的教程

    flash簡單實例教程,flash的教程 相關圖片flash新手教程它主要是利用直線和掩模的知識來完成的。這個例子的效果是看到葉子慢慢落在圖片上:打開Flash MX軟件,打開文檔屬性對話框,將電影場景設置為默認大小,沒有顏色。自...

熱評文章

  • 桔子白條,桔子茶藍白條

    桔子白條,桔子茶藍白條 相關圖片桔子分期吧Orange staging是一種生活購物軟件。在這個軟件中,用戶只需申請一張白條,就可以在支付前體會到消費的體驗。那么如何在橙色的分期付款中制作白色條紋呢?接藍白條...

  • 水晶質感,PS水晶質感

    水晶質感,PS水晶質感 相關圖片如何用ps做出水晶質感的效果一。輸入你想要的單詞。2。使用“縮放”和“扭曲”工具調整所需的角度(請注意,這是我們正在處理的內容或單詞2不是組合路徑,因為如果它是由路徑處...

  • 719唯品會,719唯品會包郵嗎

    719唯品會,719唯品會包郵嗎 相關圖片唯品會y近日,摩比和唯品會推出了719紅包車活動。你知道719盒式汽車的用途嗎?接下來,超人軟件編輯將介紹如何玩iPhone版的Moby唯品會紅包車,感興趣的合作伙伴唯品會為什么便宜...

  • 段落縮進,段落首行縮進

    段落縮進,段落首行縮進 相關圖片各段落首行縮進2字符一。只有人為地增加兩個中文滿空間,才能顯示位置縮進效果。2。插入點地圖或圖形點地圖是指圖片中只有一個或多個像素點,肉眼看不到。當我們在段落的開頭插...

  • 清理,清除瀏覽記錄

    清理,清除瀏覽記錄 相關圖片win7刪除文件恢復相信使用win7的小朋友們已經發現,他們的電腦系統在累積使用的過程中存儲了很多無用的記錄。那么win7系統如何清理記錄呢?接下來,超人軟件小程序將為您介紹win清...

  • 自學交互設計,交互設計自學網站

    自學交互設計,交互設計自學網站 相關圖片交互設計需要學編程嗎對于所有人來說,最常見的問題是如何從零基礎上學習交互設計。事實上,在許多情況下,零基礎并不可怕,但他們最害怕的是零基礎帶來的浮躁,例如,他們往...

  • 抖音切換鏡頭視頻教程,抖音怎么切換幾個畫面

    抖音切換鏡頭視頻教程,抖音怎么切換幾個畫面 相關圖片抖音怎么切換場景自助餐作為下一代流行的電影拍攝軟件,以其超酷的功能受到很多年輕人的喜愛。但是你知道怎么換相機嗎?現在,超人軟件將為您帶來iPhone版本的相機切換方法。我...

  • 怎么修改ps的尺寸,ps修改圖片尺寸

    怎么修改ps的尺寸,ps修改圖片尺寸 相關圖片ps上面的尺寸怎么設置在我們的生活中,我們總是遇到一些圖片的大小達不到我們需要的大小的麻煩。很多朋友總是問我如何根據需要調整圖片的大小。今天,我將向Photoshop初學者介紹圖...

  • Flash動畫實例教程,做flash動畫

    Flash動畫實例教程,做flash動畫 相關圖片flash一分鐘動畫輕松地將flash動畫轉換成GIF圖片magicswf2gif不僅可以快速高效地將swf格式的[color=﹐0000ff]flash[/color]動畫轉換成flash動畫作業...

  • 秘密檔案2,秘密檔案1

    秘密檔案2,秘密檔案1 相關圖片中國秘密檔案秘密檔案館是在滴滴四周年之際為用戶推出的一項活動。通過這個活動,用戶可以了解到他們在過去四年中花了多少錢。那么迪迪的旅行秘密文件在哪里?接下來,超人軟...

關注微信

变脸官网查询