中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

還記得一個月前財付通首頁的那套動畫嗎？作為設計濕抑或程序猿，你有沒為她的實現感到好奇？今天，我們就搭乘時空車，穿梭回去探個究竟吧。溫馨提示：抓緊扶手哦~

Part 1：每個人都有一顆童心（設計理念）

?從我們耳熟能詳的童話故事入手，將“快捷”、“移動”、“安全”、“輕松”融入其中，寓情于景、寓教于樂，于無形中將財付通的品牌理念植入用戶心中……

Part 2：立體賀卡，你收到了嗎（動畫方式）

動畫的進入效果，模仿的是立體賀卡的展開：基本背景先映入眼簾——>人物/近景、事物/遠景從紙面上（畫面的地面上）站立起來——>裝飾物（文字）從另一空間出現（從屏幕上方墜落），如圖：
?其中，近景和遠景的分開翻轉，使立體感、層次感更分明，動畫更飽滿；時間順序上，由遠及近、由上到下，更貼近立體賀卡的感覺。

Part 3：沒有flash我照樣兒活（動畫實現）

1. 基本屬性

2. 疑難雜癥

2.1 3D翻轉立體效果

3D動畫沒有立體效果，像2D一樣2B？有沒有遇到過？你是怎么處理的？

開始討論這個問題之前，我們先來了解一下基本動畫——旋轉。css3中的旋轉有繞x軸、繞y軸和繞z軸旋轉三種，坐標系如下圖：

?如果非要舉個例子的話，體操運動員的單杠運動是繞x軸旋轉：

?jolin姐姐跳鋼管舞是繞y軸旋轉：

?旋轉飛刀的特技表演是繞z軸旋轉：

?由坐標系和圖圖可以看出，z軸是垂直于屏幕的，繞z軸旋轉是在平行于屏幕的平面上旋轉，因此旋轉是2D的，旋轉的屬性是rotate()；而繞x軸和y軸旋轉是在垂直于屏幕的平面上旋轉，是3D的，旋轉的屬性分別是rotateX()和rotateY()。

回到主題，我們動畫中的前/后景翻轉，實則是繞著x軸旋轉90度。初步測試時，設好了旋轉的屬性和角度值，前/后景可以翻轉了，但是卻毫無立體感可言，不是從地面上“翻”起來，而像是從地面上“冒”出來似的，縱深方向上（即z軸方向）沒有距離感。查閱資料后發現，原來3D效果是要設置透視參數的（沒有透視，不成3D），常用的兩個透視屬性如下：

perspective：設置鏡頭到元素平面的距離（所有元素默認都放置在z=0的平面——即屏幕上）。比如perspective(500px)表示，鏡頭距離元素表面的位置是500像素。此時你看該元素，就好像你的眼睛距離該元素500像素遠時看到的效果。示例如下：

原圖：

?不設透視時，元素繞y軸旋轉45度：

?透視距離設為500px時，元素繞y軸旋轉45度：

?有圖有真相，這下明白了吧？不過，透視距離到底設多少才合適呢？

各位看官想想，既然鏡頭模擬的是我們的眼睛，那么，我們的眼睛距屏幕有多遠，是不是透視距離就該為多少呢？答案是肯定的。鑒于目前主流的屏幕分辨率在1680*1050上下，而眼睛距離顯示器的距離大約為1.2個顯示器的寬度，故透視距離大致應設為1680px*1.2=2016px≈2000px。

?perspective-origin：規定鏡頭在平面上的位置，默認放在元素的中心。

示例如下：

?在我們的動畫中，透視距離perspective設的是2000px；因視線垂直屏幕即可，故不需設置perspective-origin。

2.2 Safari穿透bug

Safari下圖片會透過圖片穿過來，就像電影里，鬼可以穿過人的身體一樣。難道，真的見鬼了？??！

版本首次發布后，發現Safari下前景會穿過后景翻轉起來（線上存在幾個小時，有同學可能還記得當時的現象）。檢查動畫的實現方式，沒有問題；檢查圖片的z-index，也正常；而且同為Webkit內核，Chrome下完全正常，只有Safari有此問題（我了個去，Safari是不是Webkit家族的呀，血統不正啊）。理論很豐滿，展現很骨感；同內核不同表現；唉~

阿拉水平有限，沒有找到根本原因，最終采取了一種偽方法來解決：

將后景圖在z軸方向上向著屏幕內平移一定距離，使前景和后景圖貼在地面上時不會有疊在一起的部分，簡單示意如下：

原圖：

?平移示意圖：

?平移后前后景是不會交疊在一起了，但后景圖片變小了（沿著z軸向屏幕內，漸行漸遠，漸行漸小……），需把它恢復正常大小才行啊，腫么辦？縮放屬性scale()。平移后圖片縮小至原來的多少分之一，我們就把它通過scale屬性再放大多少倍。

用代碼說話：transform:translateZ(-350px) scale(1.17,1.17);
這樣，前后景圖貼在地面上時不會交疊，翻轉時自然就不會穿透了。

2.3 動畫不流暢，怎么辦？

元素移動的動畫怎么實現，如果不流暢怎么辦？用飄柔嗎？

動畫中實現元素的移動，通常有兩種方法，一種就是我們熟知的絕對定位，即將要移動的元素絕對定位，然后通過top/bottom/left/right值來控制元素的動態位置；另一種是css3動畫中專有的移動屬性translate。

首頁動畫中文字的墜落和移出，最初是通過絕對定位后調整top值實現的，如墜落部分的動畫代碼：

后發現動作有些許的咔，調整時間和位移值后依然無效，換用translate后流暢了許多：

備注：已為元素設置默認狀態：{ position:absolute;top:-600px; }

關于定位（top等）和位移（translate），就我目前的經驗來說，translate在流暢度方面要好些，而且，移動的速度越慢，translate在流暢度方面的優勢就越明顯。但是，Firefox對translate的支持不是很好，某些速度下會像流星一樣拖著長長的尾巴。So，究竟何去何從，還請各位具體問題具體分析，測試后再行定奪。

2.4 Firefox和IE10不能觸發重播動畫？！

動畫隱藏后再顯示，Firefox和IE10下不能觸發重播動畫，點解？

如大家所見，我們的動畫是4幅輪播的形式，當前播放的只有1幅，對于當前沒有播到的動畫，需將其隱藏起來。如果是你，你會怎么隱藏？用我們慣用的hide （display:none;）嗎，播放時再通過 show （display:block;）將其顯示出來？這樣可以嗎？當然可以——理論上！實際上，Firefox和IE10下，若將節點hide后再show，是不能觸發重播動畫的。

好吧，退一步海闊天空，最終通過透明度來控制動畫容器節點的顯隱。

3. 差異化體驗

支持動畫的瀏覽器有Chrome、Safari、Firefox和IE10，對于不支持動畫的瀏覽器，采取差異化體驗，僅將圖片淡入淡出。

Part 4：我如此飛奔，就是為了讓你慢下腳步（性能優化）

1. 首幅特殊處理

第一副圖片的動畫播放時，頁面往往還在加載資源，這時動畫就會出現不流暢的現象。怎么處理呢？先出背景，讓banner有個可以看的畫面，待首屏加載完畢后再開始播放動畫。

?2. 延時加載

為了實現動畫，一張圖片被切成了4~5張，4幅下來，將近20張，雖然圖片壓了又壓，總大小也500k有余了。如果網速低的話，全部加載完畢菊花都轉疼了，帶著拯救菊花的愿景，我們開始折騰了：
除第一幅動畫所需的圖片外，其他動畫所需圖片延時2s加載。你可能會問，那會不會播放到某幅動畫的時候，或者用戶點了某幅動畫對應的輪播按鈕時，該動畫所需資源還沒加載到??？恭喜你，問對了——會！如果這個時候該播的動畫資源還沒加載到，banner就要空白了（如下圖），怎么辦呢？

?不怕，道高一尺，魔高一丈，哪里有問題，哪里就有解決方案：

為了優化體驗，出現這種情況時，需讓動畫暫時停留在上一幅的狀態，待相應動畫的資源加載完畢后再切換?？蓡栴}是，css3中的動畫播放完畢后，是會回到動畫播放前的狀態的，而非停留到動畫最后一幀的狀態。據前文“Firefox和IE10不能觸發重播動畫？！”部分所述，動畫播放前整個動畫容器是通過透明度隱藏的，是不可見的，那么，“讓動畫暫時停留在上一幅的狀態”只能是YY了。

就這么放棄嗎？不！絕不！動畫特性不支持，我們還有偽方法：

將動畫拆分成in、out兩段將動畫拆分成in、out兩段，其中in包含兩個狀態：進入和停留，將in的時間設置得很長（通過幀控制使進入時間不變，只是停留的時間長了，如將in設為50s，其中進入0.5s，停留49.5s），out時長不變。若到了輪播切換（周期為10s）的時候，或者用戶點擊了某輪播按鈕時，如果下一幅要播放的動畫素材已加載完畢，則js將動畫切換至out狀態，否則繼續停留，直至下一幅播放動畫的素材加載完畢才切換。（有點滑動門的趕腳，不過是時間方面的，有木有?。?/p>

?以背景淡入淡出為例，動畫方面代碼說話：

拆分前：

拆分后：

后記：

首頁動畫，基本是我第一次嘗試使用css3動畫，邊學邊做，邊做邊學，很多地方理解地還不是很透徹，文中如有錯誤，歡迎指正，如有更好的建議和方法，跪求交流。css3動畫，想要入門很容易，但想要玩得轉、玩得嗨、玩得隨心所欲卻很難。其中的透視原理、數學思想等等都是值得深度挖掘的。只有把它們弄懂弄通，才能信手拈來，隨意排列組合，用有限的屬性做出無限可能的效果。

來源：TID-財付通設計中心