蘋果官網新款 Mac Pro 的介紹頁面是怎樣用 HTML5 做到了如此流暢的動畫？

01-02

非常漂亮，推薦觀看——
網頁版（HTML 動畫）：Apple - Mac Pro
視頻：

【超清】Apple WWDC2013- 全新Mac Pro官方介紹視頻視頻

主要的動畫即中間那個黑色的 Mac Pro 機體的旋轉和變化等是預先渲染好的 H.264/MP4 視頻 [1]，

這部分用成熟的解碼器就可以流暢播放了。剩下的文字和交互部分的變化大量使用了 CSS3 的漸變屬性，在帶有 GPU 加速的現代瀏覽器【桌面和移動版的 Safari 都可以】裡面很流暢，如果沒有 GPU 加速的話，性能就呵呵了……

[1]: http://movies.apple.com/media/us/mac-pro/2013/96614028-695e-478a-8db8-0ad1c7b42925/video/macpro_main_desktop.mp4

$$("video")

[

]

依靠這兩個視頻文件做基礎然後配合css3 翻轉漸變動畫渲染. 只是看到啦這些東西,真正做起來很麻煩啊銜接的真棒

famo.us

看看這個吧,開了之後我只發現自己cpu飆升了下,而且apple那個動畫完全說不上有什麼擴張的.

…… 似乎貌似和 HTML5 關係並不大，在動畫上。

基本上算是傳統 DOM 動畫了，當然也用到了 CSS3 的屬性 transition，

因此不是像最原始的那樣，隨時改變 CSS 的值，而只需要修改關鍵幀。

國內很多站點也用到同樣的東西，比如這個問題 http://www.zhihu.com/question/21074433 里

提到的 http://www.wps.cn/product/wps2013

通過滑鼠觸發動畫的三方組件挺多的，比如 https://github.com/brandonaaron/jquery-mousewheel

而 DOM 動畫，有一個庫很贊： GSAP JS – Professional-Grade JavaScript Animation ? GreenSock

最後，「如此流暢」…… 移動設備訪問也能流暢那才是真的流暢。

（也是現在前端糾結的地方，再炫的交互，在移動端也得適當閹割）