資訊專欄INFORMATION COLUMN
摘要：今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。三動畫技術(shù)越來越不陌生，使用門檻也漸漸降低，而且動畫還可以使用控制。掃一掃查看效果打開微掃一掃關(guān)注早讀君，每天早晨為你推送前端知識，度過擠地鐵坐公交的時光
今日勵志語錄
有志者自有千計萬計，無志者只感千難萬難。
文章原出處：騰訊ISUX
開始閱讀之前你可以先掃一掃體驗demo
這是一種比較常用的動畫，它的優(yōu)點是節(jié)奏感強，做法就是先讓每個元素隱藏，然后當頁面呈現(xiàn)后每個元素錯開時間出現(xiàn)。
例子（忽略兼容前綴和無關(guān)屬性）：
效果就是兩個元素分別從上面掉下來，這里有個小細節(jié)（keyframes），為了讓掉下來的動畫生動點，應該是在90%的時候先掉下一點點，然后瞬間在100%時回跳5px。
還有個細節(jié)，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是漸變動畫不能停止在最后一幀。有這樣一個解決方案：
1.用Modernizr去檢測是否支持這個屬性，加上識別類.no-animation-fill-mode；
2.根據(jù)識別類采取以下措施：
（1）用js模擬同樣效果；
（2）用css屏蔽掉動畫；
（3）或者直接全部都用transition來做（不要keyframes）。
示例頁面如下：
二、CSS3細節(jié)強調(diào)動畫一些局部細節(jié)如果還是漸現(xiàn)顯示，會枯燥沒什么感覺，例如標題、按鈕等，需要一種強調(diào)。
分兩種情況：
1.如果時間允許的話，基本做法是先把一個元素切成不同的塊狀，例如小人的手腳都切成不同圖片，然后讓它們重新組合，再通過賦予不同的CSS動畫來讓它生動起來，這里引用個webank的例子：
2.如果時間緊湊，又不像桑尼一樣擅長于動畫細節(jié)，可以使用一些輔助工具：
Animate.css，通過直接預覽選擇想要的動效，然后下載它的CSS把對應的keyframe扒下來就好了（引用整個CSS是資源浪費）。
三、SVG動畫SVG技術(shù)越來越不陌生，使用門檻也漸漸降低，而且SVG動畫還可以使用CSS控制。
可見SVG是很強大的！彌補了CSS3的不足。
然而這種動畫也是略耗時，但有一種比較常用的，就是線條的描繪動畫，CSS3比較難實現(xiàn)，這里可以用SVG，
介紹一個PS插件svgArtisan（目前還未有主頁），這個工具可以直接根據(jù)PSD的路徑圖層生成SVG圖形。
接下來就簡單了，將設(shè)計稿上的路徑圖形用插件生成對應的SVG，例如是這樣的：
（注意，其中的foreignObject標簽內(nèi)是不支持svg的瀏覽器會看到一張.m3-svg-nosupport標簽下的圖片。）
再使用CSS3的animation控制stroke-dashoffset：
效果不難吧！SVG還有各種用途，例如制作ICONFONT等，可以深入挖掘。
四、 重力陀螺儀想讓頁面更有層次感，不妨讓設(shè)計提供一些碎片元素，例如彩花，星星之類，然后把它們多帶帶切出來放畫面前景，使用陀螺儀伴隨著手機運動碎片也跟著運動，多么好玩！
這里提供一個工具可以輕松實現(xiàn)陀螺儀重力效果的：parallax.js
用法簡單，定義一個parallax-obj的父類，把需要動的元素加上layer的類，然后設(shè)置動的范圍data-depth：
五、背景音樂&音效H5頁面要炫酷，畫面生動還是不夠的，一定要配合生動的音樂。因此可以主動跟設(shè)計或產(chǎn)品溝通，讓他們可以提供音樂資源，分分鐘導致UV猛漲有木有！
當然，有了音樂，前端也不是直接引用的，還是有點要求：
1.音樂不宜過長，30s為佳，而且音樂要加上漸現(xiàn)漸隱效果，方便循環(huán)播放；
2.音樂體積要小，音質(zhì)和流量，在手機上還是優(yōu)先考慮流量吧。
一般背景音樂體積可以接受的范圍是200K以下，若太大，可以使用格式工廠等軟件，降低它的比特率和聲道來改變體積。
接著，只需要簡單引用：
這里有個問題，IOS是不能自動播放音樂的，一定要觸發(fā)一個用戶交互事件，例如點擊。
但是有一種hack的方法可以讓IOS微信側(cè)頁面自動播放（SAFARI依舊無效）：
通過new一張圖片，監(jiān)聽一張圖片的onload事件，結(jié)束后回調(diào)執(zhí)行音頻播放audio.play()即可，原理估計是動了dom結(jié)構(gòu)，相當于執(zhí)行了一次交互。（有人也用過createEvent模擬，原理也是動了dom。）
因此，記得暴露一個音樂關(guān)閉/打開的按鈕，不然肯定被用戶罵死。
六、有趣的loadingLoading頁還是要有的，萬一用戶網(wǎng)速慢呢？
以上做了那么多事，如果沒有資源加載都是玩不來的，因此還需要一個loading的支持。一般情況下頁面體積大于3m則要加上loading頁。
然而loading還是可以做得很有趣的，一般的做法是：
1.引入品牌，例如APP宣傳頁；
2.引入有趣動畫，放一個賤賤的人物跳舞給你看；
3.一切從簡，用CSS3簡單動畫。
====最后總結(jié)====最后，給一個例子結(jié)尾吧。
這是空間5.0預約頁第二版，使用了以上的若干方法論，例如loading動畫，CSS3動畫，SVG星空連線，首屏星球重力感應，音樂（這里使用開啟按鈕后播放）等等。（由于活動已結(jié)束，很多運營處都被刪掉從簡了，忽略那些細節(jié)）
當然，真正要做到高效制作動態(tài)H5頁面，還是靠積累，因此平時做好的細節(jié)動畫自己都積累起來，下次分分鐘就能用得上。
掃一掃查看效果
打開微掃一掃關(guān)注早讀君，每天早晨為你推送前端知識，度過擠地鐵坐公交的時光
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/117165.html
摘要：今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。三動畫技術(shù)越來越不陌生，使用門檻也漸漸降低，而且動畫還可以使用控制。掃一掃查看效果打開微掃一掃關(guān)注早讀君，每天早晨為你推送前端知識，度過擠地鐵坐公交的時光 今日勵志語錄有志者自有千計萬計，無志者只感千難萬難。 文章原出處：騰訊ISUX 開始閱讀之前你可以先掃一掃體驗demoshowImg(https://segmentfault.co...
摘要：前言微信小程序中可以直接運行頁面，這一新組件的產(chǎn)生，可能直接導致小程序數(shù)量迎來一波高峰。微信小程序配置系列問題配置域名業(yè)務域名中配置的就是小程序以及和中引用的域名。 今日勵志語 要接受自己行動所帶來的責任而非自己成就所帶來的榮耀。 前言 微信小程序中可以直接運行 web 頁面，這一新組件 web-view 的產(chǎn)生，可能直接導致小程序數(shù)量迎來一波高峰。本篇博文將從業(yè)務選型，微信小程序后臺...
摘要：即將立秋的課多周刊第期我們的微信公眾號，更多精彩內(nèi)容皆在微信公眾號，歡迎關(guān)注。若有幫助，請把課多周刊推薦給你的朋友，你的支持是我們最大的動力。課多周刊機器人運營中心是如何玩轉(zhuǎn)起來的分享課多周刊是如何運營并堅持下來的。 即將立秋的《課多周刊》(第2期) 我們的微信公眾號：fed-talk，更多精彩內(nèi)容皆在微信公眾號，歡迎關(guān)注。 若有幫助，請把 課多周刊 推薦給你的朋友，你的支持是我們最大...
閱讀 1762·2023-04-25 19:37
閱讀 1349·2021-11-16 11:45
閱讀 2842·2021-10-18 13:30
閱讀 2809·2021-09-29 09:34
閱讀 1700·2019-08-30 15:55
閱讀 3142·2019-08-30 11:10
閱讀 1865·2019-08-29 16:52
閱讀 1022·2019-08-29 13:18
