動畫的post-Flash時代幾乎是免費的。 CSS動畫正迅速成為用戶友好界面的基石在移動和桌面,和JavaScript庫已經存在處理復雜的交互式動畫。 之后,這么多“CSS和JavaScript動畫”內斗,一個新的API專門為網絡動畫出來,可能只是團結兩個陣營。

web的動畫,這是一個激動人心的時刻,也是一次嚴重的誤解和錯誤的信息。 2014年,我有機會周游世界來談論?在用戶界面設計中使用動畫?。 我見到并采訪了許多人使用和冠軍的CSS和JavaScript。 在采訪了許多開發人員,設計師和瀏覽器的代表,我發現了一個技術和人類的故事被告知。

你將要讀的是純粹的觀察和公正的一個帳戶,你將能夠找到在網絡動畫的主題。

Flash可能消失,但網絡動畫的時代才剛剛開始

Flash的時代以來,它已經成為時尚認為動畫裝飾,多一個“華麗”事后,經常在貧窮的味道,就像一件不受歡迎的?眨眼標記。 但是,除非我們想要顯示在屏幕上沒有什么比復制其他,動畫仍然是我們的朋友。

為?用戶界面設計師?、動畫加強層次結構、人際關系、結構和因果關系。?回到90年代早期的研究?表明,屏幕上的動畫幫助人類理解發生了什么。 動畫縫合在一起應用狀態和分流工作,大腦的GPU——視覺皮層。

為?交互開發人員?復雜的視覺效果,從圖表上顯示板,電子游戲在平板電腦上——是不可能創造沒有動畫膠各部分組合在一起。 如果我們想要這些東西在互聯網上,我們仍然需要動畫。

遺憾的是,我們已經落后于運動設計競賽。 產品使用動畫受益用戶會成功,靜態或animation-abusing競爭對手將會失敗。 目前,本地應用跳動的褲子了。 應用程序開發人員已經將動畫融入他們的設計和充實工作流和原型設計工具?flinto?和?Mitya?從第一天開始。

但事情可能會扭轉。 iOS的狩獵團隊趕走了CSS動畫和過渡規格,以便網站外觀和感覺和iOS應用程序做的一樣好。 甚至谷歌已經撿起,?把動畫前面和中心?其材料設計建議,小心守則應用動畫和過渡有意義,有目的。

動畫是自然進化的下一步我們的應用程序和設備的生態系統。 它使數字世界各個年齡層的用戶更直觀和有趣的。 只要我們的設備運動gpu,它不會消失。

動畫的所有事情

在其核心,動畫只是一個可視化表示隨時間和空間變化的速度。 所有的動畫可以簡化為三種類型:

靜態的動畫?從起點到終點,沒有分支或邏輯。 這可以?CSS獨自完成?,因為?豐富的CSS加載動畫?證明了。

有狀態的動畫?在其最簡單的形式接受布爾輸入-?點擊打開一個菜單,點擊關閉它?例如,兩個國家之間的變化。 這是目前實現JavaScript框架的應用和刪除類作用域CSS動畫。

動態動畫?可以有多個結果取決于用戶輸入和其他變量。 它使用自己的邏輯來確定如何應該動畫和他們的端點是什么。 可能需要背后的“拖”頁面根據你刷卡的速度,你的手指或動態變化的圖形作為新的數據。 這是最棘手的動畫在我們今天處理完成的工具。 CSS就不能用于這種類型的動畫。

更多的國家! =動態動畫

精明的CSS開發人員可能指出,有足夠的州,CSS動畫可以相似動態動畫。 這是真正的一個點。 但真正的動態動畫更多的比你可能預期的結束狀態。

想象一下不起眼的加載酒吧。 有一個不同的類為每個百分點的“豐滿”很容易就跑到一百行CSS,更不用說JavaScript的次數將會接觸到DOM更新類和瀏覽器重繪。 我們絕對可以編寫一個更動態加載程序單獨使用JavaScript性能。

CSS動畫是聲明:除了少數偽類,如?:徘徊和?:目標,它接受來自用戶和用戶的上下文環境。 它只是作者告訴它做什么,不能應對新的輸入或改變環境。 沒有辦法創建一個CSS動畫,說:“如果你在頁面的中間,這樣做,否則,這樣做。 “CSS不包含這樣的邏輯。

當CSS-first開發者需要邏輯,他們通常先范圍CSS類,使用JavaScript處理的邏輯在應用這類。 框架如?AngularJS?支持國家,許多UI交互容易適應一些州,如“加載”,“開放”和“選擇。 “這些動畫也在老的瀏覽器完全降低,提供急需的用戶體驗提升支持CSS動畫和過渡的地方。

交互開發人員有不同的時間。 CSS動畫也常常聲明來處理這些開發人員想要的東西。 付費客戶需求可靠動畫跨瀏覽器的廣泛,所以,許多交互開發人員和他們的工作室所做的所有聰明的開發人員做什么:讓省力庫定制自己的過程。 其中一些圖書館,喜歡?gsap?和?速度?向公眾開放和發達。 但許多人永遠不會被釋放在野外,因為人民和機構創建他們沒有時間或金錢(或將會)來支持一個開源項目。

這是一個令人深感擔憂的故事,我聽過一遍又一遍,它表明,許多開發人員都無需移動web的重新發明輪子。 沒有足夠的需求被認為是“好”的東西來支持許多競爭對手。 很容易看出圖書館像GSAP必須商業為了生存,或者贊助浮標庫速度。

Flash做了偉大的事情給交互開發人員和用戶界面設計人員一個通用工作流,適應各種各樣的動畫和編輯平臺。 但自?史蒂夫·喬布斯在2010年宣布iPhone不會支持Flash?,許多前Flash開發者已經悄悄地進入流亡,帶著他們的小知識。 現在,整整一代的網頁設計師與相對上線不知道我們面臨的機會和挑戰時增加動畫的復雜性。

但事情將變得很…動畫。

網絡動畫API:?最偉大的?一個?你從未聽說過的API

網絡動畫API是一個W3C規范,提供了一個統一的語言CSS和SVG動畫,打開瀏覽器的動畫引擎開發人員操作。 它下面的:

• 為動畫引擎提供一個API,使我們能夠開發更多瀏覽器動畫工具,讓動畫庫利用性能提高;

• 給(排位賽)動畫它們自己的線程,擺脫閃避;

• 支持?運動路徑?;

• 提供post-animation回調;

• 引入?嵌套和測序動畫?以來,我們還沒有看到閃光;

• 讓我們暫停,玩耍,探索,反向,加速或者減速播放?時機字典?和?動畫播放器對象?。

這是?只是一個例子的Web API可以CSS動畫無法?。

支持

Web動畫API已經超過兩年,和它的功能一直在推出Chrome和Firefox夜間在過去的六個月。 Mozilla是規范背后的主要力量。 與此同時,Chrome團隊已經優先發貨的功能。

微軟API“考慮”?Internet Explorer。 蘋果,令人驚訝的是,Safari也采取了觀望的態度。 我們只能幻想當API將達到這些?web應用程序引擎由古老的開源瀏覽器的叉子?。

早期用戶想要探索這個API可以嘗試?Web動畫polyfill API?,這是由所取代?網絡動畫下?現在隨便任何一天(更多關于polyfill和API可以發現?聚合物的網站項目?)。 然而,對于不支持的瀏覽器API,polyfill仍不如GSAP性能,基于javascript動畫庫的衛冕冠軍。 因此,polyfill不是互動,開發人員需要為高性能項目投入生產。

這將是一段時間這個API支持。 有一半的瀏覽器制造商等著看開發人員將會使用它,并大多數開發人員拒絕使用一個工具,不是廣泛支持,API將面臨一個雞生蛋還是蛋生雞的場景。 然而,在一個臺上交談與谷歌的保羅Kinlan Fronteers,我建議,API是完全支持web應用程序在一個封閉的和"系統,例如谷歌,開發人員能夠安全地使用它在一個“圍墻花園”,直到它達到成熟和全面的支持。

性能

API的作者和實現者希望動畫庫開發人員將啟動feature-sniffing API的支持去挖掘它的性能優勢。 因為Web API使用CSS動畫的渲染引擎,我們可以預期CSS的性能水平。 動畫將運行在它們自己的線程,只要他們不依賴于任何發生在主線程,如JavaScript或布局。

說到布局,回流處理障礙仍然是最大的一個瀏覽器。 沒有CSS或JavaScript動畫可以繞過它,除非你把一切直接通過WebGL GPU(一些聰明的內部圖書館開發人員一直在做)。 除了不透明和?轉換,帶動了大量CSS屬性將導致回流,布局的改變和/或重新繪制在屏幕上的像素。 的?將會改變CSS屬性幫助一些?讓我們點的東西,告訴瀏覽器,“將會發生改變,那件事。 你做你要做有效地改變它。 “希望隨著瀏覽器越來越懂得圖形,他們將這些元素進入自己的層或優化他們處理這些圖形的方式。 這是消除黑客的第一步?translateZ(0)。

等“性能黑客”經常被打了一個神奇的修復每當動畫閃避,但他們經常使用時無意中導致性能問題。 性能決定最好是真正留給瀏覽器從長遠來看。 幸運的是,瀏覽器制造商爭相讓更少的屬性觸發回流,從而讓他們從主線程。 對于動畫庫開發人員,這意味著Web動畫API可以贏得合作伙伴的性能在不久的將來。

工具

任何人使用web動畫渴望適當的動畫開發工具:一個時間表,財產檢查,更好的編輯,并且能夠暫停,回放,否則檢查調試時一個動畫。 網絡動畫API將開放CSS渲染引擎的核心開發者和瀏覽器廠商自己創建這些工具。 這兩個?鉻?和Firefox準備動畫功能的開發工具。 這個API打開這些可能性。

今天的Web動畫社區

沒有多少人以外的其他工作都知道網絡動畫的API。 標準社區是渴望真實的反饋交互和動畫庫開發人員。 然而,許多開發人員認為standardistas生活在象牙塔,遠離戰壕的放縱,客戶的需求和Flash的經驗教訓。

老國王的冠軍他曾流放的人。?

公平地講,standardistas還沒有出來迎接他們的聽眾。 加入“官方”Web動畫API談話,你必須跨越一些障礙,讓電子郵件鏈可能溢出的收件箱忙碌的開發人員。 或者,您可以在IRC和加入談話,如果只有設計師使用IRC。 需要發生的談話是不太可能發生,如果人最簡單地說沒有。 供應商和規范作者需要找到更多的方法來接觸他們的關鍵的觀眾,否則風險構建一個API沒有觀眾。

但standardistas并不是唯一有溝通問題。 作為一個社區,我們非常武斷和快速嘲笑我們認為不值得的事情,Flash或一個API,我們不喜歡的樣子。 我們中的很多人投資我們的自我的工具和流程。 但這些東西不能定義我們。 我們一起創建定義了我們。

• 動畫庫開發人員?,?閱讀此規范?。 它很長,但是如果GreenSock的杰克柯南道爾能做到,你也可以。

• 交互開發人員?那些沒有整天讀一個巨大的規范,只是讀了?自述polyfill的頁面?。 這是一個完美的TLDR。 現在你知道什么是未來,你就會知道當它可能對你有用,是否優化圖書館的性能或構建一個瀏覽器UI時間表。

• 設計師?,在工作中優先考慮的JavaScript。 polyfill玩,玩GSAP和速度。 找出這些東西能做什么對你的工作,CSS無法完成。

與網絡動畫,我們有一個難得的機會,把我們的自我放在一邊,一起作為一個社區構建一個工具,未來的設計人員和開發人員可以構建偉大的事情。 為他們的緣故,我希望我們能。

本文由北京網站建設公司傳誠信翻譯傳播，轉載請注明！